在 React 中全局使用 Socket.IO？

Posted 2023-04-18

【中文标题】在 React 中全局使用 Socket.IO？

【英文标题】：Using Socket.IO in React globally?

【发布时间】：2021-02-08 17:29:02

【问题描述】：

我真的很想找到在全球客户端使用 socket.io 的解决方案。现在，我在使用我认为不正确的事件的每个页面和组件中调用下面的函数。我还想提一下，我正在使用 redux 来存储我的用户。

// Connect to Socket.IO
const socket = socketIOClient(process.env.REACT_APP_BASE_URL, 
  query: `type=client&id=$user_id`,
);

【问题讨论】：

一个选项可以是创建一个单例类并拥有一个套接字成员，然后将该类实例导入项目中的任何位置

【参考方案1】：

所以我这样做的方式是创建一个这样的 Socket 上下文文件

WebSocket.js

import React,  createContext  from "react";
import io from "socket.io-client";
// REDUX
import  bindActionCreators  from "redux";
import  connect  from "react-redux";
import  addOrder  from "./redux/actions";

const WebSocketContext = createContext(null);

export  WebSocketContext ;

const WebSocket = ( children, actions, user ) => 
  let socket;
  let ws;

  // EMIT EVENTS
  const newOrder = (data) => 
    socket.emit("newOrder", data);
  ;

  // ON EVENTS
  const newDriverAccepted = (callback) => 
    socket.on("newDriverAccepted", (driver) => 
      actions.addOrder(driver);
      callback(true);
    );
  ;

  if (!socket) 
    socket = io.connect(process.env.REACT_APP_BASE_URL, 
      query: `type=client&id=$user.id`,
    );

    ws = 
      socket: socket,
      newOrder,
      newDriverAccepted,
    ;
  

  return (
    <WebSocketContext.Provider value=ws>children</WebSocketContext.Provider>
  );
;

const mapDispatchToProps = (dispatch) => 
  const actions = 
    addOrder,
  ;
  return 
    actions: bindActionCreators(actions, dispatch),
  ;
;

const mapStateToProps = (state) => 
  return 
    user: state.clients.user,
  ;
;

export default connect(mapStateToProps, mapDispatchToProps)(WebSocket);

那我就这样用了

index.js

import WebSocketProvider from "./WebSocket";

ReactDOM.render(
  <Provider store=store>
    <PersistGate loading=null persistor=persistor>
      <WebSocketProvider>
        <App />
      </WebSocketProvider>
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);

在这样的组件中

import React,  useContext  from "react";
import  WebSocketContext  from "../../WebSocket";

const MyComponent = () => 
    const socket = useContext(WebSocketContext);

    const handleNewOrder = () => 
         const data = ...
         socket.newOrder(data);
     
    return (
     ...
  )