Javabár2013. január 10.
HTTP/1.1 101 Switching ProtocolsUpgrade: websocket        HTML5 Messaging              Radics László         laszlo.radics...
Cél✓ Kliens – szerver kommunikáció  ✓ (kliens: HTML oldal, JavaScript, böngésző)✓ Kliens – kliens kommunikáció✓ Egyirányú,...
Az előadás menete✓ Történeti áttekintés✓   Comet✓   Server-sent events✓   WebSocket✓   Same origin policy✓   További HTML5...
Ki programozott        már...✓ AJAX-ot✓ Cometet✓ Websocketet
Kommunikáció        fejlődése✓ Statikus oldalak✓ Refresh (<META> vagy JavaScript)✓ Ajax ← aszinkron poll✓ Comet (gyűjtőfog...
AJAX és Comet
Comet módszerek✓ XMLHttpRequest✓ Script  ✓ Polling  ✓ Streaming
Üzenetküldések
HTTP Overhead      ?
HTTP Overhead    800 – 2000 byte    Most: 2273
Comet?✓ Működik!      ✓ Szálkezelés szerver és                  kliens oldalon                ✓ Hatalmas HTTP             ...
Server-sent events✓ Tulajdonképpen a Comet szabvánnyá előléptetése✓ Egyirányú kapcsolat✓ Saját szöveg alapú protokollja va...
WebSocket✓ TCP alapú✓ Full-duplex✓ Alacsony overhead✓ HTTP-vel osztozhat a (80/443) porton✓ Szöveges és bináris✓ W3C API (...
Böngésző támogatottság✓ caniuse.com
WebSocket - JavaScript
WebSocket - Java✓ JSR 356 majd           ✓ Külön keretrendszerek✓ Servlet 3.1 majd         ✓ Atmosphere✓ Nem szabványos AP...
Mi volt az előadás      címe?
HTTP/1.1 101 Switching ProtocolsUpgrade: websocket        HTML5 Messaging              Radics László         laszlo.radics...
WebSocket HandshakeGET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlI...
WebSocket HandshakeHTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ...
WebSocket Keretek✓ Rövid fejléc✓ Az adat lehet szöveges (UTF-8) vagy bináris✓ A kliens által küldött keretek maszkolva van...
Keretek megfigyelése
WebSocket      Subprotocols✓ Stomp              ✓ XMPP, AMPQ ✓ Apache ActiveMQ    ✓ Kaazing ✓ Apache Apollo     ✓ Wamp ✓ H...
Same origin policy✓ Böngészőbe épített biztonsági feature  ✓ Csak azonos forrásra kapcsolódhat         ✓         ✓        ...
De mi számít azonosnak?✓ Böngészőbe épített biztonsági feature  ✓ Csak azonos forrásra kapcsolódhat         ✓         ✓   ...
Azonos forrás  http://example.com             ✓ Különböző✓ Azonos:                          ✓ http://www.example.com  ✓ ht...
A probléma✓ A szerver és a kliens valóban kommunikálni szeretne✓ Hackek (document.domain, window.name,  egymásba ágyazott ...
A megoldás: CORS     ✓ Cross Origin Resource Sharing     ✓ Origin: header a kérésben     ✓ Preflight, pl. ha nem GET/POST ...
Web Messaging✓ Cross-document messaging✓ Channel
Web Workers                     FőszálJómunkás
Esettanulmány: Pong ✓ Szerver ActiveMQ + Kaazing ✓ Csak kliens oldali JavaScript kód ✓ Két szerver egy Magyarországon, egy...
Interkontinentális játék
Sebesség✓ Sokkal lassabb üzenetküldés  ✓ Hálózat késleltetése miatt  ✓ A MQ késleltetése miatt  ✓ ACK csomagok miatt  ✓ Eg...
A „csalás”✓ Szinkronizáció csak ütközéskor
Önkorlátozás✓ Nagy érzékenységű távirányító✓ Sürű események✓ Lehet interpolálni a végpontból✓ Üzenet eldobás
Köszönöm       Kérdések?laszlo.radics@drotposta.hu
Websocket
Websocket
Websocket
Upcoming SlideShare
Loading in …5
×

Websocket

722 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Websocket

  1. 1. Javabár2013. január 10.
  2. 2. HTTP/1.1 101 Switching ProtocolsUpgrade: websocket HTML5 Messaging Radics László laszlo.radics@drotposta.hu Javabár 2013. Január 10.
  3. 3. Cél✓ Kliens – szerver kommunikáció ✓ (kliens: HTML oldal, JavaScript, böngésző)✓ Kliens – kliens kommunikáció✓ Egyirányú, kétirányú, aszinkron, biztonságos legyen✓ Korai technológiáktól WebSocketig
  4. 4. Az előadás menete✓ Történeti áttekintés✓ Comet✓ Server-sent events✓ WebSocket✓ Same origin policy✓ További HTML5 üzenetküldéses API-k ✓ Web messaging ✓ Webworkers
  5. 5. Ki programozott már...✓ AJAX-ot✓ Cometet✓ Websocketet
  6. 6. Kommunikáció fejlődése✓ Statikus oldalak✓ Refresh (<META> vagy JavaScript)✓ Ajax ← aszinkron poll✓ Comet (gyűjtőfogalom) ← push✓ Server-sent events ← HTML5✓ WebSocket ← A király
  7. 7. AJAX és Comet
  8. 8. Comet módszerek✓ XMLHttpRequest✓ Script ✓ Polling ✓ Streaming
  9. 9. Üzenetküldések
  10. 10. HTTP Overhead ?
  11. 11. HTTP Overhead 800 – 2000 byte Most: 2273
  12. 12. Comet?✓ Működik! ✓ Szálkezelés szerver és kliens oldalon ✓ Hatalmas HTTP overhead ✓ Biztonsági problémák ✓ Bonyolult hackek, nincs szabvány
  13. 13. Server-sent events✓ Tulajdonképpen a Comet szabvánnyá előléptetése✓ Egyirányú kapcsolat✓ Saját szöveg alapú protokollja van✓ A böngésző kezeli a pollingot, szakadás esetén újraépíti a kapcsolatot
  14. 14. WebSocket✓ TCP alapú✓ Full-duplex✓ Alacsony overhead✓ HTTP-vel osztozhat a (80/443) porton✓ Szöveges és bináris✓ W3C API (JavaScript)✓ IETF Protocol (RFC 6455)
  15. 15. Böngésző támogatottság✓ caniuse.com
  16. 16. WebSocket - JavaScript
  17. 17. WebSocket - Java✓ JSR 356 majd ✓ Külön keretrendszerek✓ Servlet 3.1 majd ✓ Atmosphere✓ Nem szabványos API-k ✓ CometD ✓ Jetty ✓ Kaazing ✓ Tomcat ✓ JMS API-n keresztül ✓ Grizzly ✓ Kaazing ✓ Apache ActiveMQ, Apollo ...
  18. 18. Mi volt az előadás címe?
  19. 19. HTTP/1.1 101 Switching ProtocolsUpgrade: websocket HTML5 Messaging Radics László laszlo.radics@drotposta.hu Javabár 2013. Január 10.
  20. 20. WebSocket HandshakeGET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.comSec-WebSocket-Protocol: chat, superchat
  21. 21. WebSocket HandshakeHTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzhZRbK+xOo=Sec-WebSocket-Protocol: chat
  22. 22. WebSocket Keretek✓ Rövid fejléc✓ Az adat lehet szöveges (UTF-8) vagy bináris✓ A kliens által küldött keretek maszkolva vannak (XOR)
  23. 23. Keretek megfigyelése
  24. 24. WebSocket Subprotocols✓ Stomp ✓ XMPP, AMPQ ✓ Apache ActiveMQ ✓ Kaazing ✓ Apache Apollo ✓ Wamp ✓ HornetQ ✓ http://wamp.ws/ ✓ RabbitMQ ✓ Kaazing
  25. 25. Same origin policy✓ Böngészőbe épített biztonsági feature ✓ Csak azonos forrásra kapcsolódhat ✓ ✓ Csak azonos oldalról letöltött tartalomhoz férhet hozzá
  26. 26. De mi számít azonosnak?✓ Böngészőbe épített biztonsági feature ✓ Csak azonos forrásra kapcsolódhat ✓ ✓ Csak azonos oldalról letöltött tartalomhoz férhet hozzá
  27. 27. Azonos forrás http://example.com ✓ Különböző✓ Azonos: ✓ http://www.example.com ✓ http://example.com/ ✓ http://example.org ✓ http://example.com/my/page.html ✓ https://example.com ✓ http://example.com:8080
  28. 28. A probléma✓ A szerver és a kliens valóban kommunikálni szeretne✓ Hackek (document.domain, window.name, egymásba ágyazott iframek, url hash change)✓ JSONP (JSON with padding) ✓ best practice ✓ de támogatottsága gyenge ✓ csak GET
  29. 29. A megoldás: CORS ✓ Cross Origin Resource Sharing ✓ Origin: header a kérésben ✓ Preflight, pl. ha nem GET/POST ✓ file:// problémaREQUEST:Origin:http://localhost2:9080RESPONSE:Access-Control-Allow-Origin:http://localhost2:9080
  30. 30. Web Messaging✓ Cross-document messaging✓ Channel
  31. 31. Web Workers FőszálJómunkás
  32. 32. Esettanulmány: Pong ✓ Szerver ActiveMQ + Kaazing ✓ Csak kliens oldali JavaScript kód ✓ Két szerver egy Magyarországon, egy Amerikában
  33. 33. Interkontinentális játék
  34. 34. Sebesség✓ Sokkal lassabb üzenetküldés ✓ Hálózat késleltetése miatt ✓ A MQ késleltetése miatt ✓ ACK csomagok miatt ✓ Egy szálon futott a JavaScript ✓ Kliens - kliens✓ Kb. max 40 msg/sec
  35. 35. A „csalás”✓ Szinkronizáció csak ütközéskor
  36. 36. Önkorlátozás✓ Nagy érzékenységű távirányító✓ Sürű események✓ Lehet interpolálni a végpontból✓ Üzenet eldobás
  37. 37. Köszönöm Kérdések?laszlo.radics@drotposta.hu

×