利用BroadcastChannel与postMessage, 实现前端多页面间实时数据通信
// 在一个页面中发送数据
const broadcastChannel = new BroadcastChannel('channelName');
broadcastChannel.postMessage({ key: 'value' });
// 在另一个页面中接收数据
const broadcastChannel = new BroadcastChannel('channelName');
broadcastChannel.onmessage = function(event) {
console.log('收到数据:', event.data);
};
这段代码演示了如何使用BroadcastChannel API在同一浏览器的不同页面之间进行实时通信。第一个页面创建了一个BroadcastChannel实例,并通过postMessage
方法发送消息。第二个页面同样创建了一个BroadcastChannel实例,并监听onmessage
事件以接收传递过来的数据。这种方法不需要服务器参与,适用于简单的前端通信场景。
评论已关闭