本文共 2352 字，大约阅读时间需要 7 分钟。

使用 Node.js 和 Socket.io 实现在线聊天室

随着现代网络技术的发展，实时聊天室越来越成为用户关注的焦点。本文将引导您使用 Node.js 和 Socket.io 实现一个简单的在线聊天室。

一、静态页面

1.1. 静态页面结构

构建一个基本的聊天室页面，包含两个主要部分：

1.2. 页面功能说明

• 聊天内容对象列表：每个对象包含以下字段
  • id：唯一标识
  • name：用户名
  • type：消息类型（如 "text"）
  • message：消息内容

二、建立连接

2.1. 服务器端（Node.js）

在 Node.js 项目中：

服务器需要监听 WebSocket 连接，并为每个连接创建唯一的标识符。这种方法可大规模推送消息。

2.2. 客户端（Web端）

在 Web 端使用 React 或类似框架实现：

三、发送与接收消息

服务器端：

// 监控新连接
io.on('connection', (socket) => {
    socketSet.add(socket);
    
    // 接收消息
    socket.on('message', (data) => {
        socketSet.forEach(ws => {
            if (ws.connected) {
                ws.send(data);
            } else {
                socketSet.delete(ws);
            }
        });
    });
});

客户端：

// fx.js
const [socket] = useState(
    io('http://localhost:3000', { transports: ['websocket'] })
);
// 处理消息发送
const sendMessage = () => {
    if (inputValue.trim()) {
        socket.emit('message', {
            id: Date.now().toString(),
            name,
            type: 'text',
            message: inputValue
        });
        setInputValue('');
    }
};

确保客户端与服务器保持连接，并能接收消息，即可实时更新聊天窗口。

四、加入更多功能

4.1. 加载状态

在聊天记录中添加一个 loading 标志，表示新消息是否已完全加载。

// 客户端 state
const [loading, setLoading] = useState(false);
const [newMessage, setNewMessage] = useState('');
// 发送消息函数
const sendMessage = () => {
    if (newMessage.trim()) {
        // 发送消息
        socket.emit('message', {
            id: Date.now().toString(),
            name,
            type: 'text',
            message: newMessage,
            loading: true
        });
        setNewMessage('');
        
        // 监控消息
        socket.on('message', (msg) => {
            if (msg.id === newMessageId) {
                setLoading(true);
                setTimeout(() => setLoading(false), 2000);
                setChatList([...chatList, msg]);
            }
        });
    }
};

4.2. 按键事件

使用键盘事件处理，允许用户按回车发送消息：

// 处理回车键
const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        sendMessage();
    }
};

4.3. 藪避潜在问题

• 连接中断：定期检查并移除断开连接的 WebSockets。
• 防止重复发送：通过消息 ID 判断消息状态，避免多次发送。

五、实现总结

通过以上步骤，您成功构建并实现了一个简单的在线聊天室。该系统能支持多人实时聊天，消息被自动推送至所有用户。未来项目中可以进一步优化功能，让聊天体验更加流畅。

最终， depreciate 点赞支持开源项目！