实现多个页面之间通信的常用方式

最新推荐文章于 2025-11-29 16:33:48 发布

原创

最新推荐文章于 2025-11-29 16:33:48 发布 · 4.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#多页面之间通信 #websocket

本文介绍了利用WebSocket和SharedWorker实现多页面之间的通信。WebSocket用于双向实时通信，而SharedWorker可在同源的多个标签页间共享，通过事件监听和消息传递实现通信。文章详细讲解了两者的工作原理及示例代码，帮助理解这两种通信方式。

websocket协议
localstorage
html5浏览器的新特性

1、websocket

 全双工(full-duplex)通信自然可以实现多个标签页之间的通信，
相信网上通过websocket实现聊天室的教程也不少（用来实现双向通信，客户端和服务端实时通信）
//初始化一个node项目：node init，一路确认就可以,文件夹会自动创建一个package.json文件

监听
//获得WebSocketServerr类型
var WebSocketServer = require(‘ws’).Server;
//创建WebSocketServer对象实例，监听指定端口
var wss = new WebSocketServer({ port:8080 });
//创建保存所有已连接到服务器的客户端对象的数组
var clients=[];

//为服务器添加connection事件监听，当有客户端连接到服务端时，立刻将客户端对象保存进数组中
wss.on('connection', function (client) {
      console.log("一个客户端连接到服务器")
      if(clients.indexOf(client)===-1){//如果是首次连接
            clients.push(client) //就将当前连接保存到数组备用
            console.log("有"+clients.length+"客户端在线")
       //为每个client对象绑定message事件，当某个客户端发来消息时，自动触发
       client.on('message',function(msg){
             console.log('收到消息'+msg)
            //遍历clients数组中每个其他客户端对象，并发送消息给其他客户端