聊聊页面间的通信机制

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

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);
        });

cookies

这种方案不大推荐，涉及到js可以通过脚本对cookies进行读写