跨标签页通信的方式

---

1.BroadcastChannel

代码如下（示例）：

class BroadcastChannelManager {
  constructor(channelName) {
    if (!window.BroadcastChannel) {
      console.error('BroadcastChannel is not supported by this browser.');
      return;
    }

    this.channel = new BroadcastChannel(channelName);
    this.listeners = [];

    this.channel.onmessage = (event) => {
      console.log('Received message:', event.data);
      this.listeners.forEach(listener => listener(event.data));
    };
  }

  sendMessage(message) {
    if (!this.channel) {
      console.error('BroadcastChannel is not initialized or not supported.');
      return;
    }

    // 可以在这里添加消息格式验证
    if (this.validateMessage(message)) {
      this.channel.postMessage(message);
    } else {
      console.error('Invalid message format:', message);
    }
  }

  setOnMessageReceived(callback) {
    if (typeof callback === 'function') {
      this.listeners.push(callback);
    } else {
      console.error('Callback must be a function.');
    }
  }

  validateMessage(message) {
    // 这里定义消息验证逻辑，例如是否为字符串、对象等
    return true; // 默认通过验证
  }

  close() {
    if (this.channel) {
      this.channel.close();
      this.channel = null;
    }
  }
}

使用，代码如下（示例）：

const manager = new BroadcastChannelManager('my_channel');

if (manager.channel) {
  manager.setOnMessageReceived((message) => {
    console.log('Action with:', message);
  });

  manager.sendMessage({ type: 'greeting', text: 'Hello from one tab!' });
}

// 当需要关闭通道时
// manager.close();

2.Service Worker

代码如下（示例）：

class ServiceWorkerManager {
  constructor() {
    // 检查 Service Worker 的支持
    if ('serviceWorker' in navigator) {
      // 注册 Service Worker
      navigator.serviceWorker.register('/sw.js').then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch(error => {
        console.error('Service Worker registration failed:', error);
      });

      // 监听从 Service Worker 来的消息
      navigator.serviceWorker.addEventListener('message', this.handleMessage.bind(this));
    } else {
      console.error('Service Workers are not supported in this browser.');
    }
  }

  // 处理接收到的消息
  handleMessage(event) {
    console.log('Received message from Service Worker:', event.data);
    if (this.onMessage) {
      this.onMessage(event.data);
    }
  }

  // 发送消息到 Service Worker
  sendMessage(message) {
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(message);
    } else {
      console.error('Service Worker controller is not available.');
    }
  }

  // 设置接收消息时的回调函数
  setOnMessage(callback) {
    if (typeof callback === 'function') {
      this.onMessage = callback;
    } else {
      console.error('Callback must be a function.');
    }
  }
}

使用，代码如下（示例）：

const swManager = new ServiceWorkerManager();

// 设置接收消息的回调函数
swManager.setOnMessage((message) => {
  console.log('接收消息', message);
});

// 发送消息到 Service Worker
swManager.sendMessage('Hello world!');

3.SharedWorker

class SharedWorkerManager {
  constructor(workerScript) {
    if (!('SharedWorker' in window)) {
      throw new Error('SharedWorker is not supported in this browser.');
    }

    this.workerScript = workerScript;
    this.worker = new SharedWorker(workerScript);

    this.worker.port.onmessage = (event) => {
      console.log('Received message:', event.data);
      if (this.onMessageReceived) {
        this.onMessageReceived(event.data);
      }
    };
  }

  sendMessage(message) {
    if (this.worker.port) {
      this.worker.port.postMessage(message);
    } else {
      throw new Error('SharedWorker port is not available.');
    }
  }

  setOnMessageReceived(callback) {
    if (typeof callback === 'function') {
      this.onMessageReceived = callback;
    } else {
      throw new Error('Callback must be a function.');
    }
  }
}

使用，代码如下（示例）：

const sharedWorkerManager = new SharedWorkerManager('sharedWorker.js');

sharedWorkerManager.setOnMessageReceived((message) => {
  console.log('Do something with the received message:', message);
});

sharedWorkerManager.sendMessage('Hello from the main script!');

4.WebSocket

class WebSocketManager {
  constructor(url) {
    this.validateURL(url);
    this.socket = new WebSocket(url);

    this.socket.onopen = () => {
      console.log('WebSocket connection established.');
    };

    this.socket.onmessage = (event) => {
      this.handleMessage(event.data);
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket encountered an error:', error);
    };

    this.socket.onclose = () => {
      console.log('WebSocket connection closed.');
      this.handleReconnect();
    };
  }

  validateURL(url) {
    const pattern = /^(ws|wss):\/\/[^\s]*$/;
    if (!pattern.test(url)) {
      throw new Error('Invalid WebSocket URL.');
    }
  }

  sendMessage(message) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(message));
    } else {
      console.log('WebSocket is not open. Message not sent.');
    }
  }

  setOnMessageReceived(callback) {
    this.onMessageReceived = callback;
  }

  handleMessage(data) {
    try {
      const message = JSON.parse(data);
      if (this.onMessageReceived) {
        this.onMessageReceived(message);
      }
    } catch (error) {
      console.error('Error parsing message:', data);
    }
  }

  handleReconnect() {
    // Implement reconnect logic here
    console.log('Attempting to reconnect...');
    this.socket = new WebSocket(this.url);
  }

  close() {
    this.socket.close();
  }
}

使用，代码如下（示例）：

const wsManager = new WebSocketManager('ws://example.com');

wsManager.setOnMessageReceived((message) => {
  console.log('Received:', message);
});

wsManager.sendMessage({ type: 'greeting', text: 'Hello WebSocket!' });

// 关闭连接
wsManager.close();

总结

待续······················