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

最新推荐文章于 2025-11-11 06:30:00 发布

原创

最新推荐文章于 2025-11-11 06:30:00 发布 · 6k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #javascript #websocket

本文介绍WebSocket的基础概念及其实现细节，包括如何使用Node.js和WS库搭建WebSocket服务器，前端如何建立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.h