websocket的⼼跳机制及demo实现
1.描述：
1.WebSocket 是HTML5开始提供的⼀种在单个TCP连接上进⾏全双⼯通讯的协议。
2.WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API中，浏览器和服务器只需要完成⼀次握⼿，两者之间就直接可以创建持久性的连接，并进⾏双向数据传输。
2.websocket与http的区别：
当获取 Web Socket 连接后，可以通过send()⽅法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
3.websocket的属性：
4.websocket的事件：
5.websocket的⽅法：
6.demo实现：
步骤：
1. 新建⼀个⽂件夹，进⼊⽂件夹，npm init初始化，初始化完后才能之后，会出现⼀个package.json⽂件，
2. 安装依赖npm install
3. 书写代码：
服务端：
const WebSocket =require('ws');
// 引⽤Server类:
const WebSocketServer = WebSocket.Server;
// 实例化:
const wss =new WebSocketServer({
port:8080
});
<('connection',function(ws){
console.log(`[SERVER] connection()`);
<('message',function(message){
console.log(`[SERVER] Received: ${message}`);//打印客户端传给服务端的数据
ws.send(`ECHO: ${message}`,(err)=>{
if(err){
console.log(`[SERVER] error: ${err}`);
}
});
})
});
客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="bn">click</button>
</body>
<script>
//打开⼀个webscoket
var message ={
nickname:"huahua",
email:"huahua@qq",
websocket和socket
content:"I love programming"
};
var lockReconnect =false;//避免重复连接
var wsUrl ='ws://localhost:8080';
var ws;
var tt;
function createWebSocket(){
try{
ws =new WebSocket(wsUrl);
console.log('娃哈哈======I ',ws);
init();
}catch(e){
console.log('catch');
reconnect(wsUrl);
}
}
function init(){
// 建⽴ web socket 连接成功触发事件
alert('打开连接。。。。')
console.log('ws的连接',ws.readyState)
ws.send(JSON.stringify(message));//可以给后台发送参数
/
/⼼跳检测重置
heartCheck.start();
};
//接收到消息的回调⽅法，接收的数据
alert('接收的数据'+event.data)
console.log('ws的连接',ws.readyState)
console.log(event);//后台传回的数据，后台不间断发送数据，持续接收。                console.log(event.data);
heartCheck.start();
}
//点击按钮后关闭websocket
var ElementById('bn')
bn.addEventListener('click',clickHandler);
function clickHandler(e){
ws.close()//关闭webscoket
}
//断开 web socket 连接成功触发事件
console.log('ws的连接',ws.readyState)
alert("连接已关闭...");
reconnect(wsUrl);
};
/
/监听并处理error事件
console.log(error);
reconnect(wsUrl);
};
}
function reconnect(url){
if(lockReconnect){
return;
};
lockReconnect =true;
/
/没连接上会⼀直重连，设置延迟避免请求过多
tt &&clearTimeout(tt);
tt =setTimeout(function(){
createWebSocket(url);
lockReconnect =false;
},4000);
}
//⼼跳检测
var heartCheck ={
timeout:3000,
timeoutObj:null,
serverTimeoutObj:null,
start:function(){
console.log('start');
var self =this;
this.timeoutObj &&clearTimeout(this.timeoutObj);
this.serverTimeoutObj &&clearTimeout(this.serverTimeoutObj);
this.timeoutObj =setTimeout(function(){
//这⾥发送⼀个⼼跳，后端收到后，返回⼀个⼼跳消息，
console.log('我还在呢');
ws.send(JSON.stringify(message));//可以给后台发送参数
self.serverTimeoutObj =setTimeout(function(){
console.log(ws);
ws.close();
}, self.timeout);
},this.timeout)
}
}
createWebSocket(wsUrl);
</script>
</html>
注：
此demo的实现，需要将server.js运⾏起来，可以使⽤idea等⼯具
运⾏截图：
7.⼼跳机制：
⼼跳机制是每隔⼀段时间会向服务器发送⼀个数据包，告诉服务器⾃⼰还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传⼀个数据包给客户端来确定服务器端也还活着，否则的话，有可能是⽹络断开连接了。需要重连~
即：上述客户端代码中的heartCheck