devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WebSocket使用及优化（心跳机制与断线重连）_websocket timeout

作者：寸_铁 | 2024-08-11 12:08:02

赞

踩

websocket timeout

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模块

  1. npm init -y
  2. npm i ws

引入ws模块，并搭建一个简单的websocket服务

  1. const WebSocket = require('ws');
  2. const port = 1024//端口
  3. const pathname = '/ws/'//访问路径
  4.  
  5. new WebSocket.Server({port}, function () {
  6.     console.log('websocket服务开启')
  7. }).on('connection', connectHandler)
  8.  
  9. function connectHandler (ws) {
  10.     console.log('客户端连接')
  11.     ws.on('error', errorHandler)
  12.     ws.on('close', closeHandler)
  13.     ws.on('message', messageHandler)
  14. }
  15.  
  16. function messageHandler (e) {
  17.     console.info('接收客户端消息')
  18.     this.send(e)
  19. }
  20.  
  21. function errorHandler (e) {
  22.     console.info('客户端出错')
  23. }
  24.  
  25. function closeHandler (e) {
  26.     console.info('客户端已断开')
  27. }

前端部分也搭建个ws访问客户端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         Title</title>
  7. </head>
  8. <body>
  9. <script type="module">
  10.     const name = 'test'//连接用户名
  11.     let wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name
  12.     const ws = new WebSocket(wsUrl)
  13.     ws.onopen = function (e) {
  14.         console.log('开启')
  15.         ws.send(JSON.stringify({
  16.             ModeCode: "message",
  17.             msg: 'hello'
  18.         }))
  19.     }//连接上时回调
  20.     ws.onclose = function (e) {
  21.         console.log('关闭')
  22.     }//断开连接时回调
  23.     ws.onmessage = function (e) {
  24.         let data = JSON.parse(e.data)
  25.         console.log('收到消息' + data.msg)
  26.         ws.close()
  27.     }//收到服务端消息
  28.     ws.onerror = function (e) {
  29.         console.log('出错')
  30.     }//连接出错
  31. </script>
  32. </body>
  33. </html>

前端打印结果：

服务端打印结果：

有以上效果说明一个最简单的ws连接就实现了，下面，我们优化一下，为了降低耦合，我们先引入eventBus发布订阅，然后新建一个websocket类继承自原生WebSocket，因为，我们要在里面做心跳和重连
在服务端，我们先把server完善一下，通过http的upgrade过滤验证ws连接
在原有的服务端增加http服务并做好路径验证

  1. const http = require('http');
  2. const server = http.createServer()
  3.  
  4. server.on("upgrade", (req, socket, head) => {//通过http.server过滤数据
  5.     let url = new URL(req.url, `http://${req.headers.host}`)
  6.     let name = url.searchParams.get('name')//获取连接标识
  7.     if(!checkUrl(url.pathname, pathname)) {//未按标准
  8.         socket.write('未按照标准访问');
  9.         socket.destroy();
  10.         return;
  11.     }
  12. })
  13. server.listen(port, () => {
  14.     console.log('服务开启')
  15. })
  16.  
  17. //验证url标准
  18. function checkUrl (url, key) {//判断url是否包含key
  19.     return - ~ url.indexOf(key)
  20. }

完成httpServer后，我们再完善一下websocket服务，将每一个连接的用户都通过代理保存并实现增删，得到以下完整的服务端

  1. const http = require('http');
  2. const WebSocket = require('ws');
  3. const port = 1024//端口
  4. const pathname = '/ws/'//访问路径
  5. const server = http.createServer()
  6.  
  7. class WebSocketServer extends WebSocket.Server {
  8.     constructor () {
  9.         super(...arguments);
  10.         this.webSocketClient = {}//存放已连接的客户端
  11.     }
  12.  
  13.     set ws (val) {//代理当前的ws，赋值时将其初始化
  14.         this._ws = val
  15.         val.t = this;
  16.         val.on('error', this.errorHandler)
  17.         val.on('close', this.closeHandler)
  18.         val.on('message', this.messageHandler)
  19.     }
  20.  
  21.     get ws () {
  22.         return this._ws
  23.     }
  24.  
  25.     messageHandler (e) {
  26.         console.info('接收客户端消息')
  27.         let data = JSON.parse(e)
  28.         switch(data.ModeCode) {
  29.             case 'message':
  30.                 console.log('收到消息' + data.msg)
  31.                 this.send(e)
  32.                 break;
  33.             case 'heart_beat':
  34.                 console.log(`收到${this.name}心跳${data.msg}`)
  35.                 this.send(e)
  36.                 break;
  37.         }
  38.     }
  39.  
  40.     errorHandler (e) {
  41.         this.t.removeClient(this)
  42.         console.info('客户端出错')
  43.     }
  44.  
  45.     closeHandler (e) {
  46.         this.t.removeClient(this)
  47.         console.info('客户端已断开')
  48.     }
  49.  
  50.     addClient (item) {//设备上线时添加到客户端列表
  51.         if(this.webSocketClient[item['name']]) {
  52.             console.log(item['name'] + '客户端已存在')
  53.             this.webSocketClient[item['name']].close()
  54.         }
  55.         console.log(item['name'] + '客户端已添加')
  56.         this.webSocketClient[item['name']] = item
  57.     }
  58.  
  59.     removeClient (item) {//设备断线时从客户端列表删除
  60.         if(!this.webSocketClient[item['name']]) {
  61.             console.log(item['name'] + '客户端不存在')
  62.             return;
  63.         }
  64.         console.log(item['name'] + '客户端已移除')
  65.         this.webSocketClient[item['name']] = null
  66.     }
  67. }
  68.  
  69. const webSocketServer = new WebSocketServer({noServer: true})
  70. server.on("upgrade", (req, socket, head) => {//通过http.server过滤数据
  71.     let url = new URL(req.url, `http://${req.headers.host}`)
  72.     let name = url.searchParams.get('name')//获取连接标识
  73.     if(!checkUrl(url.pathname, pathname)) {//未按标准
  74.         socket.write('未按照标准访问');
  75.         socket.destroy();
  76.         return;
  77.     }
  78.     webSocketServer.handleUpgrade(req, socket, head, function (ws) {
  79.         ws.name = name//添加索引，方便在客户端列表查询某个socket连接
  80.         webSocketServer.addClient(ws);
  81.         webSocketServer.ws = ws
  82.     });
  83. })
  84. server.listen(port, () => {
  85.     console.log('服务开启')
  86. })
  87.  
  88. //验证url标准
  89. function checkUrl (url, key) {//判断url是否包含key
  90.     return - ~ url.indexOf(key)
  91. }

当连接断开时，只有客户端主动访问服务端才能实现重连，所以客户端的功能要比服务端更多一些，我们把客户端的websocket完善优化一下，添加一些简单的控制功能（连接，发消息，断开）的按钮，这里有一点需要注意：在下次连接之前一定要先关闭当前连接，否则会导致多个客户端同时连接，消耗性能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         Title</title>
  7. </head>
  8. <body>
  9. <button id="connect">
  10.     连接
  11. </button>
  12. <button disabled
  13.         id="sendMessage">
  14.     发送
  15. </button>
  16. <button disabled
  17.         id="destroy">
  18.     关闭
  19. </button>
  20. <script type="module">
  21.     const name = 'test'//连接用户名
  22.     let connect = document.querySelector('#connect'),//连接按钮
  23.         sendMessage = document.querySelector('#sendMessage'),//发送按钮
  24.         destroy = document.querySelector('#destroy'),//关闭按钮
  25.         wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name,//连接地址
  26.         ws;
  27.  
  28.     connect.addEventListener('click', connectWebSocket)
  29.     sendMessage.addEventListener('click', function (e) {
  30.         ws.send(JSON.stringify({
  31.             ModeCode: "message",
  32.             msg: 'hello'
  33.         }))
  34.     })
  35.     destroy.addEventListener('click', function (e) {
  36.         ws.close()
  37.         ws = null
  38.     })
  39.  
  40.     function connectWebSocket () {
  41.         if(!ws) {//第一次执行，初始化或ws断开时可执行
  42.             ws = new WebSocket(wsUrl)
  43.             initWebSocket()
  44.         }
  45.     }
  46.  
  47.     function initWebSocket () {
  48.         ws.onopen = function (e) {
  49.             setButtonState('open')
  50.             console.log('开启')
  51.         }//连接上时回调
  52.         ws.onclose = function (e) {
  53.             setButtonState('close')
  54.             console.log('关闭')
  55.         }//断开连接时回调
  56.         ws.onmessage = function (e) {
  57.             let data = JSON.parse(e.data)
  58.             console.log('收到消息' + data.msg)
  59.         }//收到服务端消息
  60.         ws.onerror = function (e) {
  61.             setButtonState('close')
  62.             console.log('出错')
  63.         }//连接出错
  64.     }
  65.  
  66.     /*
  67.   * 设置按钮是否可点击
  68.   * @param state：open表示开启状态，close表示关闭状态
  69.   */
  70.     function setButtonState (state) {
  71.         switch(state) {
  72.             case 'open':
  73.                 connect.disabled = true
  74.                 sendMessage.disabled = false
  75.                 destroy.disabled = false
  76.                 break;
  77.             case 'close':
  78.                 connect.disabled = false
  79.                 sendMessage.disabled = true
  80.                 destroy.disabled = true
  81.                 break;
  82.         }
  83.     }
  84. </script>
  85. </body>
  86. </html>

效果如下：

到了这一步，我们websocket的demo已经可以手动运行，在此基础上，我们将其封装一下，并且通过eventBus对外进行通信就可以用了，具体流程将与接下来的心跳一起实现
websocket心跳机制：顾名思义，就是客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期
心跳的实现也很简单，只需在第一次连接时用回调函数做延时处理，此时还需要设置一个心跳超时时间，若某时间段内客户端发送了消息，而服务端未返回，则认定为断线。下面，我就来实现一下心跳

  1.     //this.heartBeat  --->  time：心跳时间间隔 timeout：心跳超时间隔
  2.     /*
  3.      * 心跳初始函数
  4.      * @param time：心跳时间间隔
  5.      */
  6.     function startHeartBeat (time) {
  7.         setTimeout(() => {
  8.             this.sendMsg({
  9.                 ModeCode: ModeCode.HEART_BEAT,
  10.                 msg: new Date()
  11.             })
  12.             this.waitingServer()
  13.         }, time)
  14.     }
  15.     //延时等待服务端响应，通过webSocketState判断是否连线成功
  16.     function waitingServer () {
  17.         this.webSocketState = false//在线状态
  18.         setTimeout(() => {
  19.             if(this.webSocketState) {
  20.                 this.startHeartBeat(this.heartBeat.time)
  21.                 return
  22.             }
  23.             console.log('心跳无响应，已断线')
  24.             this.close()
  25.             //重连操作
  26.         }, this.heartBeat.timeout)
  27.     }
'
运行

心跳实现完成后，只需要在ws.onopen中调用即可，效果如下：


然后是重连部分，其实只需要新建一个延时回调，与心跳相似，只不过它是在连接失败时使用的，这里就不多做说明。以下是完整版的代码：
websocket部分：

  1. import eventBus
  2.     from "./eventBus.js"
  3.  
  4. const ModeCode = {//websocket消息类型
  5.     MSG: 'message',//普通消息
  6.     HEART_BEAT: 'heart_beat'//心跳
  7. }
  8.  
  9. export default class MyWebSocket extends WebSocket {
  10.     constructor (url, protocols) {
  11.         super(url, protocols);
  12.         return this
  13.     }
  14.  
  15.     /*
  16.      * 入口函数
  17.      * @param heartBeatConfig  time：心跳时间间隔 timeout：心跳超时间隔 reconnect：断线重连时间间隔
  18.      * @param isReconnect 是否断线重连
  19.      */
  20.     init (heartBeatConfig, isReconnect) {
  21.         this.onopen = this.openHandler//连接上时回调
  22.         this.onclose = this.closeHandler//断开连接时回调
  23.         this.onmessage = this.messageHandler//收到服务端消息
  24.         this.onerror = this.errorHandler//连接出错
  25.         this.heartBeat = heartBeatConfig
  26.         this.isReconnect = isReconnect
  27.         this.reconnectTimer = null//断线重连时间器
  28.         this.webSocketState = false//socket状态 true为已连接
  29.     }
  30.  
  31.     openHandler () {
  32.         eventBus.emitEvent('changeBtnState', 'open')//触发事件改变按钮样式
  33.         this.webSocketState = true//socket状态设置为连接，做为后面的断线重连的拦截器
  34.         this.heartBeat && this.heartBeat.time ? this.startHeartBeat(this.heartBeat.time) : ""//是否启动心跳机制
  35.         console.log('开启')
  36.     }
  37.  
  38.     messageHandler (e) {
  39.         let data = this.getMsg(e)
  40.         switch(data.ModeCode) {
  41.             case ModeCode.MSG://普通消息
  42.                 console.log('收到消息' + data.msg)
  43.                 break;
  44.             case ModeCode.HEART_BEAT://心跳
  45.                 this.webSocketState = true
  46.                 console.log('收到心跳响应' + data.msg)
  47.                 break;
  48.         }
  49.     }
  50.  
  51.     closeHandler () {//socket关闭
  52.         eventBus.emitEvent('changeBtnState', 'close')//触发事件改变按钮样式
  53.         this.webSocketState = false//socket状态设置为断线
  54.         console.log('关闭')
  55.     }
  56.  
  57.     errorHandler () {//socket出错
  58.         eventBus.emitEvent('changeBtnState', 'close')//触发事件改变按钮样式
  59.         this.webSocketState = false//socket状态设置为断线
  60.         this.reconnectWebSocket()//重连
  61.         console.log('出错')
  62.     }
  63.  
  64.     sendMsg (obj) {
  65.         this.send(JSON.stringify(obj))
  66.     }
  67.  
  68.     getMsg (e) {
  69.         return JSON.parse(e.data)
  70.     }
  71.  
  72.     /*
  73.      * 心跳初始函数
  74.      * @param time：心跳时间间隔
  75.      */
  76.     startHeartBeat (time) {
  77.         setTimeout(() => {
  78.             this.sendMsg({
  79.                 ModeCode: ModeCode.HEART_BEAT,
  80.                 msg: new Date()
  81.             })
  82.             this.waitingServer()
  83.         }, time)
  84.     }
  85.  
  86.     //延时等待服务端响应，通过webSocketState判断是否连线成功
  87.     waitingServer () {
  88.         this.webSocketState = false
  89.         setTimeout(() => {
  90.             if(this.webSocketState) {
  91.                 this.startHeartBeat(this.heartBeat.time)
  92.                 return
  93.             }
  94.             console.log('心跳无响应，已断线')
  95.             try {
  96.                 this.close()
  97.             } catch(e) {
  98.                 console.log('连接已关闭，无需关闭')
  99.             }
  100.             this.reconnectWebSocket()
  101.         }, this.heartBeat.timeout)
  102.     }
  103.  
  104.     //重连操作
  105.     reconnectWebSocket () {
  106.         if(!this.isReconnect) {
  107.             return;
  108.         }
  109.         this.reconnectTimer = setTimeout(() => {
  110.             eventBus.emitEvent('reconnect')
  111.         }, this.heartBeat.reconnect)
  112.     }
  113. }

index.html部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         Title</title>
  7. </head>
  8. <body>
  9. <button id="connect">
  10.     连接
  11. </button>
  12. <button disabled
  13.         id="sendMessage">
  14.     发送
  15. </button>
  16. <button disabled
  17.         id="destroy">
  18.     关闭
  19. </button>
  20. <script type="module">
  21.     import eventBus
  22.         from "./js/eventBus.js"
  23.     import MyWebSocket
  24.         from './js/webSocket.js'
  25.  
  26.     const name = 'test'//连接用户名
  27.     let connect = document.querySelector('#connect')
  28.     let sendMessage = document.querySelector('#sendMessage')
  29.     let destroy = document.querySelector('#destroy')
  30.     let myWebSocket,
  31.         wsUrl = 'ws://127.0.0.1:1024/ws/?name=' + name
  32.  
  33.     eventBus.onEvent('changeBtnState', setButtonState)//设置按钮样式
  34.     eventBus.onEvent('reconnect', reconnectWebSocket)//接收重连消息
  35.     connect.addEventListener('click', reconnectWebSocket)
  36.     sendMessage.addEventListener('click', function (e) {
  37.         myWebSocket.sendMsg({
  38.             ModeCode: "message",
  39.             msg: 'hello'
  40.         })
  41.     })
  42.     destroy.addEventListener('click', function (e) {
  43.         myWebSocket.close()
  44.     })
  45.  
  46.     function reconnectWebSocket () {
  47.         if(!myWebSocket) {//第一次执行，初始化
  48.             connectWebSocket()
  49.         }
  50.         if(myWebSocket && myWebSocket.reconnectTimer) {//防止多个websocket同时执行
  51.             clearTimeout(myWebSocket.reconnectTimer)
  52.             myWebSocket.reconnectTimer = null
  53.             connectWebSocket()
  54.         }
  55.     }
  56.  
  57.     function connectWebSocket () {
  58.         myWebSocket = new MyWebSocket(wsUrl);
  59.         myWebSocket.init({//time：心跳时间间隔 timeout：心跳超时间隔 reconnect：断线重连时
  60.             time: 30 * 1000,
  61.             timeout: 3 * 1000,
  62.             reconnect: 10 * 1000
  63.         }, true)
  64.     }
  65.  
  66.     /*
  67.      * 设置按钮是否可点击
  68.      * @param state：open表示开启状态，close表示关闭状态
  69.      */
  70.     function setButtonState (state) {
  71.         switch(state) {
  72.             case 'open':
  73.                 connect.disabled = true
  74.                 sendMessage.disabled = false
  75.                 destroy.disabled = false
  76.                 break;
  77.             case 'close':
  78.                 connect.disabled = false
  79.                 sendMessage.disabled = true
  80.                 destroy.disabled = true
  81.                 break;
  82.         }
  83.     }
  84. </script>
  85. </body>
  86. </html>

最终实现的效果如下，即使后端服务关闭，或者是断网状态，客户端都能保持重连状态

最后，感谢你看到了这里，文章有任何问题欢迎大佬指出与讨论
附上源码：Gitee

 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/964132
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号