进阶教程

Node.js WebSocket聊天室实战搭建教程

2026-05-30

阅读 0

热度 0

作者菜鸟AI编辑部

摘要

聊天室这个概念，从早期的IRC到现在的即时通讯工具，核心逻辑始终围绕实时消息交换。此

聊天室这个概念，从早期的IRC到现在的即时通讯工具，核心逻辑始终围绕实时消息交换。此前我们探讨过用Node.js搭建聊天服务的多种方案，今天换个方向，重点演示如何借助WebSocket实现一个聊天服务器。

选择WebSocket是因为它原生支持全双工通信，天然适配实时场景。Node.js标准库并未直接集成WebSocket协议，但社区提供了成熟的第三方模块，例如本文使用的ws（GitHub上搜索websockets/ws即可找到项目主页）。该库轻量、无额外依赖，非常适合快速搭建原型。

安装方式与标准Node.js包一致，一行命令即可：

npm install ws

引入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 聊天室：

需要留意：WebSocket连接地址为ws://localhost:8080/ws。客户端指定了路径，而服务端示例中未限制路径（默认接受所有请求），因此直接使用ws://localhost:8080也可正常工作。这里按原意保留不做深究。