实现场景
该需求是运用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 = 1
modelData.value.lockReconnect = true
modelData.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在在正式连接成功之后，会执行的方法。需要加入房间的操作，可以放入这里面。