WebSocket心跳机制-Toy模板网

这篇具有很好参考价值的文章主要介绍了WebSocket心跳机制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

1、创建webSocket

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

2、websocket事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

3、WebSocket方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

WebSocket的心跳机制

问题：

（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。

（2）存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

心跳重连机制

为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包，告诉服务端自己还活着，同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复，表示websocket断开连接或者网络出现问题，就需要重连文章来源地址https://www.toymoban.com/news/detail-606603.html

const socket = new WebSocket('ws://localhost:8080'); // WebSocket 建立连接
const heartCheck = initHeartCheck()；// 初始化心跳检测对象

// WebSocket建立连接成功
socket.addEventListener('open', function (event) {
　　heartCheck.start();// 启动心跳检测
　　socket.send('Hello Server!');
});
// WebSocket接受到服务端消息
socket.addEventListener('message',function(event){
  heartCheck.start();// 启动心跳检测
})
// WebSocket 连接被关闭
socket.addEventListener('close',function(event){
  heartCheck.reset();// 启动心跳检测
})
// WebSocket 连接因错误而关闭
socket.addEventListener('error',function(event){
  heartCheck.reset();// 启动心跳检测
})

function initHeartCheck() {
        return {
            timeout: 2 * 1000, // 每2s向服务端发送一次消息
            serverTimeout: 10 * 1000, // 10s收不到服务端消息算超时
            timer: null,
            serverTimer: null,
            reset() { // 心跳检测重置
                clearTimeout(this.timer);
                clearTimeout(this.serverTimer);
                this.timer = null;
                this.serverTimer = null;
                return this;
            },
            start() { // 心跳检测启动
                this.reset();
                this.timer = setTimeout(() => { 
                    socket.send('ping'); // 定时向服务端发送消息
                    if (!this.serverTimer) {
                        this.serverTimer = setTimeout(() => {
                            // 关闭连接触发重连
                           console.log(new Date().toLocaleString(), "not received pong, close the websocket");
                          socket.close(); //关闭websocket或根据业务需求去重连 
                        }, this.serverTimeout);
                    }
                }, this.timeout);
            },
        }
    }

到了这里，关于WebSocket心跳机制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！