Comunicación cruzada JS (en tiempo real)

Durante el proceso de desarrollo, ocasionalmente nos encontramos con requisitos de escenarios especiales. El usuario abre dos pestañas y las opera por separado, y los datos deben ser en tiempo real. En este momento, necesitamos utilizar la comunicación entre pestañas para resolver necesidades similares. He resumido varias soluciones (mismo dominio):

1 localStorage.:

Podemos monitorear localStoragelos cambios y luego implementar la lógica deseada, prohibir el envío repetido y no tendrá efecto.

Remitente:

// 发送一个数据
localStorage.setItem('username', '张三')

Final de escucha:

 // 监听 localstorage 变化
 window.addEventListener('storage', event => {
    
    
   console.log(event)
 })

Como puede ver, localStorageel valor del extremo receptor:

2 webSocket.:

Este método se usa comúnmente en el trabajo, así que omítelo aquí.

3 SharedWorker.:

De manera similar webSocket, necesita tener una terminal similar al servicio de socket

Remitente:

<button id="btn">发送消息</button>

<script>
  // 创建共享线程
  let worker = new SharedWorker('worker.js')

  // 发送消息
  document.getElementById('btn').addEventListener('click', e => {
    
    
    worker.port.postMessage(Math.random()*1000)
  })

  // 接收消息
  worker.port.onmessage = e => {
    
    
    console.log(e.data)
  }

  // 启动线程端口
  worker.port.start()
</script>

Terminal:

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

  port.postMessage('connect')

  port.addEventListener('message', e => {
    
    
    port.postMessage(`handler data：${
      
      parseInt(e.data)}`)
  })

  port.start()
};

chrome://inspect/#workersPuede ver la salida del terminal haciendo inspectclic en Ver. Puede ver que el terminal devuelve los datos después de procesarlos. También admite el envío grupal. Los amigos interesados ​​pueden ir y estudiarlo.

Adjunto la tabla de compatibilidad:

4 postMessage.:

Remitente:

<button id="btn">发送消息</button>

<script>
  let device = window.open('http://localhost:63342/signal_communication/postMessage/receive.html')

  document.getElementById('btn').addEventListener('click', event => {
    
    
    device.postMessage('发送一条消息')
  })
</script>

Extremo de recepción:

<script>
  window.addEventListener('message', event => {
    
    
    console.log(event)
  })
</script>

5 BroadcastChannel.:

Remitente:

<button id="btn">发送消息</button>

<script>
  let device = new BroadcastChannel('username')

  document.getElementById('btn').addEventListener('click', event => {
    
    
    device.postMessage('张三')
  })
</script>

Extremo de recepción:

<script>
  let device = new BroadcastChannel('username')

  device.onmessage = event => {
    
    
    console.log(event)
  }
</script>

6. 'cookie + establecerIntervalo':

No hablaré más de esto, solo usaré el sondeo con temporizador.