随记之 BroadcastChannel多窗体信息共享

xiaomomi

于 2024-12-05 11:51:39 发布

阅读量121

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/xiaomomi/article/details/144261993

版权

BroadcastChannel 接口表示给定源的任何浏览上下文都可以订阅的命名频道。它允许同源的不同浏览器窗口、标签页、frame 或者 iframe 下的不同文档之间相互通信。消息通过 message 事件进行广播，该事件在侦听该频道的所有 BroadcastChannel 对象上触发，发送消息的对象除外。

  const sharedWorker = useRef<BroadcastChannel | null>(null)

  useEffect(() => {
    sharedWorker.current = new BroadcastChannel("currentTime")
    sharedWorker.current.onmessage = handleMessage
    sharedWorker.current?.postMessage({
        time: new Date().toLocaleTimeString(),
      })
    // 清理工作线程（可选）
    return () => {
      sharedWorker.current?.close()
    }
  }, [])
  function handleMessage(event) {
    console.log("接收到 event", event.data)
    // TODO: 处理接收到信息后的逻辑
  }