WebSocket ismertető előadás az InfoÉra konferenciáról

1. WebSocket – mi van az AJAX-on túl?

2. Történeti áttekintés
 HTTP (1991)
 Ajax (2005)
 Long-polling (2007)
 WebSocket (2011)

3. HTTP
 World Wide Web alapját képező protokoll
 Első dokumentált verzió 1991-ből származik
 Kérés-válasz alapú kommunikáció kliens és szerver között
 Állapot nélküli (stateless) protokoll

4. Problémák a HTTP-vel
 Mindig a kliens a kommunikációt kezdeményező fél
 Böngészőben mindig teljes oldalletöltés történik
 Klasszikus HTTP response lezárja a TCP socket-et
 Nem alkalmas alacsony válaszidejű működésre
 Zajos protokoll (headerek, cookie-k mérete)
Konkurrens kliensek száma Átlagos header méret Sávszélesség igény
1 000 871 000 6,8 Mbps
10 000 8 710 000 68 Mbps
100 000 87 100 000 680 Mbps

5. HTTP request header példa (993 byte)
Host: index.hu
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:42.0) Gecko/20100101
Firefox/42.0
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en,en-US;q=0.7,hu;q=0.3
Accept-Encoding: gzip, deflate
Cookie: __gfp_64b=YBgnZgy3m1_Kz6yWsByjw.tUhMVbYuQVBzNg56hDXlf.p7;
_goa3=eyJ1IjoiMTQxMTA1NDcwOTgzOTQ4NjY3NzUxMyIsImgiOiI5MS44Mi4xMjguMj
IxIiwicyI6MTQxNTE3Nzc1Mjc3MH0=;
_goa3TC=eyIzNDk5MTk5IjoxNDQ0OTE1MDc1NjgwfQ==; _goa3TS=e30=;
_ga=GA1.2.1433376824.1415177764; ff_uvid=7772940;
_chartbeat2=CBNW27DQTa5c5lsHu.1415177764677.1415177764677.1;
INX_CHECKER2=1; inx_checker2=1; olvasobarat=true; inx_checker2=1;
ads_bm_last_load_status=BLOCKING; bm_last_load_status=NOT_BLOCKING;
passportHeader_2702639-2015-10-30_10_43_57=4;
ident=545d36228a8617f81d0019f9; mobile_detect=desktop;
PHPSESSID=mkkhkfsq6kbvueh2hji2mlp246; passportHeader_2720261-2015-
11-26_09_49_00=4
Connection: keep-alive
If-Modified-Since: Thu, 26 Nov 2015 16:29:00 GMT
Cache-Control: max-age=0

6. Ajax
 Aszinkron Javascript, részleges oldalfrissítés
 Cél:
 a felhasználói élmény fokozása
 sávszélesség csökkentése
 sebesség növelése
 Web Performance Inc. 2006-os tanulmánya:
 Probléma: még mindig a kliens kezdeményez
Működési elv Első oldal méret Átlagos oldal méret Szumma méret
HTTP 44k 10k 210k
HTTP + Ajax 47k 2.5k 81k
Sávszélesség megtakarítás: 61% fölött!

7. Ajax polling
 Hogyan jut el a kliensre a szerveroldalon frissült adat?
 Megoldás: kliens oldalon időzített, ismétlődő request-ek
 Problémák:
 Felesleges hálózati forgalom
 Nagy sávszélesség igény
 Felesleges terhelés a szerveroldalon

8. Long polling
 Ajax alapú trükk szerver oldali „push” szimulálására
 Hagyományos polling, de a szerver kivár a válasszal…

9. WebSocket
 HTTP-tól független TCP protokoll
 Kétirányú, perzisztens, full-duplex csatorna kliens és szerver között
 2011 óta szabvány: RFC 6455
 80-as TCP porton működik -> nincs tűzfal/proxy probléma
 A küldés/fogadás üzenet alapú
 Üzenetek technikailag frame-ekre bontva utaznak (6 byte-os header!)

10. WebSocket kapcsolat felépítése
 HTTP kérés:
GET /wstest HTTP/1.1
Host: server.example.com
Sec-WebSocket-Version:"13"
Sec-WebSocket-Key:"2yJIeg5iwroBBmCpUPCy+A=="
Connection: keep-alive, Upgrade
Upgrade: websocket
 HTTP válasz:
HTTP/1.1 101 Switching Protocols
Sec-WebSocket-Accept:"jT2uT0a6MYwabx3iWngsre6+Gpw="
Connection: Upgrade
Upgrade: WebSocket
 Ezzel a handshake-kel a kommunikáció átvált a WebSocket protokollra

11. Secure WebSocket
 ws:// és wss:// URI prefixek (WebSocket Secure)
 TLS titkosítás (SSL utódja)

12. WebSocket – miért jobb?
 Kétirányú duplex kapcsolat
 Szerver is tud kommunikációt kezdeményezni
 Nincs HTTP/TCP kapcsolat lebontás és újraépítés
 Perzisztens, biztonságos
 Nincs HTTP header küldés minden requestnél
 (cookie-k, content-type, user-agent, stb)
 HTTP request header: 500-8000 byte
 WebSocket frame header: 6 byte

13. WebSocket – polling összehasonlítás

14. WebSocket böngésző támogatottsága
 IE10+, Chrome 16+, Firefox 11+
 2014-es állapot szerint részletesen:

16. WebSocket alapú fejlesztés
 Szerver oldalon:
 Java EE 7 óta a Java Enterprise szabvány része (Servlet API 3.1)
 Akka + Play Framework (Scala)
 Atmosphere framework (Java)
 stb.
 Kliens oldalon támogatott böngészőkben natív JavaScript API
 Egyszerű, magas szintű API
 Esemény alapú, callback függvények

17. WebSocket kliens JavaScriptben

18. WebSocket élő bemutató

19. Kérdések?