2022-09-19HTML00
请注意,本文编写于 572 天前,最后修改于 572 天前,其中某些信息可能已经过时。

如何实现浏览器内多个标签页之间的通信?

相关资料:

 (1)使用 WebSocket,通信的标签页连接同一个服务器,发送消息到服务器后,服务器推送消息给所有连接的客户端。

 (2)使用 SharedWorker (只在 chrome 浏览器实现了),两个页面共享同一个线程,通过向线程发送数据和接收数据来实现标
     签页之间的双向通行。

 (3)可以调用 localStorage、cookies 等本地存储方式,localStorge 另一个浏览上下文里被添加、修改或删除时,它都会触
     发一个 storage 事件,我们通过监听 storage 事件,控制它的值来进行页面信息通信;

 (4)如果我们能够获得对应标签页的引用,通过 postMessage 方法也是可以实现多个标签页通信的。

回答:

 实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信,因此我们可以找一个中介者,
 让标签页和中介者进行通信,然后让这个中介者来进行消息的转发。

 第一种实现的方式是使用 websocket 协议,因为 websocket 协议可以实现服务器推送,所以服务器就可以用来当做这个中介者。
 标签页通过向服务器发送数据,然后由服务器向其他标签页推送转发。

 第二种是使用 ShareWorker 的方式,shareWorker 会在页面存在的生命周期内创建一个唯一的线程,并且开启多个页面也只会使
 用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程,然后通过这个共享的线程来实现数据的交
 换。

 第三种方式是使用 localStorage 的方式,我们可以在一个标签页对 localStorage 的变化事件进行监听,然后当另一个标签页
 修改数据的时候,我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。

 还有一种方式是使用 postMessage 方法,如果我们能够获得对应标签页的引用,我们就可以使用 postMessage 方法,进行通信。

详细的资料可以参考:

《WebSocket 教程》 《WebSocket 协议:5分钟从入门到精通》 《WebSocket 学习(一)——基于 socket.io 实现简单多人聊天室》 《使用 Web Storage API》 《JavaScript 的多线程,Worker 和 SharedWorker》 《实现多个标签页之间通信的几种方法》

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!