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