React Stompjs 客户端未连接

Question

伙计们，我是网络套接字新手。我尝试使用 NodeJs 套接字服务器和 React StompJs 客户端重新创建常见的实时聊天示例。在服务器端我已经收到客户端连接。刷新客户端页面时，服务器注意断开连接，然后再次连接客户端。问题出在我的反应客户端上。它没有记录与服务器的连接。它永远不会进入“onConnect”属性。你知道这里出了什么问题吗？谢谢:)

这是我的服务器代码：

const WebSocket = require("ws");
const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("WebSocket server is running");
});

const wss = new WebSocket.Server({ server });

wss.on("connection", (ws, req) => {
  ws.send("test -> ");
  console.log("Client connected");

  ws.on("message", (message) => {
    console.log("Received message:", message);
    ws.send(message);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

const port = 8080;
server.listen(port, () => {
  console.log(`WebSocket server is listening on port ${port}`);
});

这是我的 React 客户端：

import React, { useEffect, useState } from "react";
import { Client } from "@stomp/stompjs";

function App() {
  const [stompClient, setStompClient] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const [message, setMessage] = useState("");
  const [receivedMessages, setReceivedMessages] = useState([]);


  useEffect(() => {
    const client = new Client({
      brokerURL: "ws://localhost:8080",
      onConnect: () => {
          console.log("connected to webscoket server");
          setIsConnected(true);
          setStompClient(client);
        },
      reconnectDelay: 5000,
      debug: (str) => console.log(str),
    });
    
    client.onStompError = (frame) => {
      console.error("STOMP error:", frame.headers.message);
    };

    client.activate();
    
    return () => {
      if (stompClient) {
        stompClient.deactivate();
      }
    };
  }, [stompClient]);

  const handleSendMessage = () => {
    if (stompClient && stompClient.connected && message.trim() !== "") {
      stompClient.publish({ destination: "/app/sendMessage", body: message });
      setMessage("");
    }
  };

  useEffect(() => {
    if (stompClient && isConnected) {
      console.log("subscribe");
      const subscription = stompClient.subscribe(
        "/topic/messages",
        (message) => {
          const receivedMessage = JSON.parse(message.body);
          setReceivedMessages((prevMessages) => [
            ...prevMessages,
            receivedMessage,
          ]);
        }
      );

      return () => {
        subscription.unsubscribe();
      };
    }
  }, [stompClient, isConnected]);

这是我在客户端控制台中的内容： 打开网络套接字... Web 套接字已打开...

连接 接受版本：1.2,1.1,1.0 心跳:10000,10000

收到数据 <<< test -> 连接 心跳:10000,10000 接受版本：1.2,1.1,1.0 内容长度：0

Answer 1

我在 React 应用程序中建立 WebSocket 连接时遇到了类似的问题。