61+.webSocket封装

WebSocket

1.什么是WebSocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范，WebSocket API也被W3C定为标准。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

2.为什么要使用WebSocket？

HTTP 协议是一种无状态的、无连接的、单向的应用层协议，它采用了请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答处理。

在前端开发方面，当我们想要了解我们处理的某个事件的状态时，需要由服务端来告诉我们这件事情处理得怎么样了，如果采用HTTP请求的方式，需要进行轮询的请求方式才可以得到我们想要的结果，这种方式效率低，浪费资源，也不具备实时性，因为轮询的时间也不好确定。

而Websocket可以在客户端和服务端之间建立长连接，任意一方都可以互相发送和接收消息，比采用轮询的方式方便多了。

3.在vue3开发中的应用

开源工具库VueUse提供的useWebSocket钩子函数，具体使用方式可参考useWebSocket，这里就不作详细介绍了。

由于最近在了解node如何搭建WebSocket服务端，为了更方便测试，前端方面也在尝试对WebSocket客户端进行封装，下方为封装的ws.ts的代码。

// ws.ts
import { ref } from 'vue'

/** WebSocket */
export class Ws {
    /** ws */
    private ws: WebSocket | null
    /** 连接状态 */
    public socketStatus: boolean
    /** 消息内容 */
    public message: any

    constructor() {
        this.ws = null
        this.socketStatus = false
        this.message = ref()
    }

    /** 建立连接 */
    connect(url: string) {
        this.ws = new WebSocket(url)
        this.ws.onopen = this.onopen.bind(this)
        this.ws.onmessage = this.onmessage.bind(this)
        this.ws.onclose = this.onclose.bind(this)
        this.ws.onerror = this.onerror.bind(this)
    }

    /** 连接成功 */
    onopen() {
        this.socketStatus = true
        console.log('websocket连接成功', this.ws)
    }

    /** 接收消息 */
    onmessage(e: { data: string }) {
        this.message.value = JSON.parse(e.data)
        console.log('接收消息', JSON.parse(e.data))
    }

    /** 连接关闭 */
    onclose() {
        this.socketStatus = false
        console.log('websocket连接关闭')
    }

    /** 连接失败 */
    onerror(e: any) {
        this.socketStatus = false
        console.log('websocket连接失败', e);
    }

    /** 发送消息 */
    send(message: any) {
        if (this.ws && this.socketStatus) {
            this.ws.send(JSON.stringify(message))
            console.log('发送消息', message)
        }
    }
}

如上方代码所见，我们定义了一个Ws类，其包含了ws、socketStatus和message等3个属性，ws是WebSocket的实例化对象；socketStatus是ws连接状态，类型为boolean，可用于判断ws连接是否成功；

message是所接收到的服务端发来的消息，可根据消息内容的事件（event）不同来执行不同的操作。

Ws类包含了connect、onopen、onmessage、onclose、onerror和send等6个方法

• connect用于创建ws连接，需要传入一个url参数，即服务端的建立的ws链接

• onopen是在建立连接成功后执行的，在此我们将socketStatus的值更改为true

• onmessage负责接收消息，在此我们将message更改为服务端发送来的消息

• onclose是连接关闭时执行的，在此我们将socketStatus的值更改为false

• onerror是连接失败时执行的，在此我们将socketStatus的值更改为false

• send用于给服务端发送消息，只有当socketStatus为true时才会执行。

在vue3项目开发中，我们一般会将建立一个挂载在vue全局的ws连接，并通过发送和接收的消息内容的事件（event）的不同来执行不同的操作。

在vue3项目的main.ts中引入ws.ts文件，并建立连接和发送消息。

引入ws并建立连接

// 实例化ws
const ws = new Ws()
// 将ws挂载到vue全局
app.config.globalProperties.$ws = ws
// 创建连接
ws.connect('ws://localhost:17030')
// 判断是否连接成功，如成功则发送消息
let timerID = setInterval(() => {
  if (ws.socketStatus) {
    console.log('ws已连接成功');
    ws.send({
      event: 'hello',
      data: '服务端你好'
    })
    clearTimeout(timerID)
    return
  }
  console.log('ws正在连接中...');
}, 500)

在具体某个业务的vue文件中，我们可以通过watch来监听接收到的消息。

当接收到服务端发送的消息时，可根据消息的事件（event）来处理对应的业务。

在vue文件中监听消息变化

import {  getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
watch(() => proxy.$ws.message, (message) => {
    console.log('当前页面接收到消息', message.value);
    if(message.value.event === 'handle') {
        console.log('当事件为handle时，这里处理hanldle对应的业务');
    }
},
    { deep: true }
)