在反应路由器中维护websocket连接

Posted 2023-02-16

【中文标题】在反应路由器中维护websocket连接

【英文标题】：Maintaining websocket connection in react router

【发布时间】：2017-02-14 09:41:53

【问题描述】：

我有一个使用 React Router 进行路由的 React/Redux 应用程序。

作为这个应用程序的一部分，我设置了一个 websocket 连接。我面临的一个问题是，当直接导航到一个 url 时，连接会断开。

例如：

用户登陆主页www.app.com/ Websocket 连接已建立。 用户通过 React Router browserHistory 导航到www.app.com/link（此页面上没有建立任何连接的代码）。 保持连接。

这按预期工作。然而：

用户登陆主页www.app.com/ Websocket 连接已建立。 用户通过在地址栏中输入/link 直接导航到它（或通过前面的示例导航到它后刷新页面。 连接断开。

这是预期的行为吗？如果是这样，是否有任何 Redux/React Router 模式可以避免它？每次都要手动重新建立连接吗？

【问题讨论】：

你知道服务器端路由和客户端路由吗？

到目前为止，该应用程序的计划一直是无服务器的。所以一切都是客户端，它将托管在带有 Route53 的 S3 上，以捕获对app.com/

以外的任何内容的请求

不确定 websocket 部分，但如果您手动导航到链接，它将仅使用 React 路由器部分，它将向服务器查询该文件，如果它仅作为路由存在客户端，那么您会得到一个404，它会失败。为了解决这个问题，您需要在后端有一个捕获所有路径（例如，如果您手动键入 URL 或刷新页面，它将是 app.get('*', (req, res) => res.sendFile('index.html')); 触发。在您的情况下，仅适用于服务器端和 websocket '将需要设置它以便建立连接而不考虑特定的 React 路由（如 Tiago 所说）

是的，我知道这个问题，这就是我在之前的评论中“捕捉”请求的意思。不过感谢您的帮助！

【参考方案1】：

是的，这是预期的行为。当您刷新页面或通过键入 URL 手动导航时，浏览器将再次转到服务器以加载文件，包括您的 javascript 应用程序（它可能会从缓存中获取它，但结果是相同的）。因此，您在内存中的 javascript 代码（包括 websocket 连接）将丢失，并且所有脚本都将被再次评估。

没有办法解决这个问题。要始终打开 websocket 连接，您只需在应用入口点脚本中打开连接即可，无论用户在哪个页面。