一、前言二、效果三、代码
一、前言
前端调用的服务端地址:ws://
,网站地址为用 js 写的 WebSocketHeartBeat,心跳检测前端调用websocket的3种不同写法,只是 3 种 [ 写法 ],不是 3 种 [ 方法 ]
WebSocket心跳检测和重连机制二、效果
正常连接,每6秒给服务端发送一个心跳消息
连接异常(比如:把服务端地址ws://
改成ws://1
),每10秒尝试重新连接
三、代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="output"></div></body><script>//获取存放内容的节点var output = document.getElementById("output");//打印提示内容var print = function(message) {var d = document.createElement("div");d.innerHTML = message;output.appendChild(d)};var ws;//websocket实例var lockReconnect = false;//避免重复连接var wsUrl = "ws://"; //websocket服务器连接地址;网站地址:/echo.html//创建一个websocket实例,创建失败重新连接function createWebSocket(url) {try {ws = new WebSocket(url);initWebSocket();} catch (e) {reconnect(url);}}//实例化websocket的相关操作function initWebSocket() {ws.onmessage = function (event) {try{print("响应:" + event.data)} catch (e) {console.log('catch - error evt:' + event.data + ' parse json error !!!' + e);}};ws.onopen = function (event) {print("打开")//保持连接:每6秒发送一个消息(这里为了演示设置成6秒,实际使用过程中可设置成60秒)setInterval(function () {ws.send('发送心跳消息'); // ws:// 可用于测试,发送什么到服务器,(服务器)就会响应什么给客户端。}, 6000);};ws.onclose = function (event) {print("关闭")reconnect(wsUrl);};ws.onerror = function (event) {print("错误:" + event.data)reconnect(wsUrl);};}//重连操作function reconnect(url) {if(lockReconnect) {return;}lockReconnect = true;//没连接上会一直重连,设置延迟避免请求过多setTimeout(function () {createWebSocket(url);lockReconnect = false;}, 10000); //10秒后重连}//入口方法createWebSocket(wsUrl);</script></html>
如果觉得《WebSocket心跳检测和重连机制》对你有帮助,请点赞、收藏,并留下你的观点哦!