vue3中websocket用法

港控/mmm° 2022-09-11 04:26 470阅读 0赞

## 1.0 认识 websocket ##

### [\#][Link 1]1.0.1 什么是 websocket ###

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

### [\#][Link 2]1.0.2 websocket 相比于 HTTP 的优势 ###

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

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

### [\#][Link 3]1.0.3 websocket 主要的应用场景 ###

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

### [\#][Link 4]1.0.4 HTTP 协议和 websocket 协议对比图 ###

![9b978f4d0234aeca2f1fe48e28b12d41.png][]

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

### [\#][Link 5]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

### [\#][Link 6]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
        })

### [\#][Link 7]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 连接关闭！'))

### [\#][Link 8]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 })
        })

### [\#][Link 9]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 = ''
        }

[Link 1]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-0-1-%E4%BB%80%E4%B9%88%E6%98%AF-websocket
[Link 2]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-0-2-websocket-%E7%9B%B8%E6%AF%94%E4%BA%8E-http-%E7%9A%84%E4%BC%98%E5%8A%BF
[Link 3]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-0-3-websocket-%E4%B8%BB%E8%A6%81%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF
[Link 4]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-0-4-http-%E5%8D%8F%E8%AE%AE%E5%92%8C-websocket-%E5%8D%8F%E8%AE%AE%E5%AF%B9%E6%AF%94%E5%9B%BE
[9b978f4d0234aeca2f1fe48e28b12d41.png]: /images/20220828/d7eced2100df4765b458e817df3ad7bc.png
[Link 5]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-3-1-%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE-socket-io-client
[socket.io-client]: https://socket.io/docs/v4/client-initialization/
[Link 6]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-3-2-%E5%88%9B%E5%BB%BA%E5%92%8C%E9%94%80%E6%AF%81-socket-%E5%AE%9E%E4%BE%8B
[Link 7]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-3-3-%E7%9B%91%E5%90%AC%E8%BF%9E%E6%8E%A5%E7%9A%84%E5%BB%BA%E7%AB%8B%E5%92%8C%E5%85%B3%E9%97%AD
[Link 8]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-3-4-%E6%8E%A5%E6%94%B6%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8F%91%E9%80%81%E7%9A%84%E6%B6%88%E6%81%AF
[Link 9]: http://doc.toutiao.liulongbin.top/mds/11.chat.html#_11-3-5-%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8F%91%E9%80%81%E6%B6%88%E6%81%AF