首页 > 解决方案 > Socket.io 和 React Router:如何从套接字处理程序引用浏览器历史记录和其他依赖项?

问题描述

我有一个使用 socket.io 与后端交互的反应应用程序。有一种场景是后端推送消息导致页面发生变化。有没有办法从处理程序中引用反应路由器历史记录,而不必将整个应用程序包装在包装器组件中?请参阅下面的代码示例。

另外,我有一个关于引用调度的后续问题。目前,我将套接字保持在 App 状态(我没有使用 redux,但我使用 useContext 和 useReducer 实现了一个非常基本的 hacky 版本)。因此,当我连接套接字时,我能够为不同的套接字事件设置处理程序并相应地调度操作。但是,我觉得套接字连接不应该与应用程序状态耦合。有没有办法在不使用包装器组件的情况下将应用程序状态的调度作为依赖项传递?目前我以这种方式在组件中引用调度:

const { state, dispatch } = useContext(AppContext);

代码示例:

export function connectSocket() {

return async (dispatch) => {

const socket = await io.connect('', {
    path: '/socket.io/',
    secure: true,
    transports: ['websocket'],
  });

  socket.on('reconnect_attempt', () => {
    socket.io.opts.transports = ['polling', 'websocket'];
    socket.io.opts.pingTimeout = 30000;
  })


  // need to reference history here
  socket.on('nextpage', _ => {
       history.push('page');
  });

  // referencing dispatch
  socket.on('foo', _ => {
    dispatch({
      type: actionTypes.foo,
      payload: _,
    });
  });
}
}

谢谢。

标签: reactjssocket.ioreact-router

解决方案


推荐阅读