js的完整的websocket例子,包含各种事件和状态判断,以及断线后自动重连,自动接收和发送心跳数据
时间: 2024-03-21 08:38:17 浏览: 12
以下是一个完整的 JavaScript WebSocket 例子,包含各种事件和状态判断,以及断线后自动重连,自动接收和发送心跳数据:
```javascript
var ws = null; // WebSocket 对象
var timer = null; // 心跳定时器
var isReconnect = true; // 是否自动重连
// 创建 WebSocket 连接
function createWebSocket() {
if ("WebSocket" in window) {
ws = new WebSocket("wss://your.websocket.url");
// WebSocket 打开事件
ws.onopen = function() {
console.log("WebSocket 已连接");
// 开始心跳定时器
startHeartbeat();
};
// WebSocket 收到消息事件
ws.onmessage = function(evt) {
console.log("WebSocket 收到消息:" + evt.data);
};
// WebSocket 关闭事件
ws.onclose = function() {
console.log("WebSocket 已关闭");
// 停止心跳定时器
stopHeartbeat();
// 断线后自动重连
if (isReconnect) {
setTimeout(function() {
createWebSocket();
}, 1000);
}
};
} else {
console.log("该浏览器不支持 WebSocket");
}
}
// 发送消息
function sendMessage(message) {
if (ws != null && ws.readyState == WebSocket.OPEN) {
ws.send(message);
console.log("WebSocket 发送消息:" + message);
} else {
console.log("WebSocket 连接没有建立或已关闭");
}
}
// 开始心跳定时器
function startHeartbeat() {
timer = setInterval(function() {
sendMessage("heartbeat");
}, 30000);
}
// 停止心跳定时器
function stopHeartbeat() {
clearInterval(timer);
}
// 启动 WebSocket 连接
createWebSocket();
```
在上面的代码中,我们通过 `createWebSocket()` 函数创建一个 WebSocket 连接,当 WebSocket 连接成功后,会触发 `onopen` 事件,并且开始心跳定时器,定时发送心跳数据。当 WebSocket 收到消息时,会触发 `onmessage` 事件,并且打印收到的消息内容。当 WebSocket 关闭时,会触发 `onclose` 事件,并且停止心跳定时器,同时判断是否需要自动重连。在发送消息时,我们通过 `sendMessage()` 函数实现,如果 WebSocket 连接没有建立或已关闭,会打印相应的提示信息。最后,我们通过 `startHeartbeat()` 和 `stopHeartbeat()` 函数实现心跳定时器的启动和停止。