即使在页面刷新之后，如何保持 Websocket 连接持久？答案

【问题标题】：How keep a Websocket connection persistent, even after page refresh?即使在页面刷新之后，如何保持 Websocket 连接持久？
【发布时间】：2014-05-06 21:52:51
【问题描述】：

我有一个网络应用程序，其中需要从服务器到其客户端（浏览器）的持久连接，以便在（附近）向客户端推送新闻/更新即时的。如果浏览网站的某些元素不会导致完整的页面刷新，这将不会那么棘手。

轮询（标准方式或长轮询）服务器以获取新闻不是一种选择，因为它通常会导致不必要的请求调用（因为没有可用的新闻）。而且新闻可以随机出现。因此，使用轮询策略，服务器将关闭...... 对于 websocket（双向通信通道），客户端和服务器必须接受升级到 websocket。 here讨论了类似的问题，但没有找到令人满意的解决方案。

通过将数据存储在 cookie 或其他方式中，数据可以在整个页面刷新后仍然存在：

cookies
window.name (www.thomasfrank.se/sessionvars.html)
localstorage：存储没有过期日期的数据。数据不会被删除当浏览器关闭时。示例：毅力 (github.com/viseztrance/perseverance)
PersistJS：没有 cookie 的跨浏览器客户端持久存储 Javascript 对象是通过序列化/反序列化对象来完成的。

对于像 websockets 这样的“运行”对象，有没有类似的东西？

我想到的一些可能性是：

旧式“解决方案”是将整个 Web 应用程序放在 iFrame 中，并将连接添加到（框架的）最外层窗口。这不是一个选择，因为它会导致许多不同的其他问题。
由于 HTML5 Share Web Workers 退出，但由于浏览器支持有限，也无法使用。

所以我的问题是：如果页面被刷新，是否有可能/破解如何保持我的 websocket 连接打开？这样我就不必重新初始化与服务器的连接？

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

简单的答案 - 最好的解决方案是更改您的服务器部分，以便它可以处理连接丢失和恢复（并使用 cookie 来保留“会话 ID”或其他内容）。

因为我看不出任何从字面上实现这一目标的要求。甚至更多 - 您可以松动连接不是因为引用而是因为连接问题（但您可以弄清楚其中发生了哪些）

【讨论】：

【解决方案2】：

我在https://crossbario.com/blog/Websocket-Persistent-Connections/ 上找到了一个有趣的解决方案。它可以通过 SharedWorker 来实现。在您的页面中，您可以通过以下方式启动它：

var worker = new SharedWorker("worker.js");
 
worker.port.addEventListener("message", function(e) {
   // process messages
}, false);
 
worker.port.start();
 
worker.port.postMessage("myMessageContent");

您的 worker.js 部分如下所示：

self.addEventListener("connect", function (e) {
   var port = e.ports[0];
   port.start();
 
   port.addEventListener("message", function (e) {
      port.postMessage("response");
   }, false);
 
}, false);

完整的解决方案可以在https://github.com/goeddea/scratchbox/tree/master/test_cases/shared_webworkers找到

不幸的是，根据https://caniuse.com/sharedworkers - SharedWorker 仅适用于 Chrome、Edge、Firefox 和 Opera 的桌面版本。

【讨论】：