websocket聊天室进阶

### 高级WebSocket聊天室实现教程

#### 设计架构
构建一个高级的WebSocket聊天室涉及多个组件之间的协调工作。服务器端需处理连接管理、消息分发以及用户状态跟踪等功能；客户端则负责界面展示和交互逻辑。

#### 技术栈选择
对于这种实时通信应用，Node.js配合Express框架作为后端服务是一个不错的选择，因为它具有异步I/O特性非常适合处理大量并发请求[^1]。前端可以采用React来创建动态更新的UI界面，确保良好的用户体验。

#### 实现步骤详解

##### 服务器设置 (Node.js + Express)
首先安装必要的依赖包：

npm install express ws jsonwebtoken bcryptjs dotenv

初始化项目并配置环境变量文件`.env`用于存储敏感信息如密钥等：

接着编写入口文件`server.js`:

const express = require('express');
const http = require('http');
const { Server } = require('ws');

// 创建HTTP服务器实例并与WebSockets集成
const app = express();
const server = http.createServer(app);
const wss = new Server({ server });

wss.on('connection', function connection(ws) {
    console.log("New client connected");

    // 处理接收到的消息事件
    ws.on('message', function incoming(message) {
        console.log(`Received message => ${message}`);
        
        // 广播给其他所有人
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    // 断开连接时触发
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

server.listen(process.env.PORT || 8080, () => {
    console.log(`Server started on port ${process.env.PORT||8080} :)`);
});

上述代码片段展示了如何建立基本的WebSocket服务器，并实现了简单的消息广播机制。

##### 客户端开发 (React)

为了简化说明，在此仅提供核心功能部分——即通过WebSocket API与后台保持持久化链接的方式：

import React, { useState, useEffect } from 'react';

function ChatRoom() {
    const [messages, setMessages] = useState([]);
    const [textMessage, setTextMessage] = useState('');

    useEffect(() => {
        let socket;

        try {
            socket = new WebSocket(`ws://${window.location.host}`);

            // 连接成功后的回调函数
            socket.addEventListener('open', () => {
                console.log('Connected to WS server.');
            });

            // 接收来自服务器的信息
            socket.addEventListener('message', ({ data }) => {
                setMessages((prevMessages) =>
                    prevMessages.concat([data])
                );
            });

            return () => {
                socket.close(); // 组件卸载前关闭socket
            };
        } catch (error) {
            console.error(error.message);
        }
    }, []);

    const sendMessage = async(e) => {
        e.preventDefault();

        if (!socket?.readyState === WebSocket.OPEN) return alert('Not Connected.');

        await socket.send(textMessage);

        setTextMessage('');
    };

    return (
        <div>
            {/* 显示聊天记录 */}
            <ul>{/* ... */}</ul>

            {/* 输入框及发送按钮 */}
            <form onSubmit={sendMessage}>
                <input value={textMessage} onChange={(e) => setTextMessage(e.target.value)} />
                <button type="submit">Send</button>
            </form>
        </div>
    );
}

export default ChatRoom;

这段代码描述了一个简易版的React组件，它能够监听到新的WebSocket消息并将这些数据渲染成列表项显示出来。同时提供了输入框让用户键入想要发送的内容并通过点击“发送”按钮将其传递给远端的服务端。