基于Java后端和ReactJS前端的聊天应用：WebSocket集成指南

花韻仙語 2025-08-03 15:28 695浏览原创

基于java后端和reactjs前端的聊天应用：websocket集成指南

本文旨在指导开发者如何将基于Java Socket的聊天应用后端与ReactJS前端连接。由于JavaScript无法直接连接Java Socket，本文重点介绍如何将Java后端改造为WebSocket服务器，并使用ReactJS通过WebSocket协议与之通信，从而实现全双工的实时通信功能。

将Java Socket后端迁移到WebSocket

正如问题解答所指出的，JavaScript环境无法直接与Java Socket建立连接。因此，需要对Java后端进行改造，使其支持WebSocket协议。WebSocket是一种在单个TCP连接上进行全双工通信的协议，非常适合实时应用。

步骤 1: 选择WebSocket库

Java生态系统中有很多WebSocket库可供选择，例如：

Tyrus (JSR 356参考实现): Java EE 7及更高版本内置支持，是官方的WebSocket API实现。
Jetty WebSocket: Jetty是一个轻量级的Servlet容器，也提供了WebSocket支持。
Spring WebSocket: Spring框架提供了对WebSocket的强大支持，易于集成到Spring应用中。

选择哪个库取决于你的具体需求和项目架构。如果已经在使用Spring，那么Spring WebSocket可能是最佳选择。

步骤 2: 实现WebSocket服务器

以下是一个使用Tyrus库实现的简单WebSocket服务器的示例：

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;

@ServerEndpoint("/chat")
public class ChatServer {

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("Client connected: " + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("Received message: " + message + " from " + session.getId());
        // Broadcast the message to all connected clients
        for (Session s : session.getOpenSessions()) {
            if (s.isOpen()) {
                s.getBasicRemote().sendText(message);
            }
        }
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("Client disconnected: " + session.getId());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.err.println("Error: " + error.getMessage());
    }
}

代码解释:

@ServerEndpoint("/chat"): 指定WebSocket的端点URL为/chat。
@OnOpen: 当客户端建立连接时调用。
@OnMessage: 当服务器收到客户端消息时调用。示例中，收到消息后，会将其广播给所有连接的客户端。
@OnClose: 当客户端断开连接时调用。
@OnError: 当发生错误时调用。

步骤 3: 部署WebSocket服务器

将包含WebSocket端点的Java类部署到支持WebSocket的Servlet容器中，例如Tomcat、Jetty或GlassFish。

ReactJS前端连接WebSocket

现在，后端已经支持WebSocket，接下来需要在ReactJS前端建立与WebSocket服务器的连接。

步骤 1: 创建WebSocket连接

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

function Chat() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const websocket = new WebSocket('ws://localhost:8080/chat'); // 替换为你的WebSocket服务器地址

    websocket.onopen = () => {
      console.log('Connected to WebSocket');
    };

    websocket.onmessage = (event) => {
      setMessages(prevMessages => [...prevMessages, event.data]);
    };

    websocket.onclose = () => {
      console.log('Disconnected from WebSocket');
    };

    websocket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    setWs(websocket);

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

  const sendMessage = () => {
    if (ws && newMessage) {
      ws.send(newMessage);
      setNewMessage('');
    }
  };

  return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default Chat;

代码解释:

new WebSocket('ws://localhost:8080/chat'): 创建一个WebSocket对象，连接到指定的WebSocket服务器地址。将ws://localhost:8080/chat替换为实际的WebSocket服务器地址。
websocket.onopen: 当连接建立成功时触发。
websocket.onmessage: 当收到服务器消息时触发。 event.data包含服务器发送的数据。
websocket.onclose: 当连接关闭时触发。
websocket.onerror: 当发生错误时触发。
ws.send(newMessage): 向服务器发送消息。
useEffect Hook: 用于在组件挂载时建立WebSocket连接，并在组件卸载时关闭连接，防止内存泄漏。

步骤 2: 处理消息

在websocket.onmessage回调函数中，可以将收到的消息添加到消息列表中，并更新React组件的状态，从而在UI上显示新的消息。

步骤 3: 发送消息

通过ws.send()方法可以向WebSocket服务器发送消息。在示例中，当用户点击“Send”按钮时，会将输入框中的消息发送到服务器。