React中WebSocket接收数据并返回至调用方的问题求助

问题根源 #

你当前的代码存在几个核心问题：

1. 错误使用React Hook：useWebSockets虽命名符合Hook规范，但被当作构造函数用new调用，违反React Hook使用规则，且内部未返回可追踪的状态。
2. 异步逻辑处理错误：WebSocket的onmessage事件是异步触发的，同步函数无法直接返回异步产生的结果，你之前尝试的同步返回方式必然失败。
3. 状态管理失效：全局变量socketMessage不是React状态，即使数据更新也不会触发组件重渲染，无法将数据传递到UI。

解决方案1：重构为React Hook（推荐在组件中使用） #

将WebSocket逻辑封装成合规的React Hook，用useState管理接收的数据，让React自动追踪状态变化并更新组件：

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

const URL_WEB_SOCKET = 'wss://localhost:5000/ws';
const URL_WEB_LOGIN = 'wss://localhost:5000/ws';

// 合规的WebSocket Hook
function useWebSocket(message, isControl) {
  const [receivedData, setReceivedData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const socketUrl = isControl ? URL_WEB_LOGIN : URL_WEB_SOCKET;
    const websocket = new WebSocket(socketUrl);

    // 连接成功后发送消息
    websocket.onopen = () => {
      websocket.send(message);
    };

    // 接收服务器返回数据
    websocket.onmessage = (event) => {
      const data = event.data.toString();
      setReceivedData(data);
      setIsLoading(false);
    };

    // 处理错误
    websocket.onerror = (err) => {
      setError(err);
      setIsLoading(false);
    };

    // 连接关闭时清理
    websocket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    // 组件卸载时关闭WebSocket，避免内存泄漏
    return () => {
      websocket.close();
    };
  }, [message, isControl]);

  return { receivedData, isLoading, error };
}

// 登录组件示例
export function LoginComponent({ loginMsg }) {
  const { receivedData, isLoading, error } = useWebSocket(loginMsg, true);

  if (isLoading) return <div>登录中...</div>;
  if (error) return <div>登录出错：{error.message}</div>;
  
  return receivedData ? <div>登录结果：{receivedData}</div> : null;
}

// 获取数据组件示例
export function DataComponent({ dataMsg }) {
  const { receivedData, isLoading, error } = useWebSocket(dataMsg, false);

  if (isLoading) return <div>加载数据中...</div>;
  if (error) return <div>获取数据出错：{error.message}</div>;
  
  return receivedData ? <div>获取的数据：{receivedData}</div> : null;
}

解决方案2：Promise封装（适合非组件场景或需要手动调用的情况） #

如果需要在非组件环境或手动触发的函数中使用，可以用Promise封装WebSocket逻辑，通过async/await获取异步结果：

const URL_WEB_SOCKET = 'wss://localhost:5000/ws';
const URL_WEB_LOGIN = 'wss://localhost:5000/ws';

// 封装WebSocket请求为Promise
function sendWsRequest(message, isControl) {
  return new Promise((resolve, reject) => {
    const socketUrl = isControl ? URL_WEB_LOGIN : URL_WEB_SOCKET;
    const websocket = new WebSocket(socketUrl);

    websocket.onopen = () => websocket.send(message);
    
    websocket.onmessage = (event) => {
      resolve(event.data.toString());
      websocket.close(); // 收到数据后主动关闭连接
    };
    
    websocket.onerror = (err) => {
      reject(err);
      websocket.close();
    };

    websocket.onclose = () => {
      if (!websocket.onmessage) {
        reject(new Error('连接已关闭，未收到数据'));
      }
    };
  });
}

// 登录函数
export async function Login(message) {
  try {
    return await sendWsRequest(message, true);
  } catch (err) {
    console.error('登录失败:', err);
    throw err;
  }
}

// 获取数据函数
export async function getData(message) {
  try {
    return await sendWsRequest(message, false);
  } catch (err) {
    console.error('获取数据失败:', err);
    throw err;
  }
}

// 在组件中使用示例
function LoginPage() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    setLoading(true);
    try {
      const loginResult = await Login('你的登录消息');
      setResult(loginResult);
    } catch (err) {
      // 处理错误
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleLogin} disabled={loading}>登录</button>
      {loading && <div>处理中...</div>}
      {result && <div>结果：{result}</div>}
    </div>
  );
}

关键注意事项 #

• Hook使用规则：React Hook只能在组件顶层或其他Hook中调用，不能用new实例化，也不能在条件判断、循环中调用。
• 异步逻辑处理：所有依赖WebSocket、API请求等异步操作的返回值，必须通过状态、Promise或回调函数传递，同步函数无法返回异步结果。
• 资源清理：必须在组件卸载时关闭WebSocket连接，避免内存泄漏和无效连接占用资源。

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