实现场景

  该需求是运用websocket进行网页之间通讯，同时保证websocket在通讯期间保持激活的状态。

功能分析

   1、在websocket报错时，重新苏醒。

   2、在websocket自动关闭时，重新连接。

   3、在通讯期间，整个websocket能接受消息，并通过不同的消息，进行加载不同的数据和交互

   4、websocket实例化时，主动加入房间。

代码实施

const initWebSocket = () => {try {if ('WebSocket' in window) {ws.value = new WebSocket(serveUrl + '/ws')heartForm.value.time = 1modelData.value.lockReconnect = truemodelData.value.isAlive = false//建立连接时，钩子函数，当连接状态正常时，会执行钩子函数ws.value.onopen = onOpen
//绑定 收到websocket返回的消息钩子函数ws.value.onmessage = onMessage
//报错后，重新连接ws.value.onerror = function (e) {initWebSocket()}
//关闭后，直接重新连接ws.value.onclose = function (e) {initWebSocket()}} else {alert('当前浏览器 Not support websocket')}} catch (e) {reconnect()}
}const reconnect = () => {if (modelData.value.lockReconnect) return;modelData.value.lockReconnect = true;setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多initWebSocket()modelData.value.lockReconnect = false;}, 2000);
}
//打开状态
const onOpen = (e) => {}
}
//接受信息
const onMessage = (e) => {}

  

遇到的问题

        1、websocket每次实例化时，都要将onerror,onmessage,onclose，onopen 重新实例化。

        2、onmessage获取到的是所有的数据，需要对传送过来的信息进行过滤

        3、websockt在使用一段时间后，长时间未使用，有可能断开连接，需要重新连接。

总结分享

        1、这里后端未做心跳检测，就直接前端以定时器轮询的方式，不断进行连接，知道websocket重新连接上位置；

        2、主要的接受到消息的逻辑都是在onmessage里面，里面的逻辑比较复杂，需要根据实际的场景进行设定。

        3、onopen在在正式连接成功之后，会执行的方法。需要加入房间的操作，可以放入这里面。