- Nodrošina reāllaika, divvirzienu saziņu starp logiem, cilnēm, iframe ietvariem un darbiniekiem vienā un tajā pašā izcelsmes vietā.
- Izmanto publicēšanas-abonēšanas modeli, kur konteksti abonē nosauktu kanālu datu apmaiņai.
- Izmanto strukturēto klonēšanas algoritmu, lai pārsūtītu sarežģītus objektus bez manuālas serializācijas.
Vai esat kādreiz domājuši, kā dažas tīmekļa vietnes, šķiet, acumirklī zina, kad esat izrakstījies citā cilnē, vai kā iepirkumu grozs tiek atjaunināts trīs dažādos logos bez vienas lapas atsvaidzināšanas? Ilgu laiku izstrādātājiem bija jāpaļaujas uz neveikliem risinājumiem, piemēram, servera aptaujāšanu vai lokālās krātuves notikumu uzlaušanu. Par laimi, pārlūkprogrammā ir iebūvēts elegants risinājums, kas tiek galā ar šo smago darbu bez trešo pušu bibliotēkām.
Apraides kanāla API darbojas kā viegla ziņojumu kopne, ļaujot dažādiem pārlūkošanas kontekstiem, piemēram, cilnēm, iframe ietvariem un tīmekļa darbiniekiem, sazināties savā starpā, ja vien tiem ir viena un tā pati izcelsme (t. i., viens un tas pats protokols, domēns un ports). Tas ir revolucionārs risinājums reaģējošu tīmekļa lietotņu izveidei, kas šķiet kā vienota, saskaņota pieredze, nevis atsevišķu lapu kopums.
Kā faktiski darbojas apraides kanāla API
Šī API pamatā ir koncepcija par nosaukts kanālsIedomājieties to kā radiofrekvenci; jebkurš logs vai darbinieks, kas noskaņojas uz to pašu frekvenci, var dzirdēt to, ko pārraida visi pārējie. Kad jūs izveidojat instanci BroadcastChannel objekts ar noteiktu nosaukumu, jūs būtībā esat abonējot šo kanāluJa kanāls vēl nepastāv, pārlūkprogramma to izveido acumirklī.
Datu sūtīšana ir neticami vienkārša. Zvanot uz postMessage() metode, jūs varat nosūtīt ziņojumu uz jebkuru citu kontekstu, kas pašlaik klausās. Viena no foršākajām lietām ir tā, ka tā izmanto strukturēts klonēšanas algoritmsTas nozīmē, ka jums nav jāaprobežojas tikai ar virknes sižetiem; jūs varat sūtīt sarežģīti objekti, masīvi, Map, Set vai pat Blobs bez nepieciešamības manuāli palaist JSON.stringify() or JSON.parse(), kas ietaupa daudz apstrādes laika.
Būtiskās metodes un notikumu apstrāde
Lai sāktu, izveidojiet kanālu: const myChannel = new BroadcastChannel('app_sync');Lai saņemtu ienākošos datus, jums jāiestata onmessage notikumu apstrādātājs vai izmantošanu addEventListener('message', ...)Kad pienāk ziņojums, notikuma objekts satur data īpašums, kurā glabājas pārsūtītā informācija.
postMessage(data): Nosūta norādīto objektu visiem pārējiem pievienotajiem abonentiem.close()Šis ir izšķirošs solis atmiņas pārvaldībā. Šīs metodes izsaukšana atvieno objektu no kanāla, ļaujot pārlūkprogrammas atkritumu savācējam attīrīt resursus.name: Tikai lasāma īpašība, kas ļauj pārbaudīt, ar kuru kanālu objekts pašlaik ir saistīts.
Ir svarīgi atzīmēt, ka raidītājs nesaņem savu ziņojumu . Ja nosūtāt ziņojumu no A cilnes, tikai B un C cilnes aktivizēs to ziņojumu notikumus. Tas ir milzīgs ieguvums, jo tas novērš bezgalīgas cilpas , kas bieži vien nomoka izstrādātājus, strādājot ar WebSockets vai citiem atgriezeniskās saites mehānismiem.
Apraides kanāla salīdzinājums ar citiem API
Jūs varētu domāt: “Kāpēc gan vienkārši neizmantot window.postMessage()?” Kamēr postMessage() ir spēcīgs, tam ir nepieciešams tieša atsauce uz mērķa logu (piemēram, uznirstošo logu vai iframe). Apraides kanāla API ir “aktivizēšanas un aizmirstības” sistēma; jums nav jāzina, kas klausās, tāpēc ievērojami elastīgāks vairāku cilņu scenārijiem.
Salīdzinot ar SharedWorkers , Broadcast Channel ir daudz vienkāršāks. SharedWorkers ir lieliski piemēroti sarežģītu koplietotu stāvokļu vai viena WebSocket savienojuma pārvaldībai vairākām cilnēm, taču viegliem paziņojumiem vai stāvokļu sinhronizācijai labākā izvēle ir Broadcast Channel. Līdzīgi, lai gan MessageChannel API ir paredzēts individuālai saziņai, izmantojot portus, Broadcast Channel ir veidots individuālai saziņai ar daudziem.
Reālās pasaules lietošanas gadījumi un praktiska ieviešana
Ir neskaitāmi veidi, kā to īstenot praksē. Klasisks piemērs ir autentifikācijas stāvokļu sinhronizācija . Kad lietotājs vienā cilnē nospiež pogu “Izrakstīties”, varat pārraidīt ziņojumu “auth_logout”, kas nekavējoties pamudina visas pārējās atvērtās cilnes novirzīt uz pieteikšanās lapu.
Citas viedas lietojumprogrammas ietver:
- Iepirkumu ratiņiAtjaunināt vienību skaitu galvenē visās cilnēs brīdī, kad lietotājs pievieno produktu.
- Lietotāja preferencesJa lietotājs vienā logā pārslēdzas uz “tumšo režīmu”, varat aktivizēt tēmas maiņu visas sesijas laikā nekavējoties.
- Sadarbības rīkiKursora pozīciju vai teksta izmaiņu sinhronizēšana koplietojamā dokumentu redaktorā nevainojama tiešraides pieredze.
- Apkalpojošo darbinieku koordinācija: Norādījumu sniegšana pakalpojuma darbiniekam notīrīt kešatmiņu vai atjaunināt resursus, manuāli neapstrādājot visus aktīvos klientus, izmantojot
self.clients.matchAll().
Ierobežojumi un saderība
Neskatoties uz tā lietderību, ir jāpatur prātā daži drošības pasākumi. Pirmkārt, tas ir stingri vienas izcelsmes . Drošības apsvērumu dēļ to nevar izmantot, lai sazinātos ar citu domēnu. Otrkārt, nav ziņojumu vēstures ; ja cilne pievienojas kanālam vēlu, tā neredzēs ziņojumus, kas nosūtīti pirms savienojuma izveides. Visbeidzot, tas negarantē piegādi , tāpēc, ja jums ir nepieciešams apstiprinājums, ka ziņojums ir saņemts, jums būs jāizveido savs apstiprināšanas protokols.
Runājot par pārlūkprogrammu atbalstu, šī API tagad ir daļa no plaši pieejamās bāzes līnijas , kas nozīmē, ka to atbalsta visas modernās Chrome, Firefox un Safari versijas. Ja jums ir nepieciešams atbalsts vecākām pārlūkprogrammām, jums būs jāmeklē polyfill, lai gan lielākajai daļai mūsdienu projektu tā ir gatava lietošanai ražošanas vidē.
Ieviešot šo API, izstrādātāji var atteikties no neefektīviem krātuves risinājumiem un izveidot ļoti sinhronizētu lietotāja pieredzi . Tas vienkāršo vairāku logu lietojumprogrammu arhitektūru, nodrošinot vietēju, drošu un efektīvu veidu, kā apstrādāt reāllaika saziņu klienta pārlūkprogrammā.
