JavaScript中跨标签页通信的常见方式

// 创建一个 Shared Worker
const worker = new SharedWorker('worker.js');

// 监听来自 Shared Worker 的消息
worker.port.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};

// 向 Shared Worker 发送消息
worker.port.postMessage('Hello from main page!');

// 监听来自主页面的消息
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // 监听来自主页面的消息
  port.onmessage = function(event) {
    console.log('Received message from main page:', event.data);
    
    // 向主页面发送消息
    port.postMessage('Hello from shared worker!');
  };
};

// 打开或创建 IndexedDB 数据库
const request = indexedDB.open('messageDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  
  // 创建一个对象存储空间用于存储消息
  db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 向数据库中添加一条新消息
  const transaction = db.transaction(['messages'], 'readwrite');
  const objectStore = transaction.objectStore('messages');
  
  const message = { content: 'Hello from sender!' };
  
  objectStore.add(message);
  
  transaction.oncomplete = function() {
    console.log('Message sent successfully!');
    
    // 关闭数据库连接
    db.close();
  };
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

// 打开或创建 IndexedDB 数据库
const request = indexedDB.open('messageDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 创建一个定时器，每隔一段时间轮询数据库中的消息
  setInterval(function() {
    // 创建一个事务
    const transaction = db.transaction(['messages'], 'readwrite');
    const objectStore = transaction.objectStore('messages');
    
    // 获取存储在对象存储中的所有消息
    const request = objectStore.getAll();
    
    request.onsuccess = function(event) {
      const messages = event.target.result;
      
      // 处理消息
      messages.forEach(function(message) {
        console.log('Received message:', message.content);
        
        // 在处理完消息后，删除该消息
        objectStore.delete(message.id);
      });
      
      // 关闭事务
      transaction.oncomplete = function() {
        console.log('Messages processed successfully!');
      };
    };
    
    request.onerror = function(event) {
      console.error('Error retrieving messages:', event.target.error);
      
      // 关闭事务
      transaction.abort();
    };
  }, 1000);
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

// 设置一个 Cookie，将消息存储在 Cookie 中
document.cookie = 'message=Hello from sender!';

// 创建一个定时器，每隔一段时间轮询 Cookie 中的数据
setInterval(function () {
  // 获取存储在 Cookie 中的消息
  const cookies = document.cookie.split(';')
  let message = ''

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim()

    if (cookie.startsWith('message=')) {
      message = cookie.substring('message='.length)
      break
    }
  }

  // 处理消息
  if (message) {
    console.log('Received message:', decodeURIComponent(message))

    // 清除 Cookie
    document.cookie = 'message=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
  }
}, 1000)

// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://example.com');
// 监听连接成功的事件
socket.onopen = function() {
 // 发送消息到服务器
  socket.send('Hello from sender!');
};

// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://example.com');
// 监听来自服务器的消息
socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 创建一个 WebSocket 服务器
const WebSocketServer = require('ws').Server
const wss = new WebSocketServer({ port: 8080 })
// 监听来自客户端的连接
wss.on('connection', function (socket) {
  // 监听来自客户端的消息
  socket.on('message', function (message) {
    console.log('Received message:', message)

    // 向所有客户端发送消息
    wss.clients.forEach(function (client) {
      client.send(message)
    })
  })
})