vue3中websocket用法

1.0 认识 websocket

#1.0.1 什么是 websocket

和 http 协议类似，websocket 也是是一个网络通信协议，是用来满足前后端数据通信的。

#1.0.2 websocket 相比于 HTTP 的优势

HTTP 协议：客户端与服务器建立通信连接之后，服务器端只能被动地响应客户端的请求，无法主动给客户端发送消息。

websocket 协议：客户端与服务器建立通信连接之后，服务器端可以主动给客户端推送消息了！！！

#1.0.3 websocket 主要的应用场景

需要服务端主动向客户端发送数据的场景，比如我们现在要做的智能聊天

#1.0.4 HTTP 协议和 websocket 协议对比图

1.1 vue3组合api中socket.io-client 的基本使用

#1.1.1 安装和配置 socket.io-client

参考 socket.io-client 的官方文档进行配置和使用

1. 在项目中运行如下的命令，安装 websocket 客户端相关的包：

   npm i socket.io-client@4.0.0 -S
   
   # 如果 npm 无法成功安装 socket.io-client，可以尝试用 yarn 来装包
   # yarn add socket.io-client@4.0.0
   

2. 在 xx.vue 组件中，从 socket.io-client 模块内按需导入 io 方法：

   // 按需导入 io 方法：调用 io('url') 方法，即可创建 websocket 连接的实例
   import { io } from 'socket.io-client'
   

3. 事先setup中定义变量 socket，用来接收 io() 方法创建的 socket 实例：

   let socket = null
   

#1.1.2 创建和销毁 socket 实例

1. 在 xx.vue 组件的setup onMounted生命周期函数中，创建 websocket 实例对象：

   onMounted(() => {
     // 创建客户端 websocket 的实例
     socket = io('ws://www.liulongbin.top:9999')
   })
   

2. 在 xx.vue 组件的setup onBeforeUnmount生命周期函数中，关闭 websocket 连接并销毁 websocket 实例对象：

   // 组件被销毁之前，清空 sock 对象
   onBeforeUnmount(() => {
     // 关闭连接
     socket.close()
   
     // 销毁 websocket 实例对象
     socket = null
   })
   

#1.1.3 监听连接的建立和关闭

1. 在 xx.vue 组件的setup  onMounted 生命周期函数中，调用 socket.on('connect', fn) 方法，可以监听到 socket 连接成功的事件：

   // 建立连接的事件
   socket.on('connect', () => console.log('connect: websocket 连接成功！'))
   

2. 在 xx.vue 组件的 created 生命周期函数中，调用 socket.on('disconnect', fn) 方法，可以监听到 socket 连接关闭的事件：

   // 关闭连接的事件
   socket.on('disconnect', () => console.log('disconnect: websocket 连接关闭！'))
   

#1.1.4 接收服务器发送的消息

1. 在 Chat.vue 组件的 setup  onMounted 生命周期函数中，调用 socket.on('message', fn) 方法，即可监听到服务器发送到客户端的消息：

   // 接收到消息的事件
   socket.on('message', msg => console.log(msg))
   

2. 将服务器发送到客户端的消息，存储到 xx.vue 组件的 list 数组中：

   // 接收到消息的事件
   socket.on('message', msg => {
     // 把服务器发送过来的消息，存储到 list 数组中
     this.list.push({ name: 'xs', msg })
   })
   

#1.1.5 向服务器发送消息

1. 客户端调用 socket.emit('send', '消息内容') 方法，即可向 websocket 服务器发送消息：

   // 提交按钮的点击事件处理函数
   const send = () => {
     // 如果输入的聊天内容为空，则 return 出去
     if (!this.word) return
   
     // 向服务器发送消息
     socket.emit('send', this.word)
     // 将用户填写的消息存储到 list 数组中
     this.list.push({ name: 'me', msg: this.word })
     // 清空文本框中的消息内容
     this.word = ''
   }