浏览器跨 Tab 窗口通信原理

前言

原文地址：浏览器跨 Tab 窗口通信原理及应用实践

作者是Chokcoco 一位css大牛。之前就从大佬的文章中学到了不少东西，最近大佬写了篇 浏览器跨 Tab 窗口通信原理及应用实践 感觉挺有意思的，自己打算学习记录一下。

文章中提出了三种方式，这里只学习第一种方式：Broadcast Channel

Broadcast Channel

Broadcast Channel是一种用于发送消息给多个订阅者的通信机制，在Web开发中常用于实现实时通信和消息推送功能。通过Broadcast Channel，一个消息可以同时传递给多个订阅者，而不需要它们之间直接建立连接。这种方式可以减少网络负载和提高效率，适用于需要将同一消息发送给多个客户端的场景。

在Web开发中，Broadcast Channel通常结合WebSockets或者Service Workers等技术一起使用，以实现实时通信和消息推送。开发者可以使用Broadcast Channel API来创建一个频道，并向其中发送消息，所有订阅了该频道的客户端都会接收到这些消息。这种方式可以方便地实现聊天室、实时数据更新等功能。

需要注意的地方是：Broadcast Channel 遵循浏览器的同源策略。这意味着只有在同一个协议、主机和端口下的窗口才能正常进行通信。如果窗口不满足同源策略，将无法互相发送和接收消息。

<template>
  <div class="box">
    <div>sum的值是：{{ sum }}</div>
    <el-button type="primary" @click="addFn">加1</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const sum = ref(0);
let broadcastChannel;

onMounted(() => {
  createBroadcastChannel();
});

// 创建BroadcastChannel 对象
const createBroadcastChannel = () => {
  broadcastChannel = new BroadcastChannel("test");
  // 监听消息
  broadcastChannel.onmessage = (e) => {
    console.log(e);
    if (e.currentTarget.name == "test") {
      // 更新数据
      sum.value = e.data.data;
    }
  };
};

// 发送消息
const sendMsg = (data) => {
  broadcastChannel.postMessage({
    data: data,
  });
};

const addFn = () => {
  sum.value += 1;
  // 发消息，同步信息
  sendMsg(sum.value);
};
</script>

效果图

应用
关于应用的话，暂时没遇到过。不过可以当一个知识储备。