Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

WebSocket bemutatás

408 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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?

×