如何连接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端点路径
@ServerEndpoint("/chat")
public class ChatWebSocketServer {

    // 存储所有连接的客户端会话
    private static Set<Session> clients = Collections.synchronizedSet(new HashSet<>());

    @OnOpen
    public void onOpen(Session session) {
        // 新客户端连接时，将其会话添加到集合中
        clients.add(session);
        System.out.println("新连接: " + session.getId());
        // 可以向新连接的客户端发送欢迎消息
        // session.getAsyncRemote().sendText("欢迎加入聊天室！");
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        // 收到消息时，广播给所有连接的客户端
        System.out.println("收到来自 " + session.getId() + " 的消息: " + message);
        for (Session client : clients) {
            // 避免发送给自己（可选，根据业务逻辑）
            // if (!client.equals(session)) {
                client.getBasicRemote().sendText(message); // 同步发送
            // }
        }
    }

    @OnClose
    public void onClose(Session session) {
        // 客户端断开连接时，从集合中移除其会话
        clients.remove(session);
        System.out.println("连接关闭: " + session.getId());
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        // 处理错误
        System.err.println("WebSocket错误，会话ID: " + session.getId() + ", 错误: " + throwable.getMessage());
        throwable.printStackTrace();
    }
}

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服务器
        // 注意：这里的IP和端口需要替换为你的Java WebSocket服务器地址
        ws.current = new WebSocket('ws://localhost:8080/your-app-context/chat'); 

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

        ws.current.onmessage = (event) => {
            // 收到服务器消息
            console.log('收到消息:', event.data);
            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.close();
            }
        };
    }, []); // 空依赖数组表示只在组件挂载时执行一次

    const sendMessage = () => {
        if (ws.current && ws.current.readyState === WebSocket.OPEN && inputMessage.trim() !== '') {
            ws.current.send(inputMessage);
            setMessages(prev => [...prev, { type: 'sent', text: inputMessage }]); // 本地显示发送的消息
            setInputMessage(''); // 清空输入框
        } else {
            console.warn('WebSocket未连接或消息为空');
        }
    };

    return (
        <div>
            <h1>ReactJS 聊天应用</h1>
            <div style={{ border: '1px solid #ccc', height: '300px', overflowY: 'scroll', padding: '10px' }}>
                {messages.map((msg, index) => (
                    <p key={index} style={{ color: msg.type === 'system' ? 'gray' : (msg.type === 'sent' ? 'blue' : 'black') }}>
                        {msg.text}
                    </p>
                ))}
            </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', marginTop: '10px' }}
            />
            <button onClick={sendMessage} style={{ padding: '8px', marginTop: '10px' }}>发送</button>
        </div>
    );
}

export default ChatApp;