React全局WebSocket组件

import React, { createContext, useEffect, useRef } from 'react';
import apiConfig from '@configs/servicesIP';
import { notification } from 'antd';
import { CheckCircleFilled } from '@ant-design/icons';

export const WebSocketContext = createContext(null);

export const WebSocketProvider = ({ children }) => {
  const socketRef = useRef();

  const initWebSocket = () => {
    // 创建 WebSocket 连接
    let url = '';
    if (process.env.NODE_ENV === 'development') {
      url = ‘’;
    } else {
      url = window.location.host;
    }

    socketRef.current = new WebSocket('ws://' + url + '');

    socketRef.current.onopen = () => {
      console.log('连接打开');
    };

    socketRef.current.onclose = () => {
      console.log('连接关闭');
    };

    socketRef.current.onerror = (error) => {
      console.error('连接失败:', error);
    };

    socketRef.current.onmessage = (message) => {
      console.log('推送的消息:', message?.data);
      try {
        const data = JSON.parse(message?.data);
        if (data?.status === '200') {
          notification.open({
            message: (
              <>
                <CheckCircleFilled style={{ color: 'green', marginRight: 8 }} />
                消息推送通知
              </>
            ),
          });
        }
      } catch (error) {
        console.error('JSON 解析错误:', error);
      }
    };
  };

  useEffect(() => {
    // initWebSocket();//挂载默认是否打开
    return () => {
      if (socketRef.current) {
        socketRef.current.close();
      }
    };
  }, []);

  return (
    <WebSocketContext.Provider value={{ socketRef: socketRef.current, initWebSocket }}>
      {children}
    </WebSocketContext.Provider>
  );
};

React 应用程序创建了一个 WebSocket 上下文和提供者组件，以便在应用的其他部分中共享 WebSocket 连接。这个模式非常适合处理 WebSocket 连接，尤其是在全局状态或多个组件中需要使用 WebSocket 的情况下。

以下是你代码的功能和优化建议：

功能概述

• WebSocketContext: 使用 createContext 创建了一个上下文，用于在组件树中共享 WebSocket 连接和相关函数。
• WebSocketProvider: 包装应用程序的提供者组件，管理 WebSocket 连接的生命周期。
  • socketRef: 使用 useRef 创建一个持久化的 WebSocket 实例引用，避免在组件重新渲染时重新创建 WebSocket 实例。
  • initWebSocket: 初始化 WebSocket 连接的函数。根据环境配置 WebSocket 的 URL，并处理连接的打开、关闭、错误和消息事件。
  • useEffect: 确保在组件卸载时关闭 WebSocket 连接，以防止内存泄漏。