WebSocket

使得客户端和服务器之间的数据交换变得更加简单#xff0c;允许服务端主动向客户端推送数据。

1、创建webSocket

sock…WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术属于应用层协议。

WebSocket

使得客户端和服务器之间的数据交换变得更加简单允许服务端主动向客户端推送数据。

1、创建webSocket

WebSocket(ws://localhost:8080);

2、websocket事件

事件事件处理程序描述openSocket.onopen连接建立时触发messageSocket.onmessage客户端接收服务端数据时触发errorSocket.onerror通信发生错误时触发closeSocket.onclose

连接关闭时触发

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

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

2存在网络忽然断开的情况这时服务器端并没有触发onclose的事件。

服务器会继续向客户端发送多余的信息这些数据会丢失。

心跳重连机制

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

因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包告诉服务端自己还活着同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。

如果客户端没有收到回复表示websocket断开连接或者网络出现问题就需要重连

const

WebSocket(ws://localhost:8080);

WebSocket

socket.addEventListener(message,function(event){heartCheck.start();//

启动心跳检测

socket.addEventListener(close,function(event){heartCheck.reset();//

启动心跳检测

socket.addEventListener(error,function(event){heartCheck.reset();//

启动心跳检测

心跳检测重置clearTimeout(this.timer);clearTimeout(this.serverTimer);this.timer

null;return