构建实时聊天应用：Java后端与ReactJS前端的WebSocket集成指南

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

// 定义WebSocket服务器端点，路径为 /chat
@ServerEndpoint("/chat")
public class ChatWebSocketServer {

    // 存储所有连接的客户端会话
    // 使用Set来保证唯一性，使用Collections.synchronizedSet来保证线程安全
    private static final Set<Session> connectedSessions = Collections.synchronizedSet(new HashSet<>());

    @OnOpen
    public void onOpen(Session session) {
        // 当新的客户端连接时
        connectedSessions.add(session);
        System.out.println("新连接加入: " + session.getId() + ", 当前连接数: " + connectedSessions.size());
        // 可以向所有客户端广播上线消息
        broadcastMessage("系统消息: 用户 " + session.getId() + " 已上线。");
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 当收到客户端消息时
        System.out.println("收到来自 " + session.getId() + " 的消息: " + message);
        // 将消息广播给所有连接的客户端
        broadcastMessage("用户 " + session.getId() + ": " + message);
    }

    @OnClose
    public void onClose(Session session) {
        // 当客户端连接关闭时
        connectedSessions.remove(session);
        System.out.println("连接关闭: " + session.getId() + ", 当前连接数: " + connectedSessions.size());
        // 可以向所有客户端广播下线消息
        broadcastMessage("系统消息: 用户 " + session.getId() + " 已下线。");
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        // 当连接发生错误时
        System.err.println("连接错误: " + session.getId() + ", 错误信息: " + throwable.getMessage());
        connectedSessions.remove(session); // 移除错误连接
    }

    // 广播消息给所有连接的客户端
    private void broadcastMessage(String message) {
        for (Session session : connectedSessions) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                System.err.println("发送消息到 " + session.getId() + " 失败: " + e.getMessage());
                // 可以在这里处理发送失败的会话，例如移除
            }
        }
    }
}

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

function ChatApp() {
    const [messages, setMessages] = useState([]);
    const [inputMessage, setInputMessage] = useState('');
    const ws = useRef(null); // 使用useRef来保存WebSocket实例

    useEffect(() => {
        // 初始化WebSocket连接
        // 确保你的Java WebSocket服务器运行在正确的IP和端口上
        // 例如：ws://localhost:8080/your-app-context/chat
        ws.current = new WebSocket('ws://localhost:8080/your-webapp-context/chat'); 

        ws.current.onopen = () => {
            console.log('WebSocket 连接已建立');
            setMessages(prev => [...prev, { type: 'system', text: '已连接到聊天室。' }]);
        };

        ws.current.onmessage = (event) => {
            // 接收到服务器消息
            setMessages(prev => [...prev, { type: 'received', text: event.data }]);
        };

        ws.current.onclose = () => {
            console.log('WebSocket 连接已关闭');
            setMessages(prev => [...prev, { type: 'system', text: '连接已断开。' }]);
        };

        ws.current.onerror = (error) => {
            console.error('WebSocket 错误:', error);
            setMessages(prev => [...prev, { type: 'system', text: '连接错误。' }]);
        };

        // 组件卸载时关闭WebSocket连接
        return () => {
            if (ws.current && ws.current.readyState === WebSocket.OPEN) {
                ws.current.close();
            }
        };
    }, []); // 空依赖数组表示只在组件挂载时执行一次

    const sendMessage = () => {
        if (inputMessage.trim() === '') return;

        if (ws.current && ws.current.readyState === WebSocket.OPEN) {
            ws.current.send(inputMessage);
            setMessages(prev => [...prev, { type: 'sent', text: inputMessage }]); // 本地显示发送的消息
            setInputMessage(''); // 清空输入框
        } else {
            console.warn('WebSocket 未连接或已关闭，无法发送消息。');
            setMessages(prev => [...prev, { type: 'system', text: '消息发送失败：未连接。' }]);
        }
    };

    return (
        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto', border: '1px solid #ccc', borderRadius: '8px' }}>
            <h2>React WebSocket 聊天室</h2>
            <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid #eee', padding: '10px', marginBottom: '10px' }}>
                {messages.map((msg, index) => (
                    <div key={index} style={{
                        textAlign: msg.type === 'sent' ? 'right' : 'left',
                        color: msg.type === 'system' ? 'gray' : (msg.type === 'sent' ? 'blue' : 'black')
                    }}>
                        {msg.text}
                    </div>
                ))}
            </div>
            <input
                type="text"
                value={inputMessage}
                onChange={(e) => setInputMessage(e.target.value)}
                onKeyPress={(e) => { if (e.key === 'Enter') sendMessage(); }}
                placeholder="输入消息..."
                style={{ width: 'calc(100% - 80px)', padding: '8px', marginRight: '10px' }}
            />
            <button onClick={sendMessage} style={{ padding: '8px 15px' }}>发送</button>
        </div>
    );
}

export default ChatApp;