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