WebSocket je integrálnou technológiou v mnohých moderných webových aplikáciách. Ak píšete kód pre web, pravdepodobne ste už tento pojem počuli, no možno si nie ste istí, čo to presne je alebo ako ho používať. Našťastie WebSocket nie je komplexný koncept a môžete mu veľmi rýchlo porozumieť.

Čo je WebSocket?

WebSocket, žiaľ, patrí medzi tie názvy, ktoré na prvý pohľad nedávajú zmysel. WebSocket je vlastne názov a komunikačný protokol ktorý umožňuje obojsmernú komunikáciu medzi klientom a webovým serverom.

Zjednodušene povedané, WebSocket je technológia, ktorá umožňuje klientovi a serveru vytvoriť spojenie, v ktorom môže ktorákoľvek strana kedykoľvek poslať druhej strane správu.

Toto sa líši od bežného pripojenia HTTP, kde klient musí iniciovať požiadavku a až potom môže server odoslať odpoveď. WebSocket je v skutočnosti úplne odlišný komunikačný protokol od HTTP, ktorý bol navrhnutý tak, aby bol kompatibilný s HTTP. Keď chce klientska aplikácia iniciovať pripojenie WebSocket, musí použiť mechanizmus aktualizácie HTTP pre prechod na protokol WebSocket.

instagram viewer

V tomto bode si možno pomyslíte: „Protokol je len súbor pravidiel, ako ho môžete použiť na kódovanie?“.

Chýbajúci kus je niečo, čo sa nazýva a zásobník protokolov. Zariadenia, ktoré podporujú protokol, majú v podstate zabudovaný hardvér a softvér, ktorý vám umožňuje písať aplikácie, ktoré komunikujú pomocou protokolu. Protokol sa priamo nepoužíva na vytvorenie čohokoľvek.

Prečo bol vytvorený WebSocket?

Na ilustráciu potreby WebSocket zvážte mechanizmus chatovania na internete.

Niekto odošle správu na server chatu zo svojho zariadenia, ale server ju ešte musí odoslať do vášho zariadenia, aby ste si ju mohli prečítať. Ak server používa HTTP, server vám nemôže poslať správu priamo ďalej, pretože server nemôže iniciovať požiadavky.

Existuje niekoľko spôsobov, ako tento problém vyriešiť pomocou protokolu HTTP. Jedným zo spôsobov je, že klient neustále odosiela požiadavky na aktualizáciu na server a server posiela všetky údaje, ktoré má v odpovedi. Táto technika sa nazýva polling a každá požiadavka sa nazýva prieskum. Existujú dva varianty hlasovania: dlhé hlasovanie a krátke hlasovanie.

Použitie variantu long polling znamená, že klientske zariadenie sa neustále pýta servera, či sú k dispozícii nejaké nové správy. Ak sú k dispozícii nové správy, server ich odošle ako odpoveď. Ak nie, server by oneskoril odpoveď a podržal otvorené pripojenie, kým by nemal údaje na odoslanie späť, a potom by klient okamžite zadal novú požiadavku.

Táto technika je neefektívna, pretože HTTP nebol navrhnutý na použitie týmto spôsobom. Funguje primerane v malom rozsahu, ale každá požiadavka HTTP zahŕňa odoslanie dodatočných údajov v hlavička a výsledkom je výrazne zvýšené zaťaženie servera, keď mnohí klienti žiadajú to.

Tu je diagram znázorňujúci dlhé hlasovanie:

Krátky variant hlasovania je ešte menej efektívny. V krátkom dotazovaní server nepodrží pripojenie otvorené, kým sa neobjavia nové údaje, čo znamená, že klient musí pokračovať v dotazovaní servera v pevných, veľmi krátkych intervaloch.

Ďalšia technika obojsmernej komunikácie v HTTP sa nazýva streaming.

Pri streamovaní po odoslaní prvej požiadavky server podrží pripojenie otvorené na neurčito, pričom klientovi posiela nové informácie ako priebežné čiastočné odpovede.

Používanie streamingu má za následok menšiu réžiu údajov a zaťaženie servera ako polling, pretože v ideálnom prípade klient odošle iba jednu požiadavku HTTP. Streamovanie bohužiaľ za určitých podmienok spôsobuje problémy, pretože prehliadače a sieťoví sprostredkovatelia (napríklad proxy) sa často snažia čiastočné odpovede ako rozbité časti jednej veľkej odpovede HTTP (čo je normálne správanie HTTP), namiesto samostatných správ, na ktoré boli určené byť.

WebSocket bol vytvorený na vyriešenie týchto problémov. Na rozdiel od HTTP bol WebSocket navrhnutý špeciálne pre obojsmernú komunikáciu. S WebSocket, akonáhle je spojenie otvorené, klient a server môžu posielať správy tam a späť bez problémov s dotazovaním alebo streamovaním.

Prípady použitia pre WebSocket

WebSocket je skvelý, ale to neznamená, že by sa mal používať všade.

Implementácia WebSocket môže pridať zložitosť vašej aplikácii, najmä na strane servera, takže by ste to nemali robiť, pokiaľ na to nemáte dobrý dôvod. To vyvoláva otázku: ako vyzerá dobrý dôvod?

WebSocket je ideálny pre prípady použitia, kde je potrebná častá obojsmerná komunikácia s nízkou latenciou. Inými slovami, WebSocket poskytuje výhodu pre aplikácie, ktoré potrebujú komunikovať často alebo vo veľkom meradle. Ak komunikácia nemusí prebiehať v reálnom čase alebo sa aplikácia nikdy nerozšíri do veľkého rozsahu, na použitie v tejto aplikácii môže stačiť dopytovanie alebo streamovanie.

Typické využitie WebSocket je pri vytváraní chatovacích aplikácií, online hier pre viacerých hráčov, softvéru na spoluprácu a oznamovanie v reálnom čase atď.

Ako používať WebSocket na strane klienta

Používanie WebSocket na strane servera môže byť dosť zapojené a proces sa podstatne líši v závislosti od jazyka (napr C#, Java, atď.) a knižnica podľa vlastného výberu, takže to tu nebudeme pokrývať. Ďalej si stručne povieme, ako používať WebSocket na strane klienta.

Všetky moderné prehliadače implementujú webové rozhranie API s názvom WebSocket API, čo je zásobník protokolov prehliadača pre protokol WebSocket. Pomocou tohto API môžete použiť WebSocket v JavaScripte. Rozhranie API vám umožňuje vytvoriť objekt WebSocket, prostredníctvom ktorého vytvoríte pripojenie WebSocket a interagujete so serverom WebSocket.

Na vytvorenie objektu WebSocket môžete použiť nasledujúci formát kódu:

nech exampleSocket = new WebSocket("wss://www.example.com/socketserver", "dummyProtocol");

Prvým argumentom pre konštruktor je URI servera WebSocket, s ktorým chcete vytvoriť spojenie. Vždy to bude začínať „ws“ alebo „wss“. Druhý argument je voliteľný. Jeho hodnota je buď reťazec alebo pole reťazcov, ktoré určuje podprotokoly, ktoré podporujete.

Objekt WebSocket má vlastnosť určenú len na čítanie s názvom readyState. Prístup k tejto vlastnosti poskytuje aktuálny stav pripojenia WebSocket. readyState má štyri možné hodnoty: "connecting", "open", "closing" a "closed".

Keď sa tento riadok kódu spustí, prehliadač sa pokúsi pripojiť k určenému serveru. Pripojenie sa nedokončí naraz, takže readyState of exampleSocket sa bude „pripájať“. Nie je možné odosielať ani prijímať žiadne správy, kým sa spojenie nedokončí, vtedy sa hodnota readyState stane „otvorenou“.

The exampleSocket objekt má poslucháč udalostí (ktorý sa líši od Poslucháči udalostí DOM) s názvom „onopen“, ktorý vám umožňuje vykonávať ďalšie akcie až po nadviazaní spojenia. Objekt má tiež metódu „odoslania“, ktorá vám umožňuje odosielať reťazce, bloby (binárne dáta) a ArrayBuffery ako správy na server.

Tu je príklad ich spoločného použitia:

exampleSocket.onopen = funkciu (udalosť) {
exampleSocket.send("WebSocket je naozaj skvelý");
};

Rozhranie API tiež poskytuje spôsob, ako môžete reagovať na správy, ktoré server posiela. Robí sa to pomocou poslucháča udalostí „onmessage“. Tu je príklad:

exampleSocket.onmessage = funkciu (udalosť) {
konzoly.log(udalosť.údaje);
}

Namiesto toho môžete aj písať funkcia šípky:

exampleSocket.onmessage = (udalosť) => { konzoly.log (udal.data); }

API tiež poskytuje a Zavrieť() spôsob ukončenia spojenia. Vyzerá to takto:

exampleSocket.Zavrieť();

WebSocket umožňuje efektívnu obojsmernú komunikáciu

WebSocket je obojsmerný komunikačný protokol. Servery a prehliadače implementujú zásobníky protokolov na komunikáciu pomocou WebSocket. WebSocket existuje, pretože HTTP nebol navrhnutý tak, aby bol obojsmerný. Existujú metódy na implementáciu obojsmerných pripojení s HTTP, ale majú problémy.

WebSocket je výkonná technológia, ale nie je potrebná vo všetkých prípadoch, pretože môže výrazne skomplikovať architektúru aplikácie. Používanie WebSocket na strane klienta sa vykonáva pomocou rozhrania WebSocket API prehliadača.