Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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á...
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...
HTTP request header példa (993 byte)
Host: index.hu
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:42.0) Gecko/20100101
Fi...
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
...
Ajax polling
 Hogyan jut el a kliensre a szerveroldalon frissült adat?
 Megoldás: kliens oldalon időzített, ismétlődő re...
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
 201...
WebSocket kapcsolat felépítése
 HTTP kérés:
GET /wstest HTTP/1.1
Host: server.example.com
Sec-WebSocket-Version:"13"
Sec-...
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 kapcsol...
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 + ...
WebSocket kliens JavaScriptben
WebSocket élő bemutató
Kérdések?
WebSocket bemutatás
Upcoming SlideShare
Loading in …5
×

WebSocket bemutatás

379 views

Published on

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

Published in: Internet
  • Be the first to comment

WebSocket bemutatás

  1. 1. WebSocket – mi van az AJAX-on túl?
  2. 2. Történeti áttekintés  HTTP (1991)  Ajax (2005)  Long-polling (2007)  WebSocket (2011)
  3. 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. 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. 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. 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. 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. 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. 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. 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. 11. Secure WebSocket  ws:// és wss:// URI prefixek (WebSocket Secure)  TLS titkosítás (SSL utódja)
  12. 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. 13. WebSocket – polling összehasonlítás
  14. 14. WebSocket böngésző támogatottsága  IE10+, Chrome 16+, Firefox 11+  2014-es állapot szerint részletesen:
  15. 15. 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
  16. 16. WebSocket kliens JavaScriptben
  17. 17. WebSocket élő bemutató
  18. 18. Kérdések?

×