Question

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

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

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

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

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

我想到的一些可能性是：

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

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

Answer 1

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

因为我看不出任何要求实现这一点。甚至更多 - 你可以放松连接不是因为引用而是因为连接问题（但你可以弄清楚它们中发生了哪些）

Answer 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中工作。

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

2 个答案: