游乐游手机版
首页/AI教程/文章详情

Node.js WebSocket聊天室实现示例

时间:2026-05-30 10:42
聊到聊天室,大家应该都不陌生。无论是早期的 IRC,还是如今的各类即时通讯工具,核心逻辑其实都差不多。之前也讨论过不少使用 Node js 搭建聊天服务的案例,今天换一个角度,专门演示如何通过 WebSocket 实现一个高效实时的聊天服务器,帮助大家快速掌握 Node js WebSocket 聊

聊到聊天室,大家应该都不陌生。无论是早期的 IRC,还是如今的各类即时通讯工具,核心逻辑其实都差不多。之前也讨论过不少使用 Node.js 搭建聊天服务的案例,今天换一个角度,专门演示如何通过 WebSocket 实现一个高效实时的聊天服务器,帮助大家快速掌握 Node.js WebSocket 聊天室的开发流程。

之所以选择 WebSocket,是因为它天然支持全双工通信,非常适合实时聊天、在线协作等场景。Node.js 原生 API 虽然不直接提供 WebSocket 支持,但社区有非常成熟的第三方库,比如本文要使用的 ws(项目主页在 GitHub 上,搜索 websockets/ws 即可找到)。这个框架轻量、易用,不依赖其他环境,非常适合用来快速搭建 WebSocket 聊天服务器原型。

安装方式与其他 Node.js 包一样,一行命令即可完成:

npm install ws

安装完成后,创建 WebSocket 服务器非常简单。下面是一个基本示例,监听在 8080 端口:

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

服务器启动后,接下来要考虑聊天室的具体需求。这里实现一个经典的群聊模式:所有用户发送的消息,其他在线用户都能即时看到。当新用户连接时,服务器使用其 IP 和端口拼接作为临时昵称,方便区分不同的客户端。

服务器端的实现

理解了需求后,代码实现就顺理成章了。以下是完整的服务器端代码,展示了如何用 Node.js 和 ws 库构建一个 WebSocket 聊天服务器:

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

server.on('open', function open() {
  console.log('connected');
});

server.on('close', function close() {
  console.log('disconnected');
});

server.on('connection', function connection(ws, req) {
  const ip = req.connection.remoteAddress;
  const port = req.connection.remotePort;
  const clientName = ip + ':' + port;
  console.log('%s is connected', clientName);

  // 发送欢迎信息给客户端
  ws.send("Welcome " + clientName);

  ws.on('message', function incoming(message) {
    console.log('received: %s from %s', message, clientName);
    // 广播消息给所有客户端
    server.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(clientName + " -> " + message);
      }
    });
  });
});

核心逻辑非常直接:当服务器收到某个客户端发送的消息时,会遍历所有已连接的客户端,将消息加上发送者昵称后转发出去,从而实现群聊广播效果。

客户端的实现

客户端方面更简单——浏览器原生支持 WebSocket API,无需额外引入第三方库。使用 HTML + JavaScript 即可快速搭建交互页面。

下面是客户端 client.html 的完整代码:




  
  WebSocket Chat


  

  

WebSocket 聊天室:


这里需要注意一点:WebSocket 的连接地址是 ws://localhost:8080/ws,路径部分需要与服务器端保持一致(服务器端未限制路径时默认接受所有请求,但客户端指定了路径,实际运行时直接连接 ws://localhost:8080 也是可行的。此处保留原意,不必深究)。

运行应用

先启动服务器:

node index.js

然后在浏览器中直接打开 client.html 文件,就能看到聊天界面了。

聊天界面

多开几个浏览器窗口,即可模拟多个用户同时在线聊天。每个人发送的消息,其他窗口都能即时收到,充分体现 WebSocket 的实时通信能力。

群聊界面

整个流程下来,核心逻辑其实只有几步:搭建 WebSocket 服务器、处理客户端连接、广播消息。WebSocket 让这一切变得非常流畅,而 Node.js 的非阻塞特性则保证了高并发下的性能表现。如果你有兴趣,完全可以在本示例的基础上扩展更多功能,例如用户昵称自定义、消息持久化存储、私聊等,打造一个功能完善的 Node.js 实时聊天应用。

来源:https://developer.aliyun.com/article/704472
上一篇高效Prompthub AI提示词创作与管理平台 下一篇AI智能重写工具简化写作提升清晰度与效率
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
批处理BAT入门教程第一篇
AI教程 · 2026-07-03

批处理BAT入门教程第一篇

提供13个批处理实战技巧,覆盖全盘查找并删除文件夹或文件、拷贝移动文件、创建畸形文件夹及设置隐藏属性等场景,可一键完成系统维护与文件管理工作,极大提升自动化操作效率和便捷性。

从零开始批处理命令For循环详解与实战案例
AI教程 · 2026-07-03

从零开始批处理命令For循环详解与实战案例

批处理For命令支持 d、 l、 r、 f四个参数。 d仅列出当前目录下的目录名; r递归搜索指定路径及其子目录中的文件; l生成数值序列; f可解析文件、字符串或命令输出,通过delims、tokens、skip、eol等选项灵活处理内容。

批评你的人是你生命中的贵人
AI教程 · 2026-07-03

批评你的人是你生命中的贵人

批评你的人往往最值得珍惜,因为他们关注你、助你成长。面对批评应包容反思,用行动改进而非辩解。接受批评是自我完善的过程,能让人少走弯路,避免重复犯错。这样的人正是生命中的贵人,值得感恩与珍惜。

测试人员角色定位与职责详解
AI教程 · 2026-07-03

测试人员角色定位与职责详解

测试人员角色经历了从找问题、保证质量到分析风险的转变,最终核心职责是提供关键信息,协助团队创造优秀产品。这包括识别问题、评估风险及帮助团队了解项目状态,而非单纯把关或追求完美。

经营成功测试生涯的实用方法与策略
AI教程 · 2026-07-03

经营成功测试生涯的实用方法与策略

一、测试生涯的起点 1989年,我在田纳西大学攻读研究生时,意外地从软件开发人员转行成为一名软件测试工程师。这并非我主动选择,说起来还有些戏剧性——某个早晨,教授质问我为何缺席那么多开发会议,我解释说这些会议总是安排在周末早上,对我这个第一次离家、刚入学的学生来说实在不便。结果呢?等待我的不是解聘通