vue实现websocket实时短消息通知

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);
  }
}

原文地址：https://blog.csdn.net/weixin_46115723/article/details/143570093

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！