SharedWorker结合WebSocket实现多窗口共享消息

// sharedWorker.js 文件

let connections = {};
let reconnectInterval = 3000; // 重新连接间隔时间，单位：毫秒

onconnect = (event) => {
  const port = event.ports[0];

  port.onmessage = (event) => {
    const data = event.data;

    // console.log(event.data, "event.data"); // 确保这个日志在控制台中显示

    if (data.type === 'connect') {
      connectWebSocket(data.name, data.url, port, data.msg);
    }
  };
};

function connectWebSocket(name, url, port, msg) {
  if (!connections[name]) {
    const ws = new WebSocket(url);

    ws.onopen = () => {
      ws.send(JSON.stringify(msg));

      setHeartbeat(ws, name, url, port, msg);
    }

    ws.onmessage = (event) => {
      if (!event) {
        return
      }

      if (connections[name]) {
        connections[name].forEach(client => {
          client.postMessage({ name: name, data: event.data });
        });
      }
    };

    ws.onclose = () => {
      if (connections[name]) {
        connections[name].forEach(client => {
          client.close();
        });
        delete connections[name];
      }
      ws.close();
    };

    ws.onerror = (error) => {
      // 删除共享线程
      removeWebSocket(name);

      // 重新连接
      setTimeout(() => {
        connectWebSocket(name, url, port, msg);
      }, reconnectInterval);
    };

    connections[name] = new Set();
  }
  // connections[name].delete(port); // 暂时没想到如何删除旧端口连接

  connections[name].add(port);

  // console.log(connections); // 确保这个日志在控制台中显示
}

function setHeartbeat(ws, name, url, port, msg) {
  const heartbeatInterval = 30000; // 心跳间隔时间，单位：毫秒
  const heartbeatMessage = 'ping'; // 心跳消息

  ws.heartbeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(heartbeatMessage);
    } else {
      clearInterval(ws.heartbeatTimer);

      setTimeout(() => {
        connectWebSocket(name, url, port, msg);
      }, reconnectInterval);
    }
  }, heartbeatInterval)
}

function removeWebSocket(name) {
  for ( const connection of connections[name] ) {
    if (!!connection) {
      connection.close();
    }
  }
}

// 放到需要连接的地方

        // 检查是否支持SharedWorker
        if (window.SharedWorker) {
          const worker = new SharedWorker("/js/sharedWorker.js", "自定义");

          const port = worker.port;

          port.postMessage({ type: '', name: '', url: "", msg: "/XXX连接成功" });

          port.postMessage({ type: '', name: '', url: "", msg: "/XXX连接成功" });

          // 传递消息
          port.onmessage = (event) => {
            Utils.$emit("sharedWorkerWssMessage", event.data);
          };
        }

谷歌浏览器打开chrome://inspect/#workers 查看wss进程