如何将基于Java Socket的聊天服务器与ReactJS前端对接？

方案一：将 Java Socket 服务端改造为 WebSocket 服务端 #

浏览器环境不支持直接调用 TCP Socket，但原生支持 WebSocket 协议，因此可以把现有 Java Socket 服务端升级为兼容 WebSocket 的服务，直接和 React 前端通信。

Java 服务端改造示例（基于 Spring Boot） #

借助 Spring Boot 快速集成 WebSocket，适配前端通信：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatWebSocketHandler(), "/chat")
                .setAllowedOrigins("*"); // 生产环境需替换为具体业务域名
    }
}

public class ChatWebSocketHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
        System.out.println("新客户端连接：" + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 复用原Java Socket的业务逻辑，或直接转发消息
        String payload = message.getPayload();
        for (WebSocketSession s : sessions) {
            if (s.isOpen()) {
                s.sendMessage(new TextMessage(payload));
            }
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
        System.out.println("客户端断开连接：" + session.getId());
    }
}

React 前端实现 #

直接使用浏览器原生 WebSocket API 建立连接：

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

function ChatComponent() {
    const [message, setMessage] = useState('');
    const [chatHistory, setChatHistory] = useState([]);
    const wsRef = useRef(null);

    useEffect(() => {
        // 连接WebSocket服务端
        wsRef.current = new WebSocket('ws://localhost:8080/chat');
        
        wsRef.current.onopen = () => console.log('WebSocket连接成功');
        wsRef.current.onmessage = (event) => setChatHistory(prev => [...prev, event.data]);
        wsRef.current.onclose = () => console.log('WebSocket连接断开');

        // 组件卸载时关闭连接
        return () => wsRef.current?.close();
    }, []);

    const sendMessage = () => {
        if (wsRef.current && message.trim()) {
            wsRef.current.send(message);
            setMessage('');
        }
    };

    return (
        <div>
            <div className="chat-history">
                {chatHistory.map((msg, index) => <div key={index}>{msg}</div>)}
            </div>
            <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
            />
            <button onClick={sendMessage}>发送</button>
        </div>
    );
}

export default ChatComponent;

方案二：通过 Node.js 中间层转发（无需改造原 Java Socket 服务端） #

如果不想修改现有 Java TCP Socket 服务端，可使用 Node.js 作为中转：Node.js 用 net 模块对接 Java Socket，同时向 React 提供 WebSocket 接口，实现消息双向转发。

Node.js 中间层代码 #

const net = require('net');
const WebSocket = require('ws');

// 连接Java Socket服务端
const javaSocketClient = new net.Socket();
javaSocketClient.connect(8888, 'localhost', () => {
    console.log('已连接到Java Socket服务端');
});

// 创建WebSocket服务供React前端连接
const wss = new WebSocket.Server({ port: 3001 });

wss.on('connection', (ws) => {
    console.log('新前端客户端连接');

    // 前端消息转发到Java服务端
    ws.on('message', (data) => javaSocketClient.write(data.toString()));

    // Java服务端消息转发到前端
    javaSocketClient.on('data', (data) => ws.send(data.toString()));

    ws.on('close', () => console.log('前端客户端断开连接'));
});

React 前端实现 #

仅需修改 WebSocket 连接地址为 Node.js 服务地址即可：

// 替换为Node.js的WebSocket服务地址
wsRef.current = new WebSocket('ws://localhost:3001');

内容的提问来源于stack exchange，提问作者user20384808