在React组件之间传递Socket.io对象

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000'); // 创建Socket.io连接

const App = () => {
  // 将socket对象保存在状态中
  const [socketObj, setSocketObj] = useState(socket);

  useEffect(() => {
    // 在组件卸载时关闭连接
    return () => {
      socketObj.disconnect();
    };
  }, []);

  return (
    <div>
      {/* 将socket对象通过上下文传递给子组件 */}
      <SocketContext.Provider value={socketObj}>
        <ChildComponent />
      </SocketContext.Provider>
    </div>
  );
};

export default App;

import React from 'react';

const SocketContext = React.createContext();

export default SocketContext;

import React, { useContext } from 'react';
import SocketContext from './SocketContext';

const ChildComponent = () => {
  const socket = useContext(SocketContext);

  // 使用socket对象进行实时通信操作
  // ...

  return (
    <div>
      {/* 子组件的内容 */}
    </div>
  );
};

export default ChildComponent;