重新加载浏览器后重新连接websocket

时间:2019-03-29 18:23:45

标签: reactjs websocket

我正在创建一个具有许多组件的React应用程序,这些组件可以模拟现实生活中的控件,例如开关,温度控制器,传感器,pir等,并且高度依赖状态

最初,与服务器的连接会拉入控件的json列表,该列表由应用解析,呈现和显示。通过检查文件的版本日期(保存在本地存储器中)可以管理该文件的不需要的重装。

一旦加载,便会进行调用以下载所有控件的初始状态,这可能需要花费几秒钟来接收,构造和渲染。随后但在同一命令内,仅接收和处理已更改的状态

现在这是问题的症结所在。一切正常,直到刷新应用程序为止。我了解到,刷新浏览器后,所有打开的Web套接字都会关闭并重新连接(使用相同的代码),但是由于我与服务器建立了新的连接,因此在重新连接后,我无法仅接收更新的状态,而被迫再次下载并解析所有控制状态,

我尝试过使用逻辑检查在发送初始命令之前是否检查套接字是否打开,但据我了解Web套接字的工作原理,这是行不通的,

有什么方法可以将websocket的ID存储为cookie(我对此一无所知),也可以存储在本地存储中,以便在重新加载后重新连接同一套接字连接,从而仅接收新的状态更改。

如果不可行,那么关于如何更好地管理必须每次不断加载和解析所有控件的任何建议。

1 个答案:

答案 0 :(得分:1)

如您所知,浏览器会在页面卸载时关闭websocket连接。而且,重新加载后,存储在DOM中的任何状态都消失了。

当浏览器猛击websocket时,会通知服务器已关闭。因此,您的websocket连接在重新加载后消失了。您需要设置一个新的。您将找不到旧的。

您也许可以使用本地存储或会话存储来保持应用程序的状态(而不仅仅是最新检索的时间戳)。然后,在重新加载后,您的应用程序可以从该存储中获取状态,而不必通过Websocket通道从服务器重新填充它。

您可以尝试在应用程序的'unload'窗口中侦听document.defaultView事件,并让事件处理程序在页面卸载之前将状态存储在本地或会话存储中。

显然,这样做是在浏览器中缓存应用程序状态。因此,您将面临缓存一致性,生存时间,陈旧数据等问题。

'toobz有很多使用React / Redux和本地/会话存储的示例。

相关问题