Insidrrr Day 1: Simon Tiffert - Real Time Web

590 views
535 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
590
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • Request und Response - hat uns weit gebracht\nAber hat auch die Grenzen für manche Arten von Anwendungen aufgezeigt.\n\nDauerhafter Datenfluss von Client => Server und von Server => Client sind echte Herausforderungen\n
  • Bisher \n- Ajax Polling\n- Flash injection\n- Long running polling\n- Cometd\n
  • Bisher \n- Ajax Polling\n- Flash injection\n- Long running polling\n- Cometd\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • HTML5 Standard\n
  • \n
  • HTML5 ist in Bewegung, und die Browser erst recht\n- Heartbeat\n- Topics\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Insidrrr Day 1: Simon Tiffert - Real Time Web

    1. 1. Real-Time WebWith socket.io and node.js
    2. 2. Request (URL)Client Server Response (static page, JSON, ...) Good old HTTP Request and Response
    3. 3. Auto RefreshAjax Polling Long Polling FlashSocket CometD iframe Push server data to the client
    4. 4. WebSocket Push server data to the client
    5. 5. WebSocket Client Server
    6. 6. WebSocket Client HTTP 80/443 equest R Handshake Server
    7. 7. WebSocket Client HTTP 80/443 ponse equest ake Res R Handshake Handsh Connection Upgrade Server
    8. 8. WebSocket Client HTTP 80/443 ponse equest ake Res R Handshake Handsh Connection Upgrade Server
    9. 9. WebSocket Client HTTP 80/443 ponse equest ake Res R Data 1 Handshake Handsh Connection Upgrade Server
    10. 10. WebSocket Client HTTP 80/443 ponse equest ake Res R Data 1 Data 2 Handshake Handsh Connection Upgrade Server
    11. 11. WebSocket Client HTTP 80/443 ponse equest ake Res R Data 1 Data 2 Data 3 Handshake Handsh Connection Upgrade Server
    12. 12. HTTP 80/443 R equest Handshake WebSocket Handsh ake Res ponse Connection Upgrade Data 1 Data 2 ClientServer Data 3 Data 4
    13. 13. Socket.io WebSocket-Support with fallbacks • IE 5.5+ • WebSocket • Safari 3+ • Adobe Flash • Google Chrome 4+ Socket • Firefox 3+ • AJAX long polling • Opera 10.61+ • AJAX multipart streaming • iPhone Safari • Forever IFrame • iPad Safari • JSONP Polling • Android WebKit • WebOs WebKit
    14. 14. Client code = server code? node.js a server based on the V8 Google Chrome engine
    15. 15. Let’s get dirty http://nodejs.org/#download
    16. 16. Let’s get dirty http://nodejs.org/#download Installation
    17. 17. Let’s get dirty http://nodejs.org/#download Installation mkdir insidrrr cd insidrrr npm install socket.io
    18. 18. Coding
    19. 19. Thank YouSimon Tiffert | Twitter: geveo | DevLead @ Viaboxx

    ×