SlideShare a Scribd company logo
1 of 40
Download to read offline
Javabár
2013. január 10.
HTTP/1.1 101 Switching Protocols
Upgrade: websocket


        HTML5 Messaging

              Radics László

         laszlo.radics@drotposta.hu

         Javabár 2013. Január 10.
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
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
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őfogalom) ← push
✓ Server-sent events ← HTML5
✓ WebSocket ← A király
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
                  overhead

                ✓ Biztonsági problémák

                ✓ Bonyolult hackek, nincs
                  szabvány
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
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)
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 API-k     ✓ CometD
  ✓ Jetty                  ✓ Kaazing
  ✓ Tomcat               ✓ JMS API-n keresztül
  ✓ Grizzly                ✓ Kaazing
                           ✓ Apache ActiveMQ,
                             Apollo ...
Mi volt az előadás
      címe?
HTTP/1.1 101 Switching Protocols
Upgrade: websocket


        HTML5 Messaging

              Radics László

         laszlo.radics@drotposta.hu

         Javabár 2013. Január 10.
WebSocket Handshake
GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Origin: http://example.com

Sec-WebSocket-Protocol: chat, superchat
WebSocket Handshake
HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzhZRbK+xOo=

Sec-WebSocket-Protocol: chat
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)
Keretek megfigyelése
WebSocket
      Subprotocols
✓ Stomp              ✓ XMPP, AMPQ

 ✓ Apache ActiveMQ    ✓ Kaazing

 ✓ Apache Apollo     ✓ Wamp

 ✓ HornetQ            ✓ http://wamp.ws/

 ✓ RabbitMQ

 ✓ Kaazing
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á
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á
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
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
A megoldás: CORS
     ✓ Cross Origin Resource Sharing

     ✓ 'Origin:' header a kérésben

     ✓ Preflight, pl. ha nem GET/POST

     ✓ 'file://' probléma
REQUEST:
Origin:http://localhost2:9080

RESPONSE:
Access-Control-Allow-Origin:http://localhost2:9080
Web Messaging
✓ Cross-document messaging

✓ Channel
Web Workers
                     Főszál




Jómunkás
Esettanulmány: Pong
 ✓ Szerver ActiveMQ + Kaazing

 ✓ Csak kliens oldali JavaScript kód

 ✓ Két szerver egy Magyarországon, egy
   Amerikában
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

  ✓ Egy szálon futott a JavaScript

  ✓ Kliens - kliens

✓ Kb. max 40 msg/sec
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

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Websocket

  • 2. HTTP/1.1 101 Switching Protocols Upgrade: websocket HTML5 Messaging Radics László laszlo.radics@drotposta.hu Javabár 2013. Január 10.
  • 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.
  • 5. 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
  • 6. Ki programozott már... ✓ AJAX-ot ✓ Cometet ✓ Websocketet
  • 7. 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
  • 9. Comet módszerek ✓ XMLHttpRequest ✓ Script ✓ Polling ✓ Streaming
  • 12. HTTP Overhead 800 – 2000 byte Most: 2273
  • 13. Comet? ✓ Működik! ✓ Szálkezelés szerver és kliens oldalon ✓ Hatalmas HTTP overhead ✓ Biztonsági problémák ✓ Bonyolult hackek, nincs szabvány
  • 14. 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
  • 15. 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)
  • 18. 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 ...
  • 19. Mi volt az előadás címe?
  • 20. HTTP/1.1 101 Switching Protocols Upgrade: websocket HTML5 Messaging Radics László laszlo.radics@drotposta.hu Javabár 2013. Január 10.
  • 21. WebSocket Handshake GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat
  • 22. WebSocket Handshake HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzhZRbK+xOo= Sec-WebSocket-Protocol: chat
  • 23. 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)
  • 25. WebSocket Subprotocols ✓ Stomp ✓ XMPP, AMPQ ✓ Apache ActiveMQ ✓ Kaazing ✓ Apache Apollo ✓ Wamp ✓ HornetQ ✓ http://wamp.ws/ ✓ RabbitMQ ✓ Kaazing
  • 26.
  • 27.
  • 28. 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á
  • 29. 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á
  • 30. 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
  • 31. 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
  • 32. A megoldás: CORS ✓ Cross Origin Resource Sharing ✓ 'Origin:' header a kérésben ✓ Preflight, pl. ha nem GET/POST ✓ 'file://' probléma REQUEST: Origin:http://localhost2:9080 RESPONSE: Access-Control-Allow-Origin:http://localhost2:9080
  • 33. Web Messaging ✓ Cross-document messaging ✓ Channel
  • 34. Web Workers Főszál Jómunkás
  • 35. Esettanulmány: Pong ✓ Szerver ActiveMQ + Kaazing ✓ Csak kliens oldali JavaScript kód ✓ Két szerver egy Magyarországon, egy Amerikában
  • 37. 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
  • 39. Ö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
  • 40. Köszönöm Kérdések? laszlo.radics@drotposta.hu