- Võimaldab reaalajas kahesuunalist suhtlust akende, vahelehtede, iframe'ide ja töötajate vahel samal päritolukohal.
- Kasutab avaldamise-tellimise mudelit, kus kontekstid tellivad andmete vahetamiseks nimetatud kanali.
- Kasutab struktureeritud kloonialgoritmi keerukate objektide edastamiseks ilma käsitsi serialiseerimiseta.
Kas olete kunagi mõelnud, kuidas mõned veebisaidid näivad koheselt teadvat, kui olete teisel vahelehel välja loginud, või kuidas ostukorv uueneb kolmes erinevas aknas ilma ühegi lehe värskendamiseta? Pikka aega pidid arendajad lootma kohmakatele ajutistele lahendustele, nagu serveri küsitlemine või localStorage'i sündmuste häkkimine. Õnneks on brauserisse sisse ehitatud elegantne lahendus, mis selle raske tööga hakkama saab ilma kolmandate osapoolte teekideta.
Broadcast Channel API toimib kerge sõnumisiinina, võimaldades erinevatel sirvimiskontekstidel – näiteks vahekaartidel, iframe'idel ja veebitöötajatel – omavahel suhelda, kui neil on sama päritolu (st sama protokoll, domeen ja port). See muudab mängu reaktiivsete veebirakenduste loomisel, mis tunduvad ühtse ja sidusa kogemusena, mitte isoleeritud lehtede kogumina.
Kuidas ringhäälingukanali API tegelikult töötab
Selle API tuumaks on kontseptsioon a nimetatud kanalKujutage seda ette nagu raadiosagedust; iga aken või töötaja, kes häälestub samale sagedusele, kuuleb seda, mida kõik teised edastavad. Kui loote eksemplari... BroadcastChannel kindla nimega objekt, oled sa sisuliselt selle kanali tellimineKui kanalit veel pole, loob brauser selle lennult.
Andmete saatmine on uskumatult lihtne. Helistades numbrile postMessage() meetod, saate sõnumi saata igale teisele hetkel kuulavale kontekstile. Üks lahedamaid osi on see, et see kasutab struktureeritud kloonialgoritmSee tähendab, et te ei pea piirduma ainult stringidega; saate saata keerulised objektid, massiivid, Map, Set või isegi Blobid ilma et peaks käsitsi käivitama JSON.stringify() or JSON.parse(), mis säästab tohutult töötlemisaega.
Olulised meetodid ja sündmuste käsitlemine
Asjade liikuma panemiseks alustate kanali loomisest: const myChannel = new BroadcastChannel('app_sync');Sissetulevate andmete vastuvõtmiseks seadistate onmessage sündmuste käitleja või kasutage addEventListener('message', ...)Kui sõnum saabub, sisaldab sündmuseobjekt a data edastatud teavet hoidev vara.
postMessage(data): Saadab määratud objekti kõigile teistele ühendatud abonentidele.close()See on mäluhalduse seisukohalt ülioluline samm. Selle meetodi kutsumine lahutab objekti kanalilt, võimaldades brauseri prügikogujal ressursse puhastada.name: Kirjutuskaitstud atribuut, mis võimaldab teil kontrollida, millise kanaliga objekt on hetkel lingitud.
Oluline on märkida, et edastaja ei saa oma sõnumit kätte . Kui saadate sõnumi vahelehelt A, käivitavad ainult vahelehed B ja C oma sõnumisündmused. See on tohutu võit, sest see hoiab ära lõputud tsüklid , mis arendajaid WebSocketite või muude tagasihelistusmehhanismidega töötamisel sageli kimbutavad.
Saatekanali võrdlus teiste API-dega
Sa võid mõelda: "Miks mitte lihtsalt kasutada window.postMessage()? " Kuigi postMessage() on võimas, see nõuab otsene viide sihtaknasse (näiteks hüpikaken või iframe). Broadcast Channel API on „käivita ja unusta” süsteem; te ei pea teadma, kes kuulab, mistõttu on oluliselt paindlikum mitme vahekaardiga stsenaariumide jaoks.
Võrreldes SharedWorkersiga on Broadcast Channel palju lihtsam. SharedWorkers sobib suurepäraselt keerukate jagatud olekute või ühe WebSocket-ühenduse haldamiseks mitme vahelehe jaoks, kuid kergemate teavituste või oleku sünkroonimise jaoks on Broadcast Channel õige valik. Samamoodi, kui MessageChannel API on loodud üks-ühele suhtluseks portide kaudu, on Broadcast Channel loodud üks-mitmele leviedastuse jaoks.
Reaalse maailma kasutusjuhud ja praktiline rakendamine
Selle praktikas rakendamiseks on lugematu arv viise. Klassikaline näide on autentimisolekute sünkroonimine . Kui kasutaja klõpsab ühel vahekaardil nuppu „Logi välja”, saate edastada teate „auth_logout”, mis suunab kõik teised avatud vahekaardid koheselt sisselogimislehele.
Muud nutikad rakendused hõlmavad järgmist:
- Ostukärud: Värskenda päises olevat toodete arvu kõigil vahekaartidel kohe, kui kasutaja toote lisab.
- Kasutaja eelistusedKui kasutaja lülitub ühes aknas tumedale režiimile, saate teemavahetuse käivitamine koheselt kogu seansi ulatuses.
- KoostöötööriistadKursori positsioonide või tekstimuudatuste sünkroonimine jagatud dokumendiredaktoris sujuv otseülekanne.
- Teenindustöötajate koordineerimineTeenuse töötajale käsu andmine vahemälu tühjendamiseks või ressursside värskendamiseks ilma, et oleks vaja kõiki aktiivseid kliente käsitsi läbi käia, kasutades
self.clients.matchAll().
Piirangud ja ühilduvus
Vaatamata selle kasulikkusele on siiski mõned piirded, mida meeles pidada. Esiteks on see rangelt sama päritoluga . Turvalisuse huvides ei saa te seda kasutada teise domeeniga suhtlemiseks. Teiseks puudub sõnumite ajalugu ; kui vahekaart liitub kanaliga hilja, ei näe see enne ühenduse loomist saadetud sõnumeid. Lõpuks ei anna see mingeid kohaletoimetamise garantiisid , seega kui vajate kinnitust sõnumi kättesaamise kohta, peate looma oma kinnitusprotokolli.
Mis puudutab brauserituge, siis see API on nüüd osa laialdaselt kättesaadavast baasjoonest , mis tähendab, et seda toetavad kõik Chrome'i, Firefoxi ja Safari tänapäevased versioonid. Kui teil on vaja toetada vanu brausereid, peate otsima polüfille, kuigi enamiku tänapäevaste projektide jaoks on see tootmiskasutuseks valmis.
Selle API rakendamisega saavad arendajad loobuda ebaefektiivsetest salvestushäkkidest ja luua kõrgelt sünkroniseeritud kasutajakogemuse . See lihtsustab mitme akna rakenduste arhitektuuri, pakkudes kliendi brauseris reaalajas suhtluse haldamiseks loomulikku, turvalist ja toimivat viisi.
