How to maintain a WebSockets connection between pages?

Maintaining WebSockets connections between pages primarily involves two aspects: first, ensuring WebSocket connections do not disconnect during page navigation; second, sharing a single WebSocket connection across multiple pages or tabs. The following are some specific strategies and practices:

1. Using SharedWorker to share WebSocket connections

SharedWorker enables multiple browser tabs or iframes to share a WebSocket connection. It allows different documents (even from different origins) to run the same worker script, facilitating the maintenance of WebSocket connections and unified management and distribution of messages.

Example:

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);
        }
    };
};

// Using SharedWorker in the page
let worker = new SharedWorker('shared-worker.js');
worker.port.start();

worker.port.postMessage("Hello, server!");
worker.port.onmessage = function(event) {
    console.log('Received message from server: ' + event.data);
};

2. Maintaining WebSocket connections in Single-Page Applications (SPAs)

In Single-Page Applications, users navigate within the application without actual page reloads, making it easy to maintain WebSocket connections. Ensure that the WebSocket connection is initialized and maintained in the top-level component of the application, rather than relying on a child component that may be destroyed.

Example:

javascript
// Using React as an example
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();
  }, []);

  // The socket can be globally used and will not disconnect during page navigation
  return (
    <div>Your application content</div>
  );
}

3. Using localStorage or sessionStorage for state sharing

By storing WebSocket state or necessary information (such as the last heartbeat time) in localStorage or sessionStorage, you can quickly restore the WebSocket connection state after page reload or determine if reconnection is needed.

Example:

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");
  };
}

By employing these methods, we can effectively maintain a stable WebSocket connection, ensuring real-time and accurate data transmission even in complex multi-page or tab environments.