我可能已经为自己回答了这个问题,但我需要进行健全性检查...
我有一个选项卡每 500 毫秒通过广播 channel 向另一个选项卡广播一次。第二个选项卡设置为接收广播并将其打印在控制台日志中。
发送选项卡:
const crossTraffic = new BroadcastChannel('crossTraffic');
const queueInterval = setInterval(function(){
crossTraffic.postMessage({action: 'keepalive', cTime: Date.now()});
console.log(`cTime sent ${Date.now()}`);
}
},500);
接收选项卡:
const crossTraffic = new BroadcastChannel('crossTraffic');
crossTraffic.onmessage = function(e){
if (e.data.action === 'keepalive'){
console.log(`ctime received ${e.data.cTime}`);
}
}
我观察到以下情况:无论我将queueInterval时间设置为多少,接收选项卡接收广播的次数绝不会超过每1,000毫秒一次。
这是广播 channel 的正常行为还是可以以小于 1,000 毫秒的间隔接收消息?
最佳答案
这是一个与我想象的不同的问题......
事实证明,不是焦点的选项卡(至少在 Chrome 中)仅限于每秒更新一次。如果我打开单独的窗口并向另一个窗口广播,则每条消息都会以我选择的任何时间间隔到达(测试时间为 100 毫秒)。
这是我在发送窗口/选项卡上测试时使用的修改后的代码:
const crossTraffic = new BroadcastChannel('crossTraffic');
var queueInterval;
var count = 0;
queueInterval = setInterval(function(){
count++
if (count >= 100){
clearInterval(queueInterval);
}
crossTraffic.postMessage({action: 'keepalive', cTime: Date.now(), count: count});
console.log(`cTime sent ${Date.now()}`);
}
},100);
以及修改后的接收器:
const crossTraffic = new BroadcastChannel('crossTraffic');
crossTraffic.onmessage = function(e){
if (e.data.action === 'keepalive'){
console.log(`ctime received ${e.data.cTime}, #${e.data.count}`);
}
}
您会发现,如果发送者和接收者都是同一窗口中的选项卡,则接收者每秒仅记录一次,但所有 100 条消息都将被发送和接收。
然后,将其中一个选项卡拉出到其自己的窗口中并将它们并排放置,观察它们的日志:消息将以 100 毫秒的间隔发送和接收。
总的来说,这是个好消息,因为我担心广播 channel 有一些我不知道的严格限制。
现在确定如何强制后台选项卡每秒更新一次以上...
关于javascript - JavaScript 的广播 channel 是否限制为每秒接收一条消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59940161/