11-vue移动端项目(小智机器人聊天使用websocket协议使用socket.io客户端第三方包, 让div滚动条自动滚到最底部)

小智同学

01 - 创建组件

• 创建组件 & 创建路由
  
• 设置入口
  

02 - 完成静态页面

头部标题

聊天区域

• 设置内容高度时会出现一个问题：
  • 由于不同的手机型号的高度是不一样的，但是聊天区域的高度必须是整个页面除去头部 & 底部的高度。
• 解决方案：
  • 不给这个盒子设置一个固定高度
  • 给这个盒子设置一个定位（fixed固定定位）
    • 给盒子同时设置 top & bottom 属性
    • 将来盒子的高度就是 top 与 bottom 之间距离

信息发送

03 - 渲染聊天

步骤：

• 1.0 先在页面上创建一个数组 chatArr：用来保存聊天记录

<template>
  <div class="zhi">
      <!-- 头部导航栏 -->
     <van-nav-bar @click-left="$router.back()" left-arrow :fixed="true" class="mytitle" title="小智同学" />
      <!-- 聊天记录 -->
      <div class="mychat" ref="mychatRef">
           <div class="item" :class="{user: item.isRobot===false}" v-for="(item, index) in chatArr" :key="index">
              <img src="http://img1.imgtn.bdimg.com/it/u=2968595031,269504194&fm=15&gp=0.jpg" alt="">
              <div class="content">{{item.content}}</div>
           </div>
      </div>
      <!-- 发消息的输入框 -->
      <van-field class="myWrite" @keyup.enter="send" v-model="value" clearable>
            <template #button>
                <van-button @click="send" size="small" type="primary">发送</van-button>
            </template>
        </van-field>
   </div>
</template>

• 2.0 数组的结构是：

  [
  	{ content: '机器人说的话', isRobot: true },
  	{ content: '用户说的话', isRobot: false }
  ]
  

• 3.0 将数据渲染到页面
  

小智同学 - 完成聊天

功能分析：

• 1.0 打开页面时，机器人会说：你好啊，我是小智。同学
• 2.0 用户回复：任意内容
• 3.0 机器人再进行回复

实现步骤：

• a. 发送聊天内容到服务器：

• 在 send 事件中：

  • 将输入框中的内容添加到 chatArr 中

  • 将内容提交到服务器

    • 请求服务器的接口（聊天机器人）

      • 请求地址：http://ttapi.research.itcast.cn?token=xxxxx

      • 请求方式： socket.io

      • 发送数据：

        socket.emit('message', {
        	msg: '', // 聊天的内容
            timestamp: '' // 时间戳
        })
        

      • 接收数据：

        socket.on('message', data => {
        	// data: { msg: '', timestamp: '' }
        })
        

    • 在项目中导入第三方包 socket.io

      • 下载 socket.io-client
      • 导入 socket.io-client
      • 创建一个 socket 对象
      • 使用 socket 进行交互

  • 清空输入框中的内容
    

• d. 接收服务器响应的数据

  • 在 mounted 中通过 this.socket.on('message', v=> {}) 来接收数据
  • 将接收到的数据保存到 chatArr
    

• 注意点：

  • 提交到服务器的接口使用的 websocket 协议，需要使用 socket.io 客户端的第三方包
    • 下载第三方包：npm i socket.io-client
    • 导入第三方包： import io from 'socket.io-client'
    • 使用第三方包：
      • 连接服务器： var scoket = io('xxx.xxx.xx')
      • 发送信息：scoket .emit(key, value)
      • 接收信息：scoket .on(key, value => {})
  • 在跟机器人聊天时,如果聊到最底部了,我们要让类名为mychat的聊天区域这块的滚动条自动滚动到最底部
    

实现效果:
这里样式代码我没写上去,用户发的消息的那个item其实就是多了个user类名,user类名就是让item在右边展示