游乐游手机版
首页/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智能重写工具简化写作提升清晰度与效率
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

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

同类最新

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

更多
AI高效生成大班科学实验教学PPT下载 提升课堂质量与趣味性
AI教程 · 2026-05-30

AI高效生成大班科学实验教学PPT下载 提升课堂质量与趣味性

```html 对于众多教师而言,大班教学既是日常挑战,也是必须面对的常态。当教室内坐着几十甚至上百名满怀期待的学生时,如何高效准备一堂既生动清晰又能牢牢抓住所有人注意力的课程?PPT 往往是那位不可或缺的“得力助手”。然而,难题也随之浮现:内容要充实,设计需美观,还要贴合不同教学主题——若从头自行

AI提升班会质量:PPT主题总结与未来计划范文
AI教程 · 2026-05-30

AI提升班会质量:PPT主题总结与未来计划范文

使用情景 在校园生活中,主题班会是班级凝聚力的重要体现,堪称一场“全员聚会”。同学们齐聚一堂,交流学习心得、分享生活体会,同时回顾和反思近期的整体表现。然而,每当提到“主题班会”,不少同学便会感到些许压力:如何准备?怎样才能将内容整理得既有条理、有深度,又不失趣味性?这时,PPT便成为了高效组织的得

实测ToDesk AI对比QClaw:更省额度回答更详细
AI教程 · 2026-05-30

实测ToDesk AI对比QClaw:更省额度回答更详细

前言 最近一段时间,我连续体验了几款主打“Claw”能力的桌面智能助手,最初只是想看看它们是否只是“披着AI外壳的聊天工具”。然而,真正上手体验后,感受非常明确:ToDesk AI(ToClaw)更像一个能够直接落地执行任务的桌面助手,而不只是一个会聊天、能生成内容的模型入口。 很多人在评估这类产品

大班幼儿教育PPT制作免费技巧轻松掌握告别烦恼
AI教程 · 2026-05-30

大班幼儿教育PPT制作免费技巧轻松掌握告别烦恼

使用情景 在幼儿园大班的教学场景中,PPT早已成为老师们不可或缺的课堂助手。无论是日常的课件讲解、主题活动的组织,还是家长会上的总结汇报,一份优质的PPT都能让信息传递更加直观,同时有效吸引孩子们的注意力。 不过,要想把大班PPT做得既美观又实用,确实需要花费不少心思。内容既要丰富有趣,视觉上又要具

2026最新版Claude Opus 4.7国内使用全攻略:价格不变能力翻倍
AI教程 · 2026-05-30

2026最新版Claude Opus 4.7国内使用全攻略:价格不变能力翻倍

比Opus 4 6更强的新一代模型Opus 4 7终于正式发布。就在OpenAI不断扩展Codex功能的同时,Anthropic迅速推出了Opus 4 7——而且这次带来的确实是实质性升级。(目前已经全量上线,用户可以直接上手体验。)那么,Opus 4 7究竟有哪些突破?先给个结论:这不是一次简单的