网站建设文件夹结构,宁德seo公司,网站开发设计是前端吗,新渝网门户网WebSocket是一种在单个TCP连接上进行全双工通信的协议#xff0c;允许客户端和服务器之间进行双向实时通信。
所谓心跳机制#xff0c;就是在长时间不使用WebSocket连接的情况下#xff0c;通过服务器与客户端之间按照一定时间间隔进行少量数据的通信来达到确认连接稳定的手…WebSocket是一种在单个TCP连接上进行全双工通信的协议允许客户端和服务器之间进行双向实时通信。
所谓心跳机制就是在长时间不使用WebSocket连接的情况下通过服务器与客户端之间按照一定时间间隔进行少量数据的通信来达到确认连接稳定的手段。
Js提供的原生WebSocket的API较为简陋博主这里对其进行简单封装使其具有心跳机制。
一、搭建测试用本地服务器
博主使用node.js建立本地WebSocket服务器代码如下
const WebSocket require(ws);
const WebSocketServer WebSocket.Server;
const wss new WebSocketServer({ port: 3000 });
wss.on(connection, (ws) {ws.on(message, (message, err) {let dataJSON.parse(message.toString())console.log(data);if (err) {console.log(err);} else {if (data.type heartbeat) {ws.send(JSON.stringify({ type: heartbeat, data: ---HeartBeatOK--- }));} else {ws.send(JSON.stringify({ type: normal,data: Receive data.data OK }));}}});
});主要思路为客户端建立连接后进入wss.on(connection)的回调函数开启message的监听。约定消息为一个JSON字符串其中包含type和data。
type是字符串类型只有两个取值一个是heartbeat一个是normal。
type字段规定了消息体是心跳消息还是一般消息。
data是实际传输的数据。
这里数据传输遇到一点小问题JSON字符串在传输过程中被转化为buffer格式所以在接受message的时候需要调用toString方法转化为JSON字符串然后才能用JSON.parse把内容解析出来。
如果心跳消息正常接受服务器返回“---HeartBeatOK---”如果一般消息正常接受服务器返回“Receive ”(消息体)“ OK”。
二、进行WebSocket的封装
实现心跳的思路为每隔一段时间记为pingTimeOut客户端发送数据到服务器然后开始等待如果等待时间超出规定时间记为pongTimeOut就启动重连函数否则清空当前计时器。
值得注意的是重连函数中应该设置重连的时间间隔不然可能会因为多次连续重连报错。
首先建立一个参数协议
export interface OPTS {url: string;pingTimeOut?: number;pongTimeOut?: number;reconnectTimeOut?: number;
}
里面是我们可能需要修改的数值。其中url为必填是WebSocket服务器的地址reconnectTimeOut是连续重连的间隔时间。
export default class Websocket {private opts: OPTS;private ws: WebSocket;private lockReconnect: boolean false;private forbidReconnect: boolean false;private heartBeatTimer;private serverReplyTimer;constructor({url,pingTimeOut 15000,pongTimeOut 10000,reconnectTimeOut 2000,}) {this.opts {url: url,pingTimeOut: pingTimeOut,pongTimeOut: pongTimeOut,reconnectTimeOut: reconnectTimeOut,};this.createWebSocket();}
构造函数中传入我们需要的数值非必填项设置默认值将其赋给opts然后调用createWebSocket方法。这个方法会在下文实现。首先设置ws变量装载WebSocket示例对象
设置lockReconnect这个值用来控制当重连程序运行中不会再次触发重连程序。
forbidReconnect则是用来控制重连程序当我们手动调用停止WebSocket连接的时候禁止自动重连。
createWebSocket() {try {this.ws new WebSocket(this.opts.url);this.EventHandler();} catch (e) {console.log(create,e);this.reconnect();}}
这里创建了一个WebSocket实例对象传入opts参数中的url。
EventHandler() {this.ws.onerror (e) {console.log(e);this.reconnect();};this.ws.onmessage (e) {let result JSON.parse(e.data).data;console.log(result);if (result ---HeartBeatOK---) {clearTimeout(this.serverReplyTimer)}};this.ws.onopen (e) {this.startHeartBeat();};this.ws.onclose (e) {console.log(e);this.reconnect()};}
这里设置了所有当前监听ws状态变化的回调函数其中在onmessage回调函数中如果收到服务器传来的心跳确认就清除服务器回复计时器。之后的业务逻辑也可以在这里进行处理或者另外封装业务处理函数放在这里调用。
在onopen函数中开启心跳。
其余两种非正常状态输出错误信息后启动重连程序。
心跳函数细节如下 startHeartBeat() {if (this.heartBeatTimer) clearInterval(this.heartBeatTimer)console.log(start heart beat);this.ws.send(JSON.stringify({ type: heartbeat, data: -_- }));this.heartBeatTimer setInterval(() {this.ws.send(JSON.stringify({ type: heartbeat, data: -_- }));}, this.opts.pingTimeOut);}
如果创建过心跳计时器但是由于重连的原因重新开始心跳就清除原来的计时器重新创建一个心跳计时器。创建前需要立即发送一次心跳信号。计时器的时间间隔为opts中的参数。 reconnect() {clearInterval(this.heartBeatTimer)if (!this.lockReconnect !this.forbidReconnect) {this.lockReconnect true;setTimeout(() {this.createWebSocket();this.lockReconnect false;}, this.opts.reconnectTimeOut);}}
重连清除心跳计时器如果正在执行重连lockReconnect控制或者已经手动关闭连接就直接退出。
经过规定时间参数为连续重连的时间间隔后重新创建WebSocket实例对象。 close() {this.ws.close();clearInterval(this.heartBeatTimer)this.forbidReconnect true;}
手动关闭WebSocket连接的函数设置禁用自动连接。同时清除心跳计时器。 博主使用Cocos进行测试设置每次点击按钮传输0-9随机数字同时每隔3秒进行一次心跳通信。 可以看到心跳通信正常同时还可以进行数据传输。
