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

Történeti áttekintés

HTTP (1991)

Ajax (2005)

Long-polling (2007)

WebSocket (2011)

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

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

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

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!

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

Long polling

Ajax alapú trükk szerver oldali „push” szimulálására

Hagyományos polling, de a szerver kivár a válasszal…

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!)

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

Secure WebSocket

ws:// és wss:// URI prefixek (WebSocket Secure)

TLS titkosítás (SSL utódja)

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

WebSocket – polling összehasonlítás

WebSocket böngésző támogatottsága

IE10+, Chrome 16+, Firefox 11+

2014-es állapot szerint részletesen:

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

WebSocket kliens JavaScriptben

WebSocket élő bemutató

Kérdések?