WebSocket使用及优化（心跳机制与断线重连）
WebSocket在2008年被提出，其通信协议于2011被制定为标准
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接
然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。
于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。
之前我也写过相关的文章：Socket聊天室，使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天，但是用到的模块都是socket.io，而且没有深入优化，在平时工作上真正用到时发现事情并不简单。有时前端或者后端会断线而对方不知道，像弱网或者后端服务器重启时，前端并不能保证一直连接
所以这篇文章，我们就来使用websocket做一个简单的demo，并且加上心跳和断线重连功能
首先是服务端，采用node+ws模块搭建websocket服务，在server文件夹下新建server.js，并在npm初始化后，下载ws模块
npm init -y
npm i ws
引入ws模块，并搭建一个简单的websocket服务
const WebSocket = require('ws');
const port = 1024//端口
const pathname = '/ws/'//访问路径
new WebSocket.Server({port}, function () {
console.log('websocket服务开启')
}).on('connection', connectHandler)
function connectHandler (ws) {
console.log('客户端连接')
ws.on('error', errorHandler)
ws.on('close', closeHandler)
ws.on('message', messageHandler)
}
function messageHandler (e) {
console.info('接收客户端消息')
this.send(e)
}
function errorHandler (e) {
console.info('客户端出错')
}
function closeHandler (e) {
console.info('客户端已断开')
}前端部分也搭建个ws访问客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title</title>
</head>
<body>
<script type="module">
const name = 'test'//连接用户名
let wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name
const ws = new WebSocket(wsUrl)
ws.onopen = function (e) {
console.log('开启')
ws.send(JSON.stringify({
ModeCode: "message",
msg: 'hello'
}))
}//连接上时回调
ws.onclose = function (e) {
console.log('关闭')
}//断开连接时回调
ws.onmessage = function (e) {
let data = JSON.parse(e.data)
console.log('收到消息' + data.msg)
ws.close()
}//收到服务端消息
ws.onerror = function (e) {
console.log('出错')
}//连接出错
</script>
</body>
</html>前端打印结果：
服务端打印结果：
有以上效果说明一个最简单的ws连接就实现了，下面，我们优化一下，为了降低耦合，我们先引入eventBus发布订阅，然后新建一个websocket类继承自原生WebSocket，因为，我们要在里面做心跳和重连
在服务端，我们先把server完善一下，通过http的upgrade过滤验证ws连接
在原有的服务端增加http服务并做好路径验证
const http = require('http');
const server = http.createServer()
server.on("upgrade", (req, socket, head) => {//通过http.server过滤数据
let url = new URL(req.url, `http://${req.headers.host}`)
let name = url.searchParams.get('name')//获取连接标识
if(!checkUrl(url.pathname, pathname)) {//未按标准
socket.write('未按照标准访问');
socket.destroy();
return;
}
})
server.listen(port, () => {
console.log('服务开启')
})
//验证url标准
function checkUrl (url, key) {//判断url是否包含key
return - ~ url.indexOf(key)
}完成httpServer后，我们再完善一下websocket服务，将每一个连接的用户都通过代理保存并实现增删，得到以下完整的服务端
const http = require('http');
const WebSocket = require('ws');
const port = 1024//端口
const pathname = '/ws/'//访问路径
const server = http.createServer()
class WebSocketServer extends WebSocket.Server {
constructor () {
super(...arguments);
this.webSocketClient = {}//存放已连接的客户端
}
set ws (val) {//代理当前的ws，赋值时将其初始化
this._ws = val
val.t = this;
val.on('error', this.errorHandler)
val.on('close', this.closeHandler)
val.on('message', this.messageHandler)
}
get ws () {
return this._ws
}
messageHandler (e) {
console.info('接收客户端消息')
let data = JSON.parse(e)
switch(data.ModeCode) {
case 'message':
console.log('收到消息' + data.msg)
this.send(e)
break;
case 'heart_beat':
console.log(`收到${this.name}心跳${data.msg}`)
this.send(e)
break;
}
}
errorHandler (e) {
this.t.removeClient(this)
console.info('客户端出错')
}
closeHandler (e) {
this.t.removeClient(this)
console.info('客户端已断开')
}
addClient (item) {//设备上线时添加到客户端列表
if(this.webSocketClient[item['name']]) {
console.log(item['name'] + '客户端已存在')
this.webSocketClient[item['name']].close()
}
console.log(item['name'] + '客户端已添加')
this.webSocketClient[item['name']] = item
}
removeClient (item) {//设备断线时从客户端列表删除
if(!this.webSocketClient[item['name']]) {
console.log(item['name'] + '客户端不存在')
return;
}
console.log(item['name'] + '客户端已移除')
this.webSocketClient[item['name']] = null
}
}
const webSocketServer = new WebSocketServer({noServer: true})
server.on("upgrade", (req, socket, head) => {//通过http.server过滤数据
let url = new URL(req.url, `http://${req.headers.host}`)
let name = url.searchParams.get('name')//获取连接标识
if(!checkUrl(url.pathname, pathname)) {//未按标准
socket.write('未按照标准访问');
socket.destroy();
return;
}
webSocketServer.handleUpgrade(req, socket, head, function (ws) {
ws.name = name//添加索引，方便在客户端列表查询某个socket连接
webSocketServer.addClient(ws);
webSocketServer.ws = ws
});
})
server.listen(port, () => {
console.log('服务开启')
})
//验证url标准
function checkUrl (url, key) {//判断url是否包含key
return - ~ url.indexOf(key)
}当连接断开时，只有客户端主动访问服务端才能实现重连，所以客户端的功能要比服务端更多一些，我们把客户端的websocket完善优化一下，添加一些简单的控制功能（连接，发消息，断开）的按钮，这里有一点需要注意：在下次连接之前一定要先关闭当前连接，否则会导致多个客户端同时连接，消耗性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title</title>
</head>
<body>
<button id="connect">
连接
</button>
<button disabled
id="sendMessage">
发送
</button>
<button disabled
id="destroy">
关闭
</button>
<script type="module">
const name = 'test'//连接用户名
let connect = document.querySelector('#connect'),//连接按钮
sendMessage = document.querySelector('#sendMessage'),//发送按钮
destroy = document.querySelector('#destroy'),//关闭按钮
wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name,//连接地址
ws;
connect.addEventListener('click', connectWebSocket)
sendMessage.addEventListener('click', function (e) {
ws.send(JSON.stringify({
ModeCode: "message",
msg: 'hello'
}))
})
destroy.addEventListener('click', function (e) {
ws.close()
ws = null
})
function connectWebSocket () {
if(!ws) {//第一次执行，初始化或ws断开时可执行
ws = new WebSocket(wsUrl)
initWebSocket()
}
}
function initWebSocket () {
ws.onopen = function (e) {
setButtonState('open')
console.log('开启')
}//连接上时回调
ws.onclose = function (e) {
setButtonState('close')
console.log('关闭')
}//断开连接时回调
ws.onmessage = function (e) {
let data = JSON.parse(e.data)
console.log('收到消息' + data.msg)
}//收到服务端消息
ws.onerror = function (e) {
setButtonState('close')
console.log('出错')
}//连接出错
}
/*
* 设置按钮是否可点击
* @param state：open表示开启状态，close表示关闭状态
*/
function setButtonState (state) {
switch(state) {
case 'open':
connect.disabled = true
sendMessage.disabled = false
destroy.disabled = false
break;
case 'close':
connect.disabled = false
sendMessage.disabled = true
destroy.disabled = true
break;
}
}
</script>
</body>
</html>效果如下：
到了这一步，我们websocket的demo已经可以手动运行，在此基础上，我们将其封装一下，并且通过eventBus对外进行通信就可以用了，具体流程将与接下来的心跳一起实现
websocket心跳机制：顾名思义，就是客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期
心跳的实现也很简单，只需在第一次连接时用回调函数做延时处理，此时还需要设置一个心跳超时时间，若某时间段内客户端发送了消息，而服务端未返回，则认定为断线。下面，我就来实现一下心跳
//this.heartBeat ---> time：心跳时间间隔 timeout：心跳超时间隔
/*
* 心跳初始函数
* @param time：心跳时间间隔
*/
function startHeartBeat (time) {
setTimeout(() => {
this.sendMsg({
ModeCode: ModeCode.HEART_BEAT,
msg: new Date()
})
this.waitingServer()
}, time)
}
//延时等待服务端响应，通过webSocketState判断是否连线成功
function waitingServer () {
this.webSocketState = false//在线状态
setTimeout(() => {
if(this.webSocketState) {
this.startHeartBeat(this.heartBeat.time)
return
}
console.log('心跳无响应，已断线')
this.close()
//重连操作
}, this.heartBeat.timeout)
}心跳实现完成后，只需要在ws.onopen中调用即可，效果如下：
然后是重连部分，其实只需要新建一个延时回调，与心跳相似，只不过它是在连接失败时使用的，这里就不多做说明。以下是完整版的代码：
websocket部分：
import eventBus
from "./eventBus.js"
const ModeCode = {//websocket消息类型
MSG: 'message',//普通消息
HEART_BEAT: 'heart_beat'//心跳
}
export default class MyWebSocket extends WebSocket {
constructor (url, protocols) {
super(url, protocols);
return this
}
/*
* 入口函数
* @param heartBeatConfig time：心跳时间间隔 timeout：心跳超时间隔 reconnect：断线重连时间间隔
* @param isReconnect 是否断线重连
*/
init (heartBeatConfig, isReconnect) {
this.onopen = this.openHandler//连接上时回调
this.onclose = this.closeHandler//断开连接时回调
this.onmessage = this.messageHandler//收到服务端消息
this.onerror = this.errorHandler//连接出错
this.heartBeat = heartBeatConfig
this.isReconnect = isReconnect
this.reconnectTimer = null//断线重连时间器
this.webSocketState = false//socket状态 true为已连接
}
openHandler () {
eventBus.emitEvent('changeBtnState', 'open')//触发事件改变按钮样式
this.webSocketState = true//socket状态设置为连接，做为后面的断线重连的拦截器
this.heartBeat && this.heartBeat.time ? this.startHeartBeat(this.heartBeat.time) : ""//是否启动心跳机制
console.log('开启')
}
messageHandler (e) {
let data = this.getMsg(e)
switch(data.ModeCode) {
case ModeCode.MSG://普通消息
console.log('收到消息' + data.msg)
break;
case ModeCode.HEART_BEAT://心跳
this.webSocketState = true
console.log('收到心跳响应' + data.msg)
break;
}
}
closeHandler () {//socket关闭
eventBus.emitEvent('changeBtnState', 'close')//触发事件改变按钮样式
this.webSocketState = false//socket状态设置为断线
console.log('关闭')
}
errorHandler () {//socket出错
eventBus.emitEvent('changeBtnState', 'close')//触发事件改变按钮样式
this.webSocketState = false//socket状态设置为断线
this.reconnectWebSocket()//重连
console.log('出错')
}
sendMsg (obj) {
this.send(JSON.stringify(obj))
}
getMsg (e) {
return JSON.parse(e.data)
}
/*
* 心跳初始函数
* @param time：心跳时间间隔
*/
startHeartBeat (time) {
setTimeout(() => {
this.sendMsg({
ModeCode: ModeCode.HEART_BEAT,
msg: new Date()
})
this.waitingServer()
}, time)
}
//延时等待服务端响应，通过webSocketState判断是否连线成功
waitingServer () {
this.webSocketState = false
setTimeout(() => {
if(this.webSocketState) {
this.startHeartBeat(this.heartBeat.time)
return
}
console.log('心跳无响应，已断线')
try {
this.close()
} catch(e) {
console.log('连接已关闭，无需关闭')
}
this.reconnectWebSocket()
}, this.heartBeat.timeout)
}
//重连操作
reconnectWebSocket () {
if(!this.isReconnect) {
return;
}
this.reconnectTimer = setTimeout(() => {
eventBus.emitEvent('reconnect')
}, this.heartBeat.reconnect)
}
}index.html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title</title>
</head>
<body>
<button id="connect">
连接
</button>
<button disabled
id="sendMessage">
发送
</button>
<button disabled
id="destroy">
关闭
</button>
<script type="module">
import eventBus
from "./js/eventBus.js"
import MyWebSocket
from './js/webSocket.js'
const name = 'test'//连接用户名
let connect = document.querySelector('#connect')
let sendMessage = document.querySelector('#sendMessage')
let destroy = document.querySelector('#destroy')
let myWebSocket,
wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name
eventBus.onEvent('changeBtnState', setButtonState)//设置按钮样式
eventBus.onEvent('reconnect', reconnectWebSocket)//接收重连消息
connect.addEventListener('click', reconnectWebSocket)
sendMessage.addEventListener('click', function (e) {
myWebSocket.sendMsg({
ModeCode: "message",
msg: 'hello'
})
})
destroy.addEventListener('click', function (e) {
myWebSocket.close()
})
function reconnectWebSocket () {
if(!myWebSocket) {//第一次执行，初始化
connectWebSocket()
}
if(myWebSocket && myWebSocket.reconnectTimer) {//防止多个websocket同时执行
clearTimeout(myWebSocket.reconnectTimer)
myWebSocket.reconnectTimer = null
connectWebSocket()
}
}
function connectWebSocket () {
myWebSocket = new MyWebSocket(wsUrl);
myWebSocket.init({//time：心跳时间间隔 timeout：心跳超时间隔 reconnect：断线重连时
time: 30 * 1000,
timeout: 3 * 1000,
reconnect: 10 * 1000
}, true)
}
/*
* 设置按钮是否可点击
* @param state：open表示开启状态，close表示关闭状态
*/
function setButtonState (state) {
switch(state) {
case 'open':
connect.disabled = true
sendMessage.disabled = false
destroy.disabled = false
break;
case 'close':
connect.disabled = false
sendMessage.disabled = true
destroy.disabled = true
break;
}
}
</script>
</body>
</html>最终实现的效果如下，即使后端服务关闭，或者是断网状态，客户端都能保持重连状态
最后，感谢你看到了这里，文章有任何问题欢迎大佬指出与讨论
附上源码：Gitee
