搭建一个匿名聊天室

之前在鼓捣博客“评论区”的时候，弄过一个小程序，这次分享出来。在本篇文章中将介绍如何使用 Node.js 和Socket.IO 创建一个简单的匿名聊天室。聊天室将为每个用户生成唯一的 ID，并支持多人实时聊天。

技术选型

  • Node.js：后端运行时，用于搭建 Web 服务。
  • Express：轻量级 Web 框架，用于快速搭建 HTTP 服务。
  • Socket.IO：实现实时双向通信。
  • UUID：生成唯一用户 ID，确保用户在匿名环境下具有唯一标识

环境准备

  • node ：v18.13.0
  • npm ：v8.19.3

module 安装

1
2
3
npm install express socket.io
npm install uuid

代码分析

服务端代码：server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const { v4: uuidv4 } = require('uuid');  // 用于生成唯一ID

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
    // 为每个用户生成一个唯一的ID
    const userId = uuidv4();
    socket.userId = userId;

    console.log(`User connected: ${userId}`);

    // 通知客户端用户的ID
    socket.emit('user connected', userId);

    socket.on('chat message', (msg) => {
        // 广播消息时包括用户的ID
        io.emit('chat message', { id: socket.userId, msg });
    });

    socket.on('disconnect', () => {
        console.log(`User disconnected: ${userId}`);
    });
});

server.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

1、静态文件服务：
使用 express.static 提供前端页面文件。将 HTML、CSS 和客户端 JavaScript 文件放置在 /public 目录下即可。

2、生成用户唯一 ID：
使用 uuid 库为每个用户生成一个随机的唯一标识符，通过 socket.userId 保存。

3、、消息广播：
监听 chat message 事件并广播消息，同时附加用户的唯一 ID，以区分发送者。

4、连接与断开事件：
通过 io.on(‘connection’) 监听客户端连接。
通过 socket.on(‘disconnect’) 监听用户断开连接。

如何运行

1、确保已安装 Node.js 和 npm，以及环境依赖

2、在server.js 所处目录中运行

1
node server.js

3、打开浏览器，访问以下地址
连接地址：http://localhost:3000

运行效果

终端运行效果，服务端会显示链接成员的uuid

浏览器运行效果，会显示介入后的聊天记录