- Umožňuje obousměrnou komunikaci v reálném čase mezi okny, kartami, prvky iframe a workery na stejném místě.
- Využívá model publikování a odběru, kde se kontexty přihlašují k odběru pojmenovaného kanálu pro výměnu dat.
- Využívá algoritmus strukturovaného klonování k přenosu složitých objektů bez ruční serializace.
Přemýšleli jste někdy, jak některé webové stránky okamžitě poznají, kdy jste se odhlásili na jiné kartě, nebo jak se nákupní košík aktualizuje ve třech různých oknech bez jediného obnovení stránky? Vývojáři se dlouho museli spoléhat na neohrabaná řešení, jako je dotazování serveru nebo hackování událostí localStorage. Naštěstí existuje nativní a elegantní řešení zabudované přímo v prohlížeči, které tuto těžkou práci zvládá bez jakýchkoli knihoven třetích stran.
Rozhraní Broadcast Channel API funguje jako odlehčená sběrnice zpráv, která umožňuje různým kontextům prohlížení – jako jsou karty, prvky iframe a webové procesy – vzájemně komunikovat, pokud sdílejí stejný zdroj (tj. stejný protokol, doménu a port). Je to převratný způsob, jak vytvářet reaktivní webové aplikace, které působí jako jeden, ucelený zážitek, nikoli jako sbírka izolovaných stránek.
Jak vlastně funguje API vysílacího kanálu
V jádru se toto API točí kolem konceptu pojmenovaný kanálPředstavte si to jako rádiovou frekvenci; každé okno nebo pracovník, který se naladí na stejnou frekvenci, slyší, co vysílají všichni ostatní. Když vytvoříte instanci BroadcastChannel objekt s konkrétním názvem, v podstatě jste přihlášení k odběru daného kanáluPokud kanál ještě neexistuje, prohlížeč si ho vytvoří za chodu.
Odesílání dat je neuvěřitelně jednoduché. Voláním postMessage() metoda, můžete odeslat zprávu všem ostatním kontextům, které aktuálně poslouchají. Jednou z nejlepších věcí je, že používá algoritmus strukturovaného klonováníTo znamená, že se neomezujete jen na řetězce; můžete odeslat složité objekty, pole, mapy, množiny nebo dokonce objekty BLOB bez nutnosti ručního spouštění JSON.stringify() or JSON.parse(), což šetří spoustu času na zpracování.
Základní metody a zpracování událostí
Abyste se do toho pustili, začněte vytvořením kanálu: const myChannel = new BroadcastChannel('app_sync');Pro příjem příchozích dat je nutné nastavit onmessage obsluha události nebo použití addEventListener('message', ...)Když dorazí zpráva, objekt události obsahuje data majetek uchovávající přenášené informace.
postMessage(data)Odešle zadaný objekt všem ostatním připojeným odběratelům.close()Toto je klíčový krok pro správu paměti. Volání této metody odpojí objekt z kanálu, což umožňuje garbage collectoru prohlížeče vyčistit zdroje.nameVlastnost pouze pro čtení, která umožňuje ověřit, ke kterému kanálu je objekt aktuálně propojen.
Je důležité si uvědomit, že vysílající server neobdrží vlastní zprávu . Pokud odešlete zprávu z karty A, pouze karty B a C spustí události zpráv. To je obrovská výhoda, protože se tím zabrání nekonečným smyčkám , které často trápí vývojáře při práci s webovými sokety nebo jinými mechanismy zpětné smyčky.
Porovnání vysílacího kanálu s jinými API
Možná si říkáte: „Proč prostě nepoužívat window.postMessage()„Zatímco postMessage() je silný, vyžaduje přímý odkaz do cílového okna (jako vyskakovací okno nebo iframe). Rozhraní Broadcast Channel API je systém typu „spustit a zapomenout“; nemusíte vědět, kdo poslouchá, takže výrazně flexibilnější pro scénáře s více záložkami.
Ve srovnání se SharedWorkers je Broadcast Channel mnohem jednodušší. SharedWorkers se skvěle hodí pro správu složitých sdílených stavů nebo jednoho WebSocket připojení pro více karet, ale pro lehká oznámení nebo synchronizaci stavů je Broadcast Channel tou správnou cestou. Podobně, zatímco MessageChannel API je navrženo pro komunikaci jeden na jednoho prostřednictvím portů, Broadcast Channel je vytvořen pro vysílání jeden na mnoho.
Případy použití v reálném světě a praktická implementace
Existuje nespočet způsobů, jak to uvést do praxe. Klasickým příkladem je synchronizace stavů ověřování . Když uživatel klikne na tlačítko „Odhlásit se“ na jedné kartě, můžete odeslat zprávu „auth_logout“, která všechny ostatní otevřené karty okamžitě přesměruje na přihlašovací stránku.
Mezi další chytré aplikace patří:
- Nákupní vozíkyAktualizovat počet položek v záhlaví na všech kartách v okamžiku, kdy uživatel přidá produkt.
- Uživatelské předvolbyPokud uživatel v jednom okně přepne do „tmavého režimu“, můžete spustit změnu tématu okamžitě v celé relaci.
- Nástroje pro spolupráciSynchronizace pozic kurzoru nebo změn textu ve sdíleném editoru dokumentů pro bezproblémový živý zážitek.
- Koordinace servisních pracovníkůPokyn servisnímu workerovi k vymazání mezipaměti nebo aktualizaci zdrojů bez nutnosti ručního procházení všech aktivních klientů pomocí
self.clients.matchAll().
Omezení a kompatibilita
Navzdory své užitečnosti je třeba mít na paměti několik varovných prvků. Zaprvé, je to striktně stejného původu . Z bezpečnostních důvodů to nelze použít pro komunikaci s jinou doménou. Zadruhé, neexistuje žádná historie zpráv ; pokud se karta připojí ke kanálu pozdě, neuvidí zprávy odeslané před připojením. A konečně, neposkytuje žádné záruky doručení , takže pokud potřebujete potvrzení, že zpráva byla přijata, budete si muset vytvořit vlastní potvrzovací protokol.
Pokud jde o podporu prohlížečů, toto API je nyní součástí široce dostupné základní linie , což znamená, že je podporováno všemi moderními verzemi Chrome, Firefoxu a Safari. Pokud potřebujete podporovat starší prohlížeče, budete muset hledat polyfilly, i když pro většinu moderních projektů je připraveno pro produkční použití.
Implementací tohoto API se vývojáři mohou zbavit neefektivních hacků s úložištěm a vytvořit vysoce synchronizované uživatelské prostředí . Zjednodušuje architekturu aplikací s více okny tím, že poskytuje nativní, bezpečný a výkonný způsob, jak zvládat komunikaci v reálném čase v prohlížeči klienta.
