Node.js WebSocket聊天室实战教程 专家推荐

2026-05-30阅读 0热度 0
其他

WebSocket 是实现实时双向通信的关键技术,尤其在搭建聊天服务器时优势明显。从早期的 IRC 到如今的各类即时通讯工具,核心逻辑始终围绕实时消息传递展开。此前我们探讨过多种基于 Node.js 构建聊天服务的方式,今天专注于如何利用 WebSocket 协议,从零搭建一个可运行的双向通信聊天服务器。

选择 WebSocket 的原因在于其原生支持全双工通信,天然适配实时场景。Node.js 原生 API 未直接提供 WebSocket 实现,但社区中的第三方库如 ws(GitHub 仓库 websockets/ws)已成为标准选择。该库轻量、零依赖,仅需几行代码即可完成服务器初始化,非常适合快速原型开发或生产级部署。

安装只需一条命令:

npm install ws

创建 WebSocket 服务器极为简洁。以下示例监听 8080 端口:

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

服务器启动后,需要设计聊天室的核心功能。这里实现经典群聊模式:所有在线用户共享消息,新用户连接时自动以 IP 和端口组合作为临时昵称,便于识别参与者。

服务器端实现

明确需求后,代码编写自然顺畅。完整服务器端脚本如下:

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


  <script type="text/ja vascript">
    var socket;
    if (!window.WebSocket) {
      window.WebSocket = window.MozWebSocket;
    }
    if (window.WebSocket) {
      socket = new WebSocket("ws://localhost:8080/ws");
      socket.onmessage = function (event) {
        var ta = document.getElementById('responseText');
        ta.value = ta.value + '\n' + event.data;
      };
      socket.onopen = function (event) {
        var ta = document.getElementById('responseText');
        ta.value = "连接开启!";
      };
      socket.onclose = function (event) {
        var ta = document.getElementById('responseText');
        ta.value = ta.value + "连接被关闭";
      };
    } else {
      alert("你的浏览器不支持 WebSocket!");
    }

    function send(message) {
      if (!window.WebSocket) { return; }
      if (socket.readyState == WebSocket.OPEN) {
        socket.send(message);
      } else {
        alert("连接没有开启.");
      }
    }
  </script>

  

WebSocket 聊天室:


注意:客户端连接地址为 ws://localhost:8080/ws,实际运行时服务器未限定路径,因此直接连接 ws://localhost:8080 亦可正常工作。此处保留原始写法以便理解。

启动应用

先启动服务端:

node index.js

随后在浏览器中打开 client.html,即可看到聊天界面。

聊天界面

多开几个窗口即可模拟多用户同时在线聊天。任意用户发送的消息,其他窗口会立即显示。

群聊界面

纵观整个过程,核心步骤仅涉及创建服务器、处理连接、广播消息三个环节。WebSocket 使通信流畅自然,而 Node.js 的非阻塞 I/O 特性保障高并发下的稳定性能。在此基础上,可轻松扩展昵称自定义、消息持久化、私聊等高级功能。

免责声明

本网站新闻资讯均来自公开渠道,力求准确但不保证绝对无误,内容观点仅代表作者本人,与本站无关。若涉及侵权,请联系我们处理。本站保留对声明的修改权,最终解释权归本站所有。

相关阅读

更多
欢迎回来 登录或注册后,可保存提示词和历史记录
登录后可同步收藏、历史记录和常用模板
注册即表示同意服务条款与隐私政策