聊聊页面间的通信机制

在浏览器中会涉及到一些跨页面的通信来完成一些特定的业务逻辑，下面梳理下一些跨页面通信相关的技术点。

postMessage

postMessage用法解释

otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow 其他窗口的引用,比如iframe的contentWindow、执行window.open的返回的窗口对象、window.parent获取的父窗口对象。利用window.open返回的窗口对象可以实现跟新窗口的通信
message 需要发送的数据，它会被结构化克隆算法序列化,无法被结构化克隆的数据会导致异常或者丢失属性，比如函数/原型链的丢失等
targetOrigin 指定哪些源可以接收数据，这里就可以实现跨源的通信和安全控制
transfer 可选的Transferable对象

父子窗口通信

父窗口发送消息给子窗口

在父窗口通过获取子iframe的conentWindow获取子窗口的引用，调用postMessage方法就可以实现对子窗口发送消息

// 父窗口发送消息
iframe.contentWindow.postMessage('message from parent', '*')

// 子窗口监听消息
window.addEventListener('message', function (event) {
  // 处理接收到的消息
  console.log(event.data)
})

子窗口发送消息给父窗口

子窗口通过window.parent获取父窗口的引用，调用postMesage方法就可以实现对父窗口发送消息

// 子窗口发送消息
window.parent.postMessage('message from child', '*')

// 父窗口监听消息
window.addEventListener('message', function (event) {
  // 处理接收到的消息
  console.log(event.data)
})

浏览器不同tab间通信

跨tab通信有可能涉及到不同tab的数据同步逻辑,是一个相对常见的场景

localStorage

sessionStrage在chrome中打开同源的tab时候不会共享sessionStorage,所以主要介绍localStorage的实现方案.localStorage是在同域名下共享的浏览器存储，在同域的不同tab下监听localStorage的storage事件就可以实现跨tab通信

// 在第一个标签页中设置数据到 sessionStorage 中
sessionStorage.setItem('message', 'Hello from Tab 1!')

// 第二个标签页也打开当前页面 监听 storage 事件 接收其他标签页的数据
window.addEventListener('storage', function (event) {
  // event上有key-存储的键值  newValue-修改后的新值  oldValue-修改前的旧值
  if (event.key === 'message') {
    console.log('Received message in Tab 1:', event.newValue)
  }
})

WebSocket

这种方案依赖需要依赖服务服务端

// 建立websocke连接
const socket = new WebSocket('ws://localhost:8080')

// 连接建立，跟服务端发送事件，服务端对所有连接的websocket client广播事件
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!')
})

// 接收事件消息
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data)
})

使用websocket这种方案相对重,除非已有websocket长连接并且需要考虑websocket的断连造成的通信失败

BroadcastChannel

BroadcastChannel可以做到同源窗口间的通信能力.它基于发布-订阅的模式实现消息通知。

// 发送方逻辑
// 创建BroadcastChannel 在实现跨tab通信的时候，创建BroadcastChannel的channelName需要是一个
const channel = new BroadcastChannel('myChannel')

// 发送消息到其他标签页
channel.postMessage('Hello from Tab 1!')

// 监听方逻辑
// 创建BroadcastChannel 与发送方channelName一致
const channe2 = new BroadcastChannel('myChannel')
// 监听消息
channe2.onmessage = function (event) {
  console.log('Received message in Tab 2:', event.data)
}

Service Worker/SharedWorker

Service Worker和SharedWorker方案类似，都是运行worker实现消息通信，下面主要举例SharedWorker的实现方案。

定义worker脚本

// shared-worker.js
// 定义一个变量来保存所有连接的客户端
let clients = []

// 监听连接事件
self.addEventListener('connect', function (event) {
  // 获取与该连接关联的端口
  const port = event.ports[0]

  // 将端口添加到客户端列表中
  clients.push(port)

  // 监听来自客户端的消息
  port.addEventListener('message', function (event) {
    // 广播消息给所有其他客户端
    clients.forEach(function (client) {
      if (client !== port) {
        client.postMessage(event.data)
      }
    })
  })

  // 监听客户端关闭事件
  port.addEventListener('close', function () {
    // 从客户端列表中移除关闭的端口
    clients = clients.filter(function (client) {
      return client !== port
    })
  })

  // 向客户端发送连接成功消息
  port.postMessage('Connected to SharedWorker.')
})

页面中加载脚本

// 在你的网页中连接到 SharedWorker
const worker = new SharedWorker('shared-worker.js')

// 监听连接成功事件
worker.port.addEventListener('message', function (event) {
  console.log('Received message:', event.data)
})