ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 126
Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 13
Abonament PDF

HTML5: Web Sockets

Radu Olaru
Senior Software Developer
@Small Footprint



DIVERSE

Probabil cea mai importantă influență în conectivitatea calculatoarelor o are protocolul HTTP. Acest protocol a permis realizarea web-ului pe care îl folosim azi aproape continuu și care a produs revoluție după revoluție în ultimii ani. Primele pagini web au fost cele statice, poate presărate cu puțin conținut multimedia de prost gust, apoi au apărut aplicațiile web din ce în cel mai complexe. Imediat utilizatorii au descoperit atât posibilitățile noi cât și granițele și limitele care urmau să bântuie Internetul pentru următorii ani.

TCP și HTTP

Protocoalele de comunicare între sisteme presupun o discuție lungă. Simplificat, există un protocol care definește comunicarea între sisteme, numit TCP și un protocol care definește comunicarea web între un client și un server web, numit HTTP. HTTP este implementat peste TCP, adică folosește comunicarea definită prin TCP, dar adaugă elementele specifice paginilor web: un client cere o pagină web, serverul oferă un răspuns după care comunicarea este considerată încheiată. Pentru noi informații de la server, clientul trebuie să facă o cerere nouă.

Astfel protocolul HTTP implementează comunicarea simplă și eficientă între o aplicație și un server oferită de protocolul TCP, garantând transferul mesajelor la destinație - dar permite serverului să dea un singur răspuns. Acest gen de comunicare este util pentru aplicații, dar e departe de a fi suficient. Serverul nu poate transmite mesaje clienților pe cont propriu. Orice mesaj de la server spre client poate fi transmis doar dacă clientul inițiază un act nou de comunicare. Dacă serverul primește o informație utilă clientului, de exemplu o actualizare a datelor pe care clientul tocmai le-a cerut, nu are cum să le transmită până când clientul va cere din nou aceste informații.

De la soluții rezonabile la pluginuri

Peste ani s-au încercat mai multe metode de a depăși această limită. Între timp aplicațiile web s-au dezvoltat, au definit noi tendințe și în cele din urmă au devenit indispensabile companiilor dornice să-și facă prezența simțită printre milioanele de navigatori ai Internetului. A apărut revoluția AJAX care crea iluzia unei conectivități permanente între server și clienți. S-au inventat chiar mecanisme care să forțeze protocolul HTTP să imite conectivitatea permanentă - un efort totuși insuficient. Soluția poate cea mai drastică a fost crearea plugin-urilor pentru browsere, care pur și simplu deschideau un port nou TCP, pe lângă cel de conectare la pagina web. Flash și Silverlight sunt probabil cele mai răspândite exemple. Comunicarea permanentă cu întârzieri minime părea să aibă nevoie de soluții nepractice care concurau cu rescrierea protocolului.

Soluția? Deoarece HTTP nu este un protocol de sine stătător ci funcționează peste TCP, dacă browserul ar ști folosi acest protocol, s-ar putea conecta permanent la un server pentru a comunica nestingherit. Ei bine HTML5 definește o specificație care permite tocmai acest lucru: interpretarea unui protocol similarTCP într-un browser.

Upgrade la protocolul WebSockets

Implementarea este chiar eleganta: browserul cere o pagină web oarecare, funcționând pe principiile protocolului HTTP, însă pagina poate modifica apoi conexiunea pentru a folosi protocolul WebSockets:

var connection = new WebSocket(
"ws://site.org/echo", ["soap", "xmpp"]);
connection.onopen = function () 
{ connection.send("Ping"); };
connection.onerror = function (error) 
{ console.log("Error: " + error); };
connection.onmessage = function (e)
{ console.log("Server: " + e.data); };

Mai sus se poate vedea cum pagina inițiază comunicarea websocket si stabilește handlere pentru evenimentele conexiunii. La deschiderea conexiunii se trimite mesajul Ping spre server, in cazul erorilor intervenite în comunicare acestea sunt logate în consola browser-ului, iar dacă serverul trimite vreun mesaj spre client, va fi de asemenea logat în consolă. Bineînțeles, la primirea unui mesaj se pot executa orice alte instrucțiuni javascript.

Prin execuția codului de mai sus nu se deschide nici un port nou TCP. Pur și simplu conexiunea HTTP deja existentă primește un upgrade request care schimbă protocolul de comunicare. Protocolul nu va mai fi HTTP, ci WebSocket - direct peste TCP.

Pentru a trimite mesaje, serverul trebuie să implementeze de asemenea specificațiile WebSocket. Există mai multe librării pentru majoritatea limbajelor si platformelor curente de programare care oferă această implementare.

De asemenea pot fi trimise mesaje binare:

var img = canvas_context.getImageData(0, 0, 
400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) binary[i] = img.data[i];
connection.send(binary.buffer);

Sau fișiere: var file = document.querySelector( "input[type="file"]").files[0]; connection.send(file);

Diferențe față de protocolul TCP și HTTP

WebSocket modifică conexiunea HTTP într-una similară cu TCP. Protocolul de comunicare ulterior nu este TCP, ci este o variantă modernizată a acestuia. Protocolul WebSockets implementează comunicarea full duplex, cu diferența că mesajele trimise nu sunt fluxuri de bytes, ci fluxuri de mesaje (desigur, pot fi și mesaje în format binar).

Mesajul trimis peste HTTP pentru a iniția noua formă de comunicație este următorul:

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

Serverul răspunde apoi cu mesajul:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

Mecanismul este identic cu transferul de la protocolul HTTP la HTTPS. Mesajul HTTP permite serverelor să primească atât conexiuni HTTP cât și WebSocket pe același port, însă sunt transmise informații specifice WebSocket.

Odată ce conexiunea este stabilită, clientul și serverul își pot trimite date între ei în mod full duplex. Datele conțin un overhead minim, practic folosesc un header scurt urmat de corpul propriu-zis. Transmisiile WebSocket se numesc mesaje și un singur mesaj poate fi împărțit în mai multe pagini trimise separat (întocmai ca în cazul protocolului TCP). Aceasta permite transferul unui mesaj foarte mare a cărui dimensiune nu este cunoscută de la început - se trimit paginile pe rând, ultima fiind marcată cu un flag special.

Traversarea proxy-urilor

Implementările protocolului WebSocket încearcă să determine dacă browserul este configurat să folosească un proxy când se conectează la o destinație. Dacă determină existența unui proxy, folosește metoda HTTP CONNECT pentru a crea un tunel persistent.

Deși protocolul WebSocket în sine nu este conștient de existența proxy-urilor și a firewall-urilor, folosește un handshake compatibil HTTP care permite serverelor web să ofere acces la porturile HTTP și HTTPS (80 și respectiv 443). Protocolul WebSocket definește prefixul ws:// și wss:// care indică tipul de conexiune: simplă sau securizată. Ambele folosesc mecanismul de upgrade descris anterior.

Desigur, în final proxy-urile decid dacă permit un asemenea trafic sau nu. Esențial este că protocolul WebSocket nu necesită deschiderea unor porturi noi sau formularea unor mesaje complexe, diferite de standardul HTTP. La fel, protocolul nu necesită intervenții suplimentare în definițiile firewall-urilor - dacă portul 80 este deschis, comunicarea WebSocket va funcționa automat alături de cea HTTP.

WebSockets cu Node.JS

Am văzut cât de simplu se inițiază conversațiile WebSocket de pe client folosind javascript. Ei bine pe server este la fel de simplu. Internet Information Services necesită versiunea 8 alături de o configurare suplimentară din Windows pentru a permite funcționarea noului protocol, dar pentru simplitate vom folosi Node.JS - și tot limbajul javascript:

var WebSocketServer = require("websocket").server;
var http = require("http");
var clients = [];
var server = http.createServer(function(request, response) {
// aici se procesează cererile HTTP
// dacă implementăm un server pur WebSocket, nu 
// trebuie să scriem nimic aici
});
server.listen(1337, function() { });
// inițializăm serverul WebSocket
var wsServer = new WebSocketServer(
{ httpServer: server });
wsServer.on("request", function(request) {
var connection = request.accept(null, request.origin);
// mesajele primite de la client vor fi 
// procesate aici
connection.on("message", function(message) {
if (message.type === "utf8") {
connection.sendUTF("Hello"); 
// trimite înapoi un mesaj la client
clients.push(connection);
// rețin clientul
}
});
connection.on("close", function(connection) {
// închide conexiunea și anunță toți clienții
for (var i = 0; i < clients.length; i++) 
clients[i].sendUTF("someone left");
});
});

Practic modelul de funcționare este similar șablonului Observer: se reține o listă de subscrieri, iar când serverul are un mesaj de publicat, mesajul este transmis pe rând întregii liste.

Cerințe și limitări

După cum am văzut, WebSockets este mai mult decât un API HTML5. Desigur, instrucțiunile de comunicare din client sunt standardizate în specificația HTML5 - dar există nevoia implementării acestui protocol și la nivelul serverului. Partea de server este specificată în RFC 6455.

Din acest motiv, comunicarea WebSockets necesită în primul rând un browser care să suporte protocolul, dar și un server care să-l implementeze. În prezent majoritatea serverelor web uzuale au fost actualizate să suporte WebSockets: IIS 8, Apache, LightHTTPD și bineînțeles, Node.JS care poate crea servere web compatibile. Totuși limitarea esențială rămân versiunile vechi de IIS - IIS8 este disponibil doar în Windows 8.

În ce privesc browser-ele, din nou, toate browser-ele actuale permit comunicarea prin WebSockets - dar pentru firmele care limitează utilizatorii la Internet Explorer, singura versiune compatibilă este Internet Explorer 10 - care apare din nou, doar în Windows 8.

Resurse și referințe

www.html5rocks.com/en/tutorials/websockets/basics/

www.websocket.org

developer.mozilla.org/en/docs/WebSockets

tools.ietf.org/html/rfc6455

VIDEO: NUMĂRULUI 126

Sponsori

  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • Connatix
  • BoatyardX
  • AboutYou
  • Telenav
  • .msg systems
  • Colors in projects

Radu Olaru a mai scris