1

我可能已经为自己回答了这个问题，但我需要进行理智检查......

我有一个标签每 500 毫秒通过广播频道广播到另一个标签。第二个选项卡设置为接收广播并在控制台日志中打印它们。

发送选项卡：

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 毫秒接收一次以上的广播。

这是广播频道的正常行为还是可以以小于 1,000 毫秒的间隔接收消息？

4

1 回答 1

3

这个问题跟我想的不一样。。。

事实证明，不是焦点的标签（至少在 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 毫秒的间隔发送和接收。

总的来说，这是个好消息，因为我担心广播频道有一些我不知道的严格限制。

现在确定如何强制后台选项卡每秒更新一次以上...

于 2020-01-28T02:17:57.917 回答