持久链接方式
- HTTP轮询
- HTTP流式传输
- HTTP2
- 服务器发送事件
-
WebSocket断线重连
心跳机制:websocket 一分钟没有任何信息传入就自动断线,需要心跳机制每隔10秒对其发送信息
- 服务器错误重连机制:其他可能导致socke端口的情况需要断线重连机制,在onerror时重新建立一个新的websocket ```typescript import { message } from ‘ant-design-vue’; import { onBeforeUnmount } from ‘vue’;
// let limitConnect = 3; // 断线重连次数 let timeConnect = 0; let lockReconnect = false;
/**
- 初始化 websocket
- @param {string} url 字符串
@param {(data) => any} func */ export const webSocketInit = (url, func) => { if (typeof WebSocket != ‘function’) { message.error(‘浏览器不支持WebSocket’, 2); } else { const ws = new WebSocket(url); ws.onopen = function () { console.log(‘WebSocket Connection open …’); ws.send(‘ping’); };
ws.onmessage = function (evt) { const msg = window.atob(JSON.parse(evt.data).msg); console.log(‘获得数据’, evt.timeStamp); if (msg) {
func(msg);
} };
ws.onclose = function () { console.log(‘服务器已经断开’); reconnect(); };
ws.onerror = function () { console.log(‘服务器错误’); reconnect(); };
// 重连 function reconnect() { // if (limitConnect > 0) { // lockReconnect加锁,防止onclose、onerror两次重连 if (!lockReconnect) {
lockReconnect = true;
// limitConnect--;
timeConnect++;
console.log('第' + timeConnect + '次重连');
// 进行重连
setTimeout(function () {
webSocketInit(url, func);
lockReconnect = false;
}, 5000);
} // } else { // console.log(‘TCP连接已超时’); // } }
// 心跳 * 回应 const timer = setInterval(function () { ws.send(
JSON.stringify({
from: 'xxxx',
msg: 'ping',
type: 'ping',
}),
); }, 1000 * 10);
onBeforeUnmount(() => { ws.close(); clearInterval(timer); }); } }; ```
参考
【1】WebSocket:5分钟从入门到精通-掘金
【2】WebSocket 教程@阮一峰
【3】WebSocket MDN
【4】WebSocket 是什么原理?为什么可以实现持久连接?