How to maintain a WebSockets connection between pages?

维护页面之间的WebSockets连接主要涉及两个方面：首先是确保WebSocket连接在页面切换时不中断；其次是在多个页面或标签之间共享同一个WebSocket连接。以下是一些具体的策略和实践：

1. 利用SharedWorker来共享WebSocket连接

使用SharedWorker可以跨多个浏览器标签或iframe共享WebSocket连接。SharedWorker允许不同的文档（即使是不同源的）运行同一个worker脚本，这样就可以通过它来维持WebSocket连接，实现消息的统一管理和分发。

实例：

javascript
// shared-worker.js
let socket = new WebSocket("wss://example.com/socket");
socket.onmessage = function(event) {
    postMessage(event.data);
};

onconnect = function(e) {
    let port = e.ports[0];

    port.onmessage = function(event) {
        if (event.data === "close") {
            socket.close();
        } else {
            socket.send(event.data);
        }
    };
};

// 在页面中使用SharedWorker
let worker = new SharedWorker('shared-worker.js');
worker.port.start();

worker.port.postMessage("你好，服务器！");
worker.port.onmessage = function(event) {
    console.log('从服务器收到消息: ' + event.data);
};

2. 在单页应用（SPA）中维持WebSocket连接

在单页应用中，用户在应用内部导航时，并不会真正的进行页面的重新加载，这样可以很容易地维护WebSocket连接。只需要确保WebSocket连接是在应用的顶层组件中初始化和维护，而不是依赖于某个会被销毁的子组件。

实例：

javascript
// 使用React为例
import React, { useEffect, useState } from 'react';

function App() {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = new WebSocket("wss://example.com/socket");
    setSocket(newSocket);

    return () => newSocket.close();
  }, []);

  // socket可以被全局使用，不会因为页面切换而断开
  return (
    <div>你的应用内容</div>
  );
}

3. 使用localStorage或sessionStorage进行状态共享

通过在localStorage或sessionStorage存储WebSocket的状态或必要信息（如最后的心跳时间等），可以在页面重新加载后快速恢复WebSocket连接状态，或者判断是否需要重新连接。

实例：

javascript
if (sessionStorage.getItem("isConnected") !== "true") {
  let socket = new WebSocket("wss://example.com/socket");
  sessionStorage.setItem("isConnected", "true");

  socket.onclose = function() {
    sessionStorage.setItem("isConnected", "false");
  };
}

通过以上方法，我们可以有效地维护一个稳定的WebSocket连接，即使在复杂的多页面或标签环境中，也能保证数据的实时性和准确性。