angular - Javascript: Få antall abonnenter på BroadcastChannel

Hvordan kan jeg vite om en kringkastingskanal eksisterer og hvor mange abonnenter den har?

Vi har en produktlenke, og noen Chrome-nettsidefaner abonnerer på en Broadcast-kanal. Vil se hvor mange som lytter.

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

Ressurser:

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

Kommunikasjon mellom faner eller vinduer

Ved å bruke Angular Typescript-miljøet, kanskje det har en biblioteksfunksjon

Svar #1

Det finnes ingen innebygd måte å få antall aktive porter koblet gjennom samme BroadcastChannel.

Du kunne sette opp noe på egen hånd, for eksempel ved å bruke en slags ping-metode hvor alle portene svarer og den som spør bare må telle svarene på en gitt tid, men det er litt tungvint, gjør alt asynkront, og faktisk å bruke LocalStorage bare for denne tellingen virker som den enkleste måten.

Du kan lagre i localStorage den nåværende telleverdien for hver kanal du åpner.

Før hver ny tilkobling kan siden bare sjekke den verdien, siden den vil bli delt på tvers av kontekster som kan kommunisere gjennom BroadcastChannel.

const active_connections = localStorage[ channel_name ] || 0;

Da, når man kobler til, må det bare oppdatere den verdien.

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

Og det mest utfordrende er å redusere det antallet når kanalen lukkes. Til det må du koble deg til beforeunload-hendelsen:

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

Merk at hvis koden din faktisk kaller channel.close(), bør du legge til en linje for å oppdatere den tellingen der også, og for å deaktivere beforeunload.

(Du kan fortsatt kjøre pingingen også for å sikre at telleverdiene fortsatt er riktige, siden f.eks. hvis en side krasjer, kan beforeunload ha ikke blitt utløst).

Jeg bør merke meg at jeg ikke kan se hvorfor du skulle trenge å gjøre noe slikt, sannsynligvis er det noe som er galt i designet ditt, du bør dobbeltsjekke det, og kanskje åpne et nytt spørsmål om det)

Relaterte artikler