Web Sockets

Každý vývojář real-time interaktivních webových aplikací jistě narazil na limity současných technik (AJAX, AJAJ, iframe) a alespoň jednou si přál, aby bylo možné komunikovat se serverem trochu „živěji“, pomocí obousměrného komunikačního kanálu. Taková možnost právě přichází, a jmenuje se Web Sockets.

HTML5 přichází, sice pozvolna, ale přichází, a s sebou přináší mnoho zajímavých novinek. Na Zdrojáku jsme se některým rysům HTML 5 věnovali. K nejčastěji probíraným novinkám patří tag canvas, tagy pro vkládání videa, WebForms2 či větší podpora sémantických tagů. Kromě těchto novinek, které ocení především kodéři a lidé, co rádi testují browsery, přichází i užitečné novinky pro programátory. Jednou z nich jsou právě Web Sockets.

Programátoři, kteří se setkali s programováním důkladněji než jen při práci na redakčním systému v PHP, jistě princip síťových soketů znají. (V textu budu používat buď termín „sockets“, nebo počeštěnou variantu „sokety“, pozn. aut.) V zásadě se jedná o komunikační spojení, navázané mezi dvěma procesy, pomocí IP technologie. Socket je (zjednodušeně řečeno) popsán dvojicí IP adres, protokolem a portem, který je pro komunikaci použit. Služby na vyšší úrovni tento socket používají k (většinou obousměrnému) přenášení dat.

Web Sockets je obdoba této technologie, přenesená do světa webových aplikací. Pomocí Web Sockets můžeme napsat webovou aplikaci, kde klient (aplikace v prohlížeči) může navázat obousměrné spojení se serverem, a po tomto spojení si mohou vyměňovat informace v reálném čase. Není tedy nutné používat techniku, někdy zvanou „heartbeat“, kdy se klient v pravidelných intervalech dotazoval serveru „Máš pro mne něco?“ (a server většinu času odpovídal „Ne…“). S Web Sockets je mnohem snazší vytvářet realtimové aplikace, jako jsou online chaty či kooperativní služby.

Firewally a proxy servery

Pravou zatěžkávací zkouškou pro podobné technologie jsou firewally, proxy servery a NAT. Pro aplikace založené na Cometu byly často zdrojem problémů. WebSocks se s nimi vypořádávají poměrně elegantně: Zjišťují, zda je v cestě nějaký proxy server a automaticky nastavují tunel pomocí HTTP příkazu CONNECT. Tento požadavek otevře TCP/IP spojení s určeným serverem na určeném portu. Jakmile je takto vybudován tunel, mohou být zprávy volně přenášeny. Na podobném principu jsou vybudovány i wss (Web Socket over SSL) tunely.

Použití Web Sockets

Web Sockets vychází ze starších technologií, jako AJAX (asynchronní jednorázový požadavek od klienta na server přes HTTP protokol) či Comet (dlouhodobé vyhrazené HTTP spojení) a nabízí programátorům to, co tyto technologie nedokázaly: Jednoduché rozhraní pro navázání spojení a vzájemnou výměnu zpráv mezi klientem a serverem. Na straně klienta jsou Web Sockets implementovány v JavaScriptu jako třída WebSocket. Programátor může vytvořit instanci této třídy, a tím navázat spojení se serverem (pokud samosebou server tuto technologii podporuje).

var myWebSocket = new WebSocket("ws://www.server.cz/sluzba");

Jak je vidět, pro WebSocket URL se používá prefix „ ws://“ Pokud spojení používá SSL, lze použít „ wss://“. Při vytvoření nového objektu třídy WebSocket je navázáno spojení pomocí protokolu ws/wss a je možno posílat zprávy.

Zprávy nejsou u WebSockets žádné sofistikované objekty – jde o prosté řetězce.

Objekt WebSockets nabízí tři události, nazvané onopen, onmessage a onclose. Jejich názvy jsou dostatečně vysvětlující, přesto pro jistotu:

Událost onopen je volaná při otevření spojení. Může sloužit jako příznak toho, že již lze posílat zprávy. Událost onclose zase oznamuje uzavření spojení. Pro vlastní výměnu dat slouží událost onmessage. Jak už název napovídá, je zavolána ve chvíli, kdy ze serveru přijde zpráva. Tělo zprávy je předáno ve vlastnosti data předané události.

myWebSocket.onopen = function(e) { alert("Spojení otevřeno ..."); };




myWebSocket.onmessage = function(e) { alert( "Přijata zpráva: " + e.data); };




myWebSocket.onclose = function(e) { alert("Spojení uzavřeno."); };

Posílání zpráv má na starosti metoda send(). Jejím parametrem je řetězec, který má být poslán.

myWebSocket.send("Haló servere!");

Na konci běhu aplikace je možno spojení uzavřít, k čemuž slouží metoda disconnect().

Na straně serveru je zapotřebí víc než běžný HTTP server – je zapotřebí takový, který podporuje technologii WebSockets. Jendou z možností je použití speciálních služeb, např. Kaazing serveru nebo serveru Jetty, další možností je např. lokální websockets node. Existuje i implementace pywebsocket, napsaná, jak název napovídá, v Pythonu, která funguje jako stand-alone server, ale může spolupracovat i se serverem Apache (mod_pywebsocket).

Praxe

WebSocks vypadají možná zatím jako zajímavý teoretický koncept, ale pozor! Podle informací z Chromium Blogu jsou WebSocks k dispozici v prohlížeči Chrome od verze 4.0.249.0. Tentýž zdroj zveřejňuje následující příklad inicializace WebSockets:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Websocket je připojen. Teď lze posílat data pomocí metody send().
    ws.send("zprava"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { // websocket je zavřen. };
} else {
  // prohlížeč nepodporuje Websockets.
}

Pokud máte k dispozici server s Pythonem a nový prohlížeč Chrome, můžete si s Web Sockets pohrát. Jde rozhodně o zajímavý koncept, který může přinést do světa RIA tolik potřebnou interaktivitu.