一、前言二、效果三、代码
一、前言
前端调用的服务端地址：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心跳检测和重连机制》对你有帮助，请点赞、收藏，并留下你的观点哦！
