7天精通网站建设实录自建站
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断开连接或者网络出现问题，就需要重连
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);},}}