Přejít k navigační liště

Zdroják » Webdesign » Web Sockets

Web Sockets

Články Webdesign

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.

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.

Doporučené odkazy

Komentáře

Subscribe
Upozornit na
guest
14 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Almad

Konečně zemře long polling.

Jenom by mě zajímalo, za jak dlouho to začne být realně použitelné (tj. bez fallbacku)…

Almad

…ahá, a odpovím si sám, orbited má javascriptovou emulaci pro browsery bez nativní podpory. Yay!

Pavel Šimek

Jelikož s použitím Flashe to bylo možné už dávno (a tím nemyslím, že i front-end musí být nutně ve Flashi) a přesvědčit uživatele k instalaci Flash Playeru je jistě snazší než ho přesvědčit k instalaci Chrome, tak logická otázka zní, proč nezemřel už dávno. A odpověď je podle mě jasná – firewally a spol. Podstatná část komunikace musí být dnes tunelována, což omezuje ambice skutečných real-time aplikací a vývojáři radši zůstávají u long pollingu.

garlug

Super clanok, diky !
Skoda len ze podpora pre Firefox/Safari je zatial vo vyvoji.
A o podpore v IE asi zatial mozme len snivat ;)

Pavel Šimek

V browserech, které to nepodporují, se může použít flashová proxy. Což ostatně mohla i dosud, takže to vůbec nic převratného není. Aby uživateli WS aplikace fungovala, bude si muset nainstalovat buď Chrome nebo Flash Player do jiného prohlížeče. Je jasné, co bude v současnosti snazší a pravděpodobnější…

Sten Fil

Pokud jsem pochopil vyhoda ma byt v tom, ze TCP spojeni s serverem je trvale.
A je to rozumne drzet TCP spojeni? Nenarazi server brzy na limit soucasnych TCP spojeni?

dc

Super, konecne nieco zaujimave a nejaky ten posun v komunikacii medzi klientom a serverom. Aj tak javascriptova podpora vyzera celkom pouzitelne.
Ale zasa sa vratim spat, naco je to cele dobre ? Zasa objavujeme koleso ktore tu uz roky mame pri desktopovych aplikaciach.

YF

hmhm :)) webova evoluce me nikdy neprestane prekvapovat – je to rok od roku zajimavejsi a zajimavejsi poctenicko – myslim ze byt v dnesni dobe webovy odbornik musi zakonite koncit zhroucenim osobnosti – absolutnim silenstvim nebo ritualni sebevrazdou

ii

tiez mam uz nejaku dobu ten pocit ;)

Misha

Nejsem programátor, ale jak moc se to liší od již existujících nástrojů jako je třeba http://www.lightstreamer.com ?

pes

poradil by nekdo jak rozchodit server s podporou ws?
pro testovani pouzivam virtualni serve nad vmwarem s debianem lenny
apache+php5+p­ython+pywebsoc­ket_mod
FF spravne zahlasi, ze websocket neumi, ale Chrome (ve verzi, ktera websocket ma umet) se zastavi na timeoutu …
diky za radu

Ondřej Mastík

Zajímalo by mě jestli by WebSocket client zvládl komunikaci s .NET C# TcpServerem.

Martin Hassman

WeSocket běží nad TCP, tak by to neměl být problém, ale pokud si nechcete serverovou stranu websocketu programovat sám (to nechcete), zkuste se podívat, zda pro .NET neexistuje nějaká knihovna.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.