第 20 卷

一、技术选型与准备

• 前端：HTML（页面结构）+ JavaScript（WebSocket API、DOM操作）；

• 服务端：Node.js（运行环境）+ ws库（轻量级WebSocket服务端实现，替代原生HTTP模块，简

化开发）；

• 准备工作：安装Node.js，执行 npm install ws 安装ws库。

二、分步实现

1. 服务端实现（核心：建立WebSocket服务，处理连接、消息转发）

创建 server.js 文件，实现以下功能：

• 创建WebSocket服务，监听指定端口；
• 维护在线客户端列表和用户映射（客户端连接→用户名）；
• 处理客户端连接/断开事件，广播用户上线/下线通知；
• 处理客户端发送的消息，转发给所有在线客户端（广播）。

Code block

1// server.js 2const WebSocket = require("ws");

3 4// 创建WebSocket服务，监听8080端口

5const wss = new WebSocket.Server({ port: 8080 });

6 7// 维护在线用户：key为客户端连接对象，value为用户名

8const onlineUsers = new Map();

9 10// 广播消息：向所有在线客户端发送消息

11function broadcast(message) { 12// 遍历所有在线客户端，发送消息

13wss.clients.forEach((client) => { 14// 确保客户端连接处于打开状态

26ws.on("message", (data) => { 27const message = JSON.parse(data);

28switch (message.type) {

44

57 58default:

59break;

60} 61});

62 63// 处理客户端断开连接

64ws.on("close", () => { 65console.log("客户端断开连接");

66// 移除离线用户 67const username = onlineUsers.get(ws);

77 78// 处理连接错误

79ws.on("error", (error) => {

83 84console.log("WebSocket服务已启动，监听端口8080");

85

1. 前端实现（核心：建立连接、登录、发送/接收消息、渲染页面）

创建 index.html 文件，实现以下功能：

• 页面结构：登录输入框、消息输入框、消息列表、在线用户列表；
• WebSocket连接：创建连接、监听open/close/message/error事件；
• 业务逻辑：用户登录、发送消息、接收消息并渲染、显示系统通知（上线/下线）。

Code block

1// index.html 2<!DOCTYPE html>

3简单WebSocket聊天<!-- 聊天区域 --> 4聊天窗口<!-- 在线用户区域 -->在线用户${data.sender}${data.content}${data.time}

3. 运行与测试

1. 启动服务端：在 server.js 所在目录执行 node server.js，控制台输出“WebSocket服务

已启动，监听端口8080”即为成功；

1. 启动前端：用浏览器打开 index.html 文件，弹出登录框输入用户名（如“user1”）；
2. 多客户端测试：打开多个浏览器窗口，分别登录不同用户名（如“user2”“user3”），发送消息

可实时同步到所有窗口，在线用户列表同步更新，用户上线/下线会显示系统通知。

三、核心功能说明与拓展优化