Javascript websocket: descriere, funcționare, utilizare

WebSockets (WS) - o conexiune server-client pentru a obține informații de pe partea serverului fără a fi nevoie să solicite mai întâi partea client, primind o așa-numită notificare PUSH. O schemă ideală de interacțiune JavaScript WebSocket arată astfel: partea serverului are un singur fir care procesează informații, cum ar fi ascultarea modificărilor bazei de date sau a evenimentelor declanșate de alte procese, pentru a trimite informații către toți clienții în același timp, fără a utiliza resurse. Client WebSocket în JS și HTML5 folosind interfața WS, oferită de majoritatea browserelor moderne: IE 10+, Chrome 16+, Firefox 11+, Safari 6+.

Definiția WebSockets

WebSockets sunt definite ca o comunicare bidirecțională între server și client. Cheia pentru JavaScript WebSocket este paralelismul real și optimizarea performanței, ceea ce duce la aplicații web mai receptive și mai bogate.

Protocolul stabilește comunicarea full-duplex de la zero. WebSockets reprezintă un pas înainte în aducerea funcționalității desktop în browsere. Ele reprezintă o nouă etapă în evoluția mult așteptată a tehnologiei Internet client/server.

Principalele caracteristici ale JavaScript WebSocket sunt

1. Protocolul este standardizat, ceea ce înseamnă că permite comunicarea în timp real între serverele web și clienți.
2. WebSockets devin un standard cross-platform pentru comunicarea în timp real între client și server.
3. Standardul permite un nou tip de aplicație.
4. Cu ajutorul acestei tehnologii, întreprinderile în timp real pot accelera.

Cel mai mare avantaj al JavaScript WebSocket este comunicarea bidirecțională (full duplex) pe o singură conexiune TCP. HTTP are propriul său set de scheme, cum ar fi http și https. Protocolul web socket are, de asemenea, o schemă similară definită în modelul său URL. Cea mai recentă specificație a protocolului WS este definită ca RFC 6455 - standardul propus. RFC 6455 este suportat de diverse browsere, cum ar fi Internet Explorer, Mozilla Firefox, Google Chrome.

Comunicare duplex

Înainte de a ajunge la necesitatea de a avea socket-uri web, trebuie să ne uităm la metodele existente care sunt folosite pentru a duplexa clientul Java WebSocket. Acestea constau în următoarele:

• vot;
• sondaj lung;
• streaming;
• postback și AJAX;
• HTML5.

Polling-ul poate fi definit ca o metodă care efectuează solicitări periodice indiferent de datele existente în flux. Acestea sunt trimise în mod sincron. Răspunsul serverului include date disponibile sau unele avertismente.

Sondajul lung, după cum sugerează și numele, implică o tehnică de sondaj similară. Clientul și serverul mențin conexiunea activă până la primirea unor date sau până când expiră timpul de așteptare. În cazul în care conexiunea este pierdută din orice motiv, clientul Java WebSocket poate începe din nou și solicita succesiv. O interogare lungă nu este nimic mai puțin decât o îmbunătățire a performanțelor față de procesul de interogare, dar o interogare continuă poate încetini procesul.

Opțiuni de streaming și AJAX

Aceasta este considerată cea mai bună opțiune pentru transferul de date în timp real. Serverul menține conexiunea deschisă și activă cu clientul până la primirea datelor. În acest caz, conexiunea este considerată deschisă pe termen nedefinit. Streamingul include anteturi HTTP care măresc dimensiunea fișierului și latența. Acest lucru poate fi considerat un dezavantaj major.

Este o formă prescurtată de Javascript asincron și XML. Obiectul XmlHttpRequest permite ca Javascript să fie executat fără a reîncărca întreaga pagină web. AJAX trimite și primește doar o parte din pagina web. Principalele dezavantaje ale AJAX în comparație cu websocket-urile JavaScript sunt

1. Trimite anteturi HTTP, care măresc dimensiunea totală.
2. Comunicare half-duplex.
3. Serverul web consumă mai multe resurse.

HTML5 este un cadru robust pentru dezvoltarea și proiectarea aplicațiilor web. Principalii piloni sunt interfețele de marcare API, CSS3 și Javascript.

Funcționalitate

WebSocket reprezintă un upgrade major în istoria comunicării web. Înainte de a exista, toate comunicațiile dintre clienții și serverele web se bazau doar pe HTTP. Web Socket ajută la un flux dinamic de conexiuni care sunt întotdeauna full-duplex. Full duplex se referă la comunicarea la ambele capete cu o viteză rapidă semnificativă. Se numește "game-changer" deoarece depășește în mod eficient toate dezavantajele protocoalelor existente.

Importanța WS pentru dezvoltatori și arhitecți:

1. Protocol independent bazat pe TCP, conceput pentru a susține orice alt protocol care, în mod tradițional, funcționează doar pe o conexiune TCP pură.
2. Un strat de transport peste care poate funcționa orice alt protocol.

API-ul Websocket suportă posibilitatea de a defini sub-protocoale - biblioteci de protocoale care pot interpreta anumite tipuri de protocoale. Exemple de astfel de protocoale includ XMPP, STOMP și AMQP. Dezvoltatorii nu mai trebuie să se gândească la tipul de conexiune în termeni de paradigmă HTTP cerere-răspuns.

Singura cerință din partea browserului este să fie rulată o bibliotecă JavaScript care să poată interpreta handshake-ul WS și să stabilească și să mențină conexiunea. Pe partea de server, standardul industriei este de a utiliza bibliotecile de protocol existente care rulează pe TCP și utilizează gateway-ul.

Funcționalitatea Web Sockets:

1. Conexiunile prin WebSocket sunt inițiate prin HTTP.
2. Serverele HTTP interpretează, de obicei, handshake-urile WS ca o cerere de actualizare.
3. Socket-urile web pot fi o extensie a unui mediu HTTP existent și pot oferi infrastructura necesară pentru a adăuga funcționalități web. Acestea se bazează pe protocoale full-duplex mai avansate, care permit transferul de date în ambele direcții între clientul JavaScript WebSocket și server.

Implementarea clientului în JavaScript

Codul sursă al fișierului JavaScript numit wsclient.js include în pagina HTML5 pentru a putea deschide o conexiune WebSocket. Scriptul conține codul pentru a crea un client WS folosind interfața sa.

O pagină HTML5 simplă este utilizată pentru a crea un formular pentru a se conecta la serverul endpoint și a face schimb de mesaje. Pagina HTML folosește wsclient.js pentru a rula fișierul HTML, deschideți-l într-un browser, de exemplu, Google Chrome, selectând "File -> "Deschis".

Un server simplu poate fi implementat cu ușurință în Java. Acesta returnează pur și simplu mesajul primit de la client cu majuscule:

1. Deschideți formularul wsclient.html în browserul dvs. web și introduceți parametrii de conexiune WebSocket necesari, apoi faceți clic pe butonul "Connect" (Conectare). În cazul în care conexiunea a fost realizată cu succes, butonul va fi dezactivat, iar butonul "Disable" va fi activat.
2. Tastează mesajul în câmpul "Text mesaj" și fac clic pe butonul "Trimite". Serverul îl va afișa cu majuscule, iar clientul JavaScript îl va afișa în zona de text.
3. "Instrumente pentru dezvoltatori" Google Chrome este un instrument bun pentru a învăța despre conexiunile WebSocket. fereastră "Instrumente pentru dezvoltatori" Merge la fila "Rețea" și selectați WS pentru a vedea o listă a tuturor conexiunilor pentru pagina curentă.
4. Faceți clic pe fila Header pentru a vizualiza valorile cererii și ale răspunsului.
5. În fila Frames sunt listate toate mesajele transmise și primite. Primul mesaj este ceea ce a fost trimis de la client la server, iar al doilea mesaj este ecoul serverului cu majuscule.
6. Fila Timing arată cât timp a fost deschisă conexiunea.
7. Consola este utilizată pentru a vedea instanța WS curentă, ce este în cadrul paginii HTML.
8. Introduceți numele unei variabile JavaScript WebSocket, WS și consola va imprima o reprezentare JSON a obiectului.
9. ReadyState. Proprietatea obiect reprezintă starea conexiunii. O valoare de 1 înseamnă că este deschis și gata să primească și să trimită mesaje. Acesta poate fi utilizat pentru a testa Conexiune WS înainte de a încerca să transferați date. În cazul în care conexiunea este închisă, poate fi implementată o logică pentru a o reconecta automat.
10. Wireshark este un instrument foarte cuprinzător și util pentru monitorizarea traficului de rețea. Acesta poate fi descărcat gratuit de pe site-ul oficial. Odată instalat, porniți-l și selectați interfața de rețea pentru a captura traficul.
11. Pentru a vizualiza numai traficul WS, introduceți websocket în câmpul de filtrare. Faceți clic pe cadru pentru a vizualiza conținutul, inclusiv încărcătura reală a mesajului. Derulați în jos până la nodul de date text bazat pe linii și extindeți nodul.
12. Faceți clic dreapta pe sarcina utilă comprimată și selectați "Show packet bytes" (Afișați octeții pachetului). În fereastra de dialog, selectați "Compressed" din lista derulantă "Decode" pentru a vizualiza încărcătura utilă ca text simplu.

Configurația Java WebSocket de primăvară

Spring-boot-starter-websocket - oferă valori implicite utile pentru WS. Mai întâi de toate, configurați brokerul de mesaje STOMP. În el, WebSocketConfig.Java definește punctul final STOMP al brokerului de mesaje și punctul final al aplicației websocket.@Configuration - Clasa de configurare Spring.

EnableWebSocketMessageBroker - activează procesarea mesajelor suportate de brokerul de mesaje. Aceasta folosește STOMP ca broker de mesaje.

Metoda ConfigureMessageBroker () permite unui mediator simplu, bazat pe memorie, să transmită mesaje unui client cu prefixele "/topic" și "/queue". De asemenea, prefixează "/app" pentru cele asociate cu metodele de mapare @Message Mapping anulate din clasa controlerului. Acest prefix va fi utilizat pentru a defini toate corespondențele de mesaje. De exemplu, "/app/message" este punctul final pentru care este mapată metoda WebSocket Controller.processMessage De la Client ().

În mod similar, RegisterStompEndpoints () activează suportul STOMP și înregistrează punctele finale stomp în "/hello". Acest lucru va direcționa toate mesajele web socket JavaScript prin STOMP, care, de asemenea, adaugă un nivel suplimentar de securitate la punctul final web socket. Atunci când se creează o conexiune WS din javascript, se folosește doar acest endpoint Stomp special.

În configurația de mai jos, pentru a activa suportul pentru SockJs pentru a oferi o acțiune opțională de inversare, trebuie efectuate următoarele modificări.addEndpoint ("/hello") .withSockJS ().

Avantajul folosirii sockJS aici este că, ori de câte ori o conexiune web socket este căzută sau nu poate fi stabilită, atunci aceasta va fi retrogradată la HTTP și comunicarea dintre client și server poate continua.

Gestionarea erorilor

Odată ce se stabilește o conexiune între client și server, se declanșează un eveniment Open de la o instanță WS. Sunt generate erori care apar în timpul comunicării. Acesta este definit cu ajutorul evenimentului OnError. O eroare este întotdeauna urmată de un eșec al conexiunii.

OnError - acest eveniment este declanșat atunci când ceva nu merge bine între comunicări. O eroare de eveniment este urmată de o întrerupere a conexiunii. Se recomandă să informați întotdeauna utilizatorul despre erori neașteptate și să încercați să vă reconectați.

În ceea ce privește tratarea erorilor, trebuie luați în considerare atât parametrii interni, cât și cei externi:

1. Parametrii interni includ erori care pot fi generate din cauza unor erori de cod sau a unui comportament neașteptat al utilizatorului.
2. Erorile externe nu au nimic de-a face cu aplicația, mai degrabă sunt legate de parametrii care nu pot fi controlați. Cea mai importantă dintre acestea este conectarea la rețea.
3. Orice aplicație web bidirecțională interactivă necesită o conexiune activă la internet.

Verificarea disponibilității web

În aplicațiile desktop și mobile de astăzi, o sarcină comună este de a verifica dacă rețeaua este disponibilă. Cel mai frecvent mod pentru WebSocket php JavaScript - faceți o cerere HTTP către un site web care urmează să fie activat, de exemplu, Google.com. Dacă solicitarea reușește, dispozitivul desktop sau mobil raportează că există o conexiune activă. În mod similar, în HTML există un XMLHttpRequest pentru detectarea disponibilității rețelei.

HTML5, pe de altă parte, a simplificat și mai mult acest proces și a introdus o modalitate de a verifica dacă un browser poate primi răspunsuri web. Acest lucru se realizează prin utilizarea unui navigator de obiecte.

Offline înseamnă fie că dispozitivul nu este conectat, fie că utilizatorul a selectat modul offline din bara de instrumente a browserului.

Testarea Java WebSocket utilizează un client WS simplu. Odată ce conexiunea este stabilită, trimiteți datele către server și imprimați răspunsul primit: import websocket.

Evenimentele OnOpen, OnClose și OnMessage

Serverul WebSocket este un program simplu care poate gestiona evenimentele și acțiunile WS. De obicei, oferă metode similare cu API-ul clientului. În același timp, majoritatea limbaje de programare furnizează o implementare a conexiunii dintre server și client WebSocket, evidențiind evenimentele și acțiunile inițiate.

Serverul WebSocket funcționează ca un client. Reacționează la evenimente și execută acțiunile necesare. Indiferent de limbajul de programare utilizat, fiecare server WebSocket are rutine specifice. Este inițializat la adresa socket-ului web, gestionează evenimentele OnOpen, OnClose și OnMessage și trimite mesaje către client. Există patru evenimente principale în API Websocket:

• deschis;
• mesaj;
• închis;
• eroare.

Fiecare dintre evenimente este gestionat prin implementarea unor funcții precum OnOpen, OnMessage , OnClose și, respectiv, OnError. Acest lucru poate fi, de asemenea, implementat utilizând metoda addEventListener.

Instanță Websocket în Java

Fiecare server WS necesită o gazdă și un port valid. Un exemplu de creare a unei instanțe Websocket pe un server: var server = new WebSocketServer("ws://localhost:8181").

Orice URL valid poate fi utilizat cu o specificație de port care nu a fost utilizată anterior. Este foarte utilă pentru a ține o evidență a clienților conectați, deoarece acumulează și stochează date diferite sau trimite mesaje diferite către fiecare dintre ei.

Fleck reprezintă conexiunile primite (clienți) cu interfața IwebSocketConnection. Ori de câte ori cineva se conectează sau se deconectează de la serviciu, o listă goală poate fi creată sau actualizată: var clients = new List ().

După aceea, este invocată metoda Start și se așteaptă ca clienții să se conecteze. Odată pornit, serverul poate primi conexiuni de intrare. În Fleck, metoda Start are nevoie de un parametru care specifică socket-ul care declanșează evenimentul: serverul.Start(socket) =>{});

Pentru a implementa un server WebSocket în C#, folosim o bibliotecă externă. Pentru a obține același rezultat în Java, profitați de tehnologia inclusă în biblioteca standard folosind pachetul javax.websocket, începând cu Java EE 7.

Creați un proiect client Java WebSocket bazat pe Java EE 7 folosind unul dintre IDE-urile online gratuite precum Eclipse și NetBeans. În NetBeans, creăm o nouă aplicație web și ne asigurăm că folosim GlassFish ca server (versiunea 4.0). Dacă utilizatorul preferă să folosească Eclipse, trebuie să aleagă Tomcat 8. Acest lucru definește un pachet, care se numește MyServer, și creează o clasă WebSocket Server în interiorul acestuia. Codul de implementare a serverului este destul de ușor de citit, și comportamentul său ușor de înțeles.

Avantajele socket-ului web

WS rezolvă mai multe probleme cu REST sau HTTP. HTTP este un protocol unidirecțional, în care clientul inițiază întotdeauna cererea. Serverul procesează și returnează răspunsul și apoi clientul îl folosește. Websocket este un protocol bidirecțional care nu are modele de mesaje predefinite, cum ar fi cerere/răspuns. Atât clientul, cât și serverul pot trimite un mesaj către cealaltă parte.

HTTP permite ca mesajul de cerere să treacă de la client la server, iar apoi serverul trimite răspunsul. La un moment dat, clientul comunică cu serverul sau viceversa. În general, o nouă conexiune TCP este inițiată pentru o solicitare HTTP și se termină după ce a primit răspuns. O nouă conexiune TCP trebuie să fie stabilită pentru o altă cerere/răspuns HTTP.

Pentru WS, conexiunea HTTP este actualizată folosind mecanismul standard de actualizare. Clientul și serverul comunică prin aceeași conexiune TCP în timpul ciclului de viață al unui WS.

Websocket este un protocol de nivel scăzut. Totul, inclusiv un model simplu de cerere/răspuns, cum să creați, să actualizați, să ștergeți resursele necesare și codurile de stare. Toate acestea sunt definite cu atenție pentru HTTP.

WS este un protocol cu stare, în timp ce HTTP este un protocol fără stare.

Conexiunile WS se pot extinde pe verticală pe un singur server, în timp ce HTTP se poate extinde pe orizontală. Există mai multe soluții proprietare pentru scalarea orizontală, dar acestea nu se bazează pe standarde.

HTTP vine cu multe alte avantaje, cum ar fi cache, rutare și multiplexare. Toate acestea trebuie să fie definite pe lângă baza de date WebSocket și Java.