当前位置：首页 > article >正文

vue实现websocket实时短消息通知

article 2024/12/25 2:38:43

1、原理

websocket就是通过服务器向客户端推送消息，客户端也可以主动向服务器发送消息，是真正的双向平等对话，是一种长连接，只需要通过一次请求进行初始化。

2、事件

onopen: 客户端和服务器建立连接后触发，被称为客户端和服务器之间的初始握手。如果接收到open, 说明已经连接成功，可以进行通信了。
onmessage：接收到消息时触发。服务器发送给客户端的消息可包括纯文本消息，二进制数据（Blob消息或者ArrayBuffer消息）。
onerror：响应意外故障时触发，在错误之后总是会终止连接。
onclose：连接关闭时触发。一旦连接关闭后，客户端和服务端将不会再进行消息的收发。也可主动调用close()方法关闭连接

3、方法

send() : 在连接成功后关闭前，发送消息（onopen后和onclose前才可发送消息）
- 参数：
  data: 要发送的数据，可以是字符串、二进制数据或者 Blob 对象。
close() : 关闭连接
- 参数：
  code (可选): 一个数字，表示连接关闭的状态码。常见的状态码有 1000 表示正常关闭，1001 表示端点离开，等等。
  reason (可选): 一个字符串，表示连接关闭的原因。

4、实际应用

一般在登录后系统初始化的时候建立连接，使用vue的全局路由导航守卫可轻松实现

/**
 * 创建websocket连接
 * @param {{}} data 请求数据
 * @returns {Object}
 **/
export function connectSocket(data = {}) {
  // 连接错误error仅可重启3次
  let reloadTime = 3, timer;
  webSocketInit();

  function webSocketInit() {
    // 本次sess存储webSocket连结状态，在异常/关闭连结时，重新心跳起来
    window.sessionStorage.setItem('connSocket', '1')
    if (window.webSocket) window.webSocket.close();
    // 测试地址不可用替换为自己的地址ws或wss开头
    const ws = window.webSocket = new WebSocket('ws://124.222.224.186:8800');
    ws.onopen = () => {
      // window.sessionStorage.setItem('onopen', new Date().getTime());
      // 调用订阅消息的接口
      ws.send(JSON.stringify(data));
    };
    // 连接关闭
    ws.onclose = () => {
      // window.sessionStorage.setItem('onclose', new Date().getTime());
      window.sessionStorage.setItem('connSocket', '0')
      reconnect('close');
    };
    // 接收服务器推送消息
    ws.onmessage = (res) => {
      const messData = JSON.parse(res.data)
      ElNotification.info({
        title: '消息通知',
        message: messData.data ? JSON.parse(messData.data).message : ''
      });
    };
    // 连接发生错误时
    ws.onerror = () => {
      // window.sessionStorage.setItem('onerror', new Date().getTime());
      window.sessionStorage.setItem('connSocket', '0')
      reconnect('error');
    }
  }

  // 重连
  function reconnect(mode) {
    window.clearTimeout(timer);
    // 连接错误仅可重启3次
    if (mode === 'error' && reloadTime <= 0) return false;
    // connSocket为0时才可重启
    if (window.sessionStorage.getItem('connSocket') === '1') return false;
    timer = setTimeout(function () {
      reloadTime--;
      webSocketInit();
    }, 2000);
  }
}