Node.js搭建WebSocket服务器教程 WebSocket后端开发步骤【详解】

浅婷吖_2692

浅婷吖_2692

2026-06-06

714人浏览

原创

最简websocket服务可用ws库直接启动:npm install ws后创建server.js并运行node server.js,即可通过new websocket('ws://localhost:8080')快速验证连通性;生产环境需检查ws.readystate === websocket.open再发送消息,并用map管理clients且监听close/error及时清理。

node.js搭建websocket服务器教程 websocket后端开发步骤【详解】

直接用 ws 启动最简服务,别绕弯

想快速验证 WebSocket 是否通,ws 库本身就能开一个裸服务,不需要 Express、HTTP 服务器或任何中间层。很多新手卡在“必须先搭个 Web 服务才能上 WebSocket”,其实完全没必要。

执行以下命令即可监听 8080 端口:

npm install ws

新建 server.js:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('新连接已建立');
  ws.send('欢迎连接到 WebSocket 服务');

  ws.on('message', (data) => {
    console.log('收到:', data.toString());
    ws.send(`回声: ${data.toString()}`);
  });

  ws.on('close', () => console.log('连接已关闭'));
});

运行 node server.js,再用浏览器控制台执行 new WebSocket('ws://localhost:8080') 就能连上。这是验证协议通路的最快方式,也是排查“连不上”问题的第一步。

wss.on('connection') 回调里必须做连接状态检查

真实环境中,客户端可能断网重连、页面刷新、代理中断,ws 对象的状态不会自动同步。如果直接对 ws.send() 调用而不检查,会抛出 WebSocket is not open 错误,甚至导致进程崩溃(默认未捕获)。

正确做法是每次发消息前加判断:

  • if (ws.readyState === WebSocket.OPEN) { ws.send(...); }
  • 不要依赖 ws.on('open') —— 它只在握手成功时触发一次,之后状态变化(如网络抖动)不会再次触发
  • 若需主动探测连接健康度,可定期发 ping 帧:ws.ping(),并监听 ws.on('pong')

漏掉这个检查,上线后遇到弱网用户就会频繁报错,但本地开发几乎复现不了。

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

用 http.createServer 套一层,是为了共用端口和静态资源

当你要提供 HTML 页面(比如 index.html)和 WebSocket 服务时,不能让前端开两个端口(一个 HTTP,一个 WS)。否则会遇到跨域或部署麻烦。

这时必须把 ws 挂在 http 服务器上,靠 upgrade 事件接管 WebSocket 握手:

const http = require('http');
const WebSocket = require('ws');
const express = require('express');

const app = express();
app.use(express.static('public')); // 提供 /index.html

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws, req) => {
  // req 可读取 query 参数,比如 ?room=general
  const room = new URL(req.url, 'http://f').searchParams.get('room');
  console.log('加入房间:', room);
});

关键点:

  • server.listen(3000) 启动后,HTTP 和 WS 共享 3000 端口
  • 前端访问 http://localhost:3000/ 加载页面,再用 new WebSocket('ws://localhost:3000/') 连接,零跨域
  • 千万别写成 new WebSocket('ws://localhost:3000/ws') 并试图在 Express 里配路由 —— ws 不走 Express 中间件链

clients 存储结构选 Map 而不是数组,且要清理 close 事件

广播消息、私聊、踢人等逻辑都依赖客户端列表。用 Array 存 ws 实例看似简单,但有两个硬伤:

  • 无法通过 ID 快速查找:每次找用户都要 find 遍历,O(n);而 Map 支持 get(clientId),O(1)
  • 不清理 close 后的残留引用:ws 关闭后对象仍留在数组里,下次广播会调用 ws.send() 报错

标准写法是:

const clients = new Map(); // key 是 clientId,value 是 ws 实例

wss.on('connection', (ws) => {
  const id = Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
  clients.set(id, ws);

  ws.on('close', () => clients.delete(id)); // 必须在这里删
  ws.on('error', () => clients.delete(id)); // error 也可能导致不可用,一并删
});

漏掉 delete,跑几天后内存持续上涨,clients.size 越来越大,但实际在线人数为 0 —— 这是线上最隐蔽的内存泄漏来源之一。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2143

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5730

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5046

10

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4286

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1089

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4204

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

860

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1756

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3105

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

RabbitMQ 教程手册
RabbitMQ 教程手册

共0课时 | 0人学习

Node.js 教程
Node.js 教程

共57课时 | 24.9万人学习