WebSocket在koa+vue项目中的应用

---

前言

本文将包含WebSocket原理，WebSocket在项目中的使用，如何用WebSocket实现及时消息沟通三大块内容。

---

webSocket

早期，很多网站为了实现推送技术，所用的技术都是轮询（也叫短轮询）。轮询是指由浏览器每隔一段时间向服务器发出HTTP 请求，然后服务器返回最新的数据给客户端。无法由服务端主动发送数据。
而WebSocket是一种可在单个TCP连接上进行全双工通信的网络传输协议。它允许服务端主动向客户端推送数据，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，并进行双向数据传输。
WebSocket具有较少的控制开销，更强的实时性，且保持连接状态。
常用的事件

• close：当一个 WebSocket 连接被关闭时触发，也可以通过 onclose 属性来设置；
• error：当一个 WebSocket 连接因错误而关闭时触发，也可以通过 onerror 属性来设置；
• message：当通过 WebSocket 收到数据时触发，也可以通过 onmessage 属性来设置；
• open：当一个 WebSocket 连接成功时触发，也可以通过 onopen 属性来设置。

更详细的介绍请参照：https://cloud.tencent.com/developer/article/1887095

在前后端分离项目中的使用

此部分通过一个消息通知案例来介绍WebSocket API 在项目中的常规使用方式。并添加了客户端连接管理，让消息有针对性的发送给特定用户。

后端koa

1. 安装包ws

npm i ws

2. 创建WebSocket实例，全局创建一个

export function createWebSocket() {
  // 重新开一个端口进行服务监听
  const wss = new websocketServer({ port: 3002 })

  wss.on('connection', function (ws: any) {
    console.log('有客户已连接');

    ws.on('message', function (message: any) {
      // 当客户端与服务端建立连接后，会发送身份信息，将其作为key保存相应连接数据
      clients[message.toString()] = ws
    })

    ws.on('close', function (ws: any) {
      for (let obj in clients) {
        if (clients[obj] === ws) {
          // 断开连接时，移除相应连接数据
          delete clients[obj]
          console.log('closed', obj);
        }
      }
    })
  })
}

在index文件中调用此方法，服务端开启WebSocket连接请求。

前端vue

export let ws: any
// WebSocket实例创建
export function createWebsocket() {
  // 实例化
  ws = new WebSocket("ws://localhost:3002");

  // 连接函数
  ws.onopen = function (event: any) {
    console.log("Connection open ...", event);
  };
  // 信息接受函数
  ws.onmessage = function (evt: any) {
    ElMessage({
      message: evt.data,
      type: 'success',
      icon: ChatDotSquare
    });
  };

  ws.onclose = function () {
    console.log("Connection closed.");
  };
}

• 前端向后端发起WebSocket连接请求
• 在main.js文件中调用此方法，此后任何操作都在此方法暴露出的ws实例上操作，保证一个客户端只用一个连接。
• 在重置之前，需要关闭上一个连接

ws.close() // 关闭连接