tiefen_space_h5/components/Websocket/index.jsx

import React, { useEffect, useState, useRef } from "react";
import baseRequest from "@/utils/baseRequest";
import { connect } from "react-redux";
import { get } from "@/utils/storeInfo";

var retryInterval = 1000;
const maxInterval = 60000;
var messageQueue = [];
const WebSocketComponent = ({ getData, authInfo }) => {
  const [messages, setMessages] = useState([]);
  // const [pending, startTransition] = useTransition();
  const socketRef = useRef(null);
  let interval = null;
  useEffect(() => {
    const account = get("account");
    if (!account && socketRef.current) {
      socketRef.current.close();
      socketRef.current = null;
      return;
    }
    if (!socketRef.current && account) {
      retryInterval = Math.min(retryInterval * 2, maxInterval);
      const timer = setInterval(() => {
        if (socketRef.current?.readyState !== 1 && account) {
          if (socketRef.current) {
            socketRef.current?.close();
            socketRef.current = null;
            clearInterval(interval);
          }
          connect_socket();
        } else {
          clearInterval(timer);
        }
      }, retryInterval);
    }
    // 组件卸载时关闭WebSocket连接
    return () => {
      // console.log("state", socketRef.current.readyState);
      if (socketRef.current)
        socketRef.current?.readyState === WebSocket.OPEN &&
          socketRef.current?.close();
      clearInterval(interval);
    };
  }, [authInfo]); // 空依赖数组表示这个effect只在组件挂载时运行一次
  // return <Error statusCode={500} />;

  const connect_socket = () => {
    const base = baseRequest();
    const account = get("account");
    // console.log(account);
    if (socketRef.current?.readyState === 1 || !account) return;
    // 创建WebSocket连接
    socketRef.current = new WebSocket(
      `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/ws?b_mid=${base.b_mid}&b_dt=1&b_token=${base.b_token}&b_ch=h5`
    );

    // 注意使用wss协议（如果服务器支持）
    // 连接打开时触发
    socketRef.current.onopen = () => {
      // console.log("WebSocket connected.", socketRef.current.readyState);
      // 可以在这里发送消息到服务器，例如：socket.send('Hello Server!');
      retryInterval = 1000;
      sendMessageQueue();
      socketRef.current.send(JSON.stringify({ t: 1 }));
    };
    // 处理收到的消息
    socketRef.current.onmessage = (event) => {
      if (Object.prototype.toString.call(event.data) === "[object Blob]") {
        var reader = new FileReader();
        reader.readAsText(event.data, "utf-8");
        reader.onload = function (e) {
          if (reader.result === "pong") {
            // console.log("pong received");
          }
          try {
            const data = JSON.parse(reader.result);

            if (data.t === 2 && data.msg.ping_interval) {
              socketRef.current.send("ping");
              interval = setInterval(() => {
                // 发送 ping 给服务器
                socketRef.current.send("ping");
                // 响应服务器的 ping
                // socketRef.current.on("ping", () => {
                //   socketRef.current.send("pong");
                // });
              }, data.msg.ping_interval * 1000);
            }
            if (data.t === 3) {
              getData(data.msg);
              setMessages((prevMessages) => [...prevMessages, data]);
            }
          } catch (error) {}
        };
      } else {
      }
    };

    // 连接关闭时触发
    socketRef.current.onclose = () => {
      // console.log("WebSocket closed.", socketRef.current.readyState);
      clearInterval(interval);

      if (account) {
        // console.log("WebSocket closed--------.", account);
        setTimeout(connect_socket, 1000);
        // retryInterval = Math.min(retryInterval * 2, maxInterval);
      }

      // console.log("WebSocket disconnected.");
    };
    // 连接错误时触发
    socketRef.current.onerror = (error) => {
      // console.error("WebSocket error:", error);
      // 重新连接
      socketRef.current?.close();
    };
    // 响应服务器的 ping
    // socketRef.current.on("ping", () => {
    //   socketRef.current.send("pong");
    // });
  };
  const sendMessageQueue = () => {
    while (messageQueue.length > 0) {
      const data = messageQueue.shift(); // 获取并移除队列中的第一个元素
      // sendMessage(data); // 尝试再次发送
    }
  };
  return (
    <div>
      {/* <Text style={{ fontSize: 24, fontWeight: 'bold' }}>WebSocket Messages</Text>
      <FlatList
        data={messages}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item}</Text>}
      /> */}
    </div>
  );
};

const mapStateToProps = ({ reducer }) => {
  return {
    authInfo: reducer.authInfo,
  };
};
export default connect(mapStateToProps, null)(WebSocketComponent);