一、前言
- 前端调用的服务端地址：
ws://echo.websocket.org，网站地址为websocket.org - 用 js 写的 WebSocketHeartBeat，心跳检测
- 前端调用websocket的3种不同写法，
只是 3 种 [ 写法 ]，不是 3 种 [ 方法 ] - WebSocket心跳检测和重连机制
二、效果
正常连接，每6秒给服务端发送一个心跳消息
连接异常（比如：把服务端地址ws://echo.websocket.org改成ws://echo.websocket.org1），每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://echo.websocket.org"; //websocket服务器连接地址；网站地址：http://www.websocket.org/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://echo.websocket.org 可用于测试，发送什么到服务器，（服务器）就会响应什么给客户端。
}, 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>