持久链接方式

HTTP轮询
HTTP流式传输
HTTP2
服务器发送事件
WebSocket

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 是什么原理？为什么可以实现持久连接？

WebSocket

持久链接方式

WebSocket断线重连

参考