angular - Javascript: Hämta antal prenumeranter på BroadcastChannel

Hur ser jag om en sändningskanal finns och dess antal prenumeranter?

Vi har en produktlänk, och några Chrome-sidflikar prenumererar på en Broadcast-kanal. Vill se hur många som lyssnar.

const bc = new window.BroadcastChannel('channel_name');

Resurser:

https://medium.com/javascript-in-plain-english/using-javascript-and-the-broadcast-channel-api-a3134739781d

Kommunikation mellan flikar eller fönster

Använder Angular Typescript-miljö, kanske har det en bibliotekfunktion

Svar #1

Det finns inget inbyggt sätt att få antalet aktiva portar som är anslutna genom samma BroadcastChannel.

Du skulle kunna sätta upp något på egen hand, t.ex. genom att använda någon form av pingmetod där alla portar skulle svara och den som frågar bara behöver räkna svaren på en viss tid, men det är lite besvärligt, gör allt asynkront och att faktiskt använda LocalStorage bara för denna räkning verkar vara det enklaste sättet.

Du kan lagra det aktuella antalet av varje kanal du öppnar i localStorage.

Innan varje ny anslutning kan sidan bara kontrollera det värdet, eftersom det kommer att delas mellan de kontexter som kan kommunicera genom BroadcastChannel.

const active_connections = localStorage[ channel_name ] || 0;

Då när man ansluter, behöver det bara uppdatera det värdet.

if( active_connections < max_count ) {
  const channel = new BroadcastChannel( channel_name );
  localStorage[ channel_name ] = active_connections + 1;
}

Och det mest kluriga är att minska det antalet när kanalen stängs. För det behöver du ansluta till beforeunload-händelsen:

addEventListener( 'beforeunload', (evt) => {
  localStorage[ channel_name ] --;
} );

Observera att om din kod faktiskt anropar channel.close(), bör du också lägga till en rad för att uppdatera den räkningen där och för att inaktivera beforeunload-en.

(Du kan fortfarande köra pingningen också för att säkerställa att räkningarna fortfarande är korrekta, eftersom till exempel om en sida kraschar, kan beforeunload inte ha utlösts).

Jag bör nämna att jag inte kan se varför du skulle behöva göra något sådant, troligtvis är något fel i din design, du bör dubbelkolla det, och kanske öppna en ny fråga om det)

Relaterade artiklar