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 的官方文档进行配置和使用

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

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

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

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

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

#1.1.2 创建和销毁 socket 实例

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

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

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

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

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

在 xx.vue 组件的setup onMounted 生命周期函数中，调用 socket.on('connect', fn) 方法，可以监听到 socket 连接成功的事件：
```
// 建立连接的事件
socket.on('connect', () => console.log('connect: websocket 连接成功！'))
```
在 xx.vue 组件的 created 生命周期函数中，调用 socket.on('disconnect', fn) 方法，可以监听到 socket 连接关闭的事件：
```
// 关闭连接的事件
socket.on('disconnect', () => console.log('disconnect: websocket 连接关闭！'))
```

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

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

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

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

#1.1.5 向服务器发送消息

客户端调用 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 = ''
}