如何实现实时聊天功能?

比如聊天机器人,小度同学之类的

需求:

    ** 1. 与小度同学建立连接**<br />**         2. 开始双向对话**

思考: 在做这个需求之前我们先思考一个问题 : 为什么ajax不方便实现这类实时聊

天?

         因为ajax是遵守http协议的,而http协议有一个典型的特点就是: 通信只能是由客户端发起，服务器端收<br />           到请求后，给予响应。这就是我们常说的：请求和响应。也就是说,服务器不能主动的向客户端<br />           发送消息,如果你想得到对方给你的留言,就要不断的去请求是否有新的数据 

图示说明:

               ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1623918293879-7979462f-d43a-4b79-b99f-e6a701c045d6.png#clientId=u964902db-f2ee-4&from=paste&height=212&id=ufe5ec8af&margin=%5Bobject%20Object%5D&name=image.png&originHeight=212&originWidth=560&originalType=binary&ratio=1&size=26705&status=done&style=none&taskId=u1b1805e0-4a44-4359-afa3-29fa4ad0c16&width=560)<br />            轮询:  <br />                       ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1623918593264-86c0737e-7acf-4dab-a170-190d22ef911f.png#clientId=u964902db-f2ee-4&from=paste&height=132&id=ue4de6c8f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=132&originWidth=414&originalType=binary&ratio=1&size=4463&status=done&style=none&taskId=u490ed3d1-305f-4f3e-b775-baad160dbee&width=414) 效率低下!!!

所以就产生了WebSocket !! 往下看

webSocket 介绍

什么是WebSocke?

双向平等对话,WebSocket 是一种数据通信协议，类似于我们常见的 http 协议。

特点 :

   服务器可以主动向客户端推送消息.客户端也可以主动向服务器发送消息

与ajax的区别:

   它连接一次之后，可以进行多次通讯；而ajax每一次的通讯都要由客户端发起，服务器响应。

工作流程图:

               ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1623919523781-378b8346-1c16-4672-a114-e2da03c56103.png#clientId=u964902db-f2ee-4&from=paste&height=269&id=u64f822b2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=269&originWidth=573&originalType=binary&ratio=1&size=21888&status=done&style=none&taskId=ud4de4497-0935-4a4d-9f5c-c840187ef17&width=573)

用socket.io来实现对话功能

什么是socket.io

          它是对原生的webSocket的封装

核心步骤

代码演示

1.安装 :
2.导入使用:

3.建立连接:

 this.socket = io('http://localhost:8001', { // 地址是根据接口文档上面提供的 变化
      query: {
        token: this.$store.state.tokenInfo.token  
      },
      transports: ['websocket']
    })

4.发消息给服务器

 methods: {
    send () {
      // 4. 发送消息给服务器
      const msg = this.word   // 这里的msg和timestamp 是自己在list里面定义的
      const timestamp = Date.now()
      // 发给服务器  message 消息名 后端约定的
      this.socket.emit('message', { msg, timestamp })  // 这里面的内容部分不是固定的
      // 添加到list
      this.list.push({内容})
    }
  }

5.连接成功的回调

  created () {
    // 5. 连接成功的回调
    this.socket.on('connect', (obj) => {
      console.log('与服务器连接成功', obj)
      this.list.push({
        name: 'xz',
        msg: '我上线了,你来找我玩吧',
        timestamp: Date.now()
      })
      // 6. 从服务器收消息
      this.socket.on('message', (obj) => {
        console.log('从服务器回来的内容', obj)
        this.list.push(
          {
            name: 'xz',  
            msg: obj.msg,
            timestamp: obj.timestamp
          }
        )
      })
    })
  },

6. 从服务器收消息