Successfully reported this slideshow.
Your SlideShare is downloading. ×

Using Communication and Messaging API in the HTML5 World

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Using Communication and Messaging API in the HTML5 World

  1. 1. Using Communication and Messaging API in The HTML5 World Gil Fink CEO, sparXys @gilfink, http://www.gilfink.net
  2. 2. Agenda • HTML5: Recap • HTML5 Messaging APIs • HTML5 Communication APIs • Q&A • Summary
  3. 3. HTML5: Recap • HTML5 ~= HTML + CSS3 + new JavaScript API • The present and future of the web • W3C Recommendation!
  4. 4. What’s Under the HTML5 Umbrella?
  5. 5. Communication and Messaging
  6. 6. Cross-Document Messaging • Simple API to send and receive in-window messages • Send messages using the postMessage function • Wire handlers to the message event 6 window.postMessage(message, domain); window.addEventListener("message", function () { // do something }, false);
  7. 7. DEMO Cross-Document Messaging Web Worker
  8. 8. Web Application APIs Support – Cross-Document Messaging http://caniuse.com
  9. 9. Cross-Origin Resource Sharing (CORS) • Browsers prevent cross-domain JavaScript requests • CORS enables cross-domain requests as long as: o Response includes Access-Control-Allow-Origin header o XMLHttpRequest supports CORS • XDomainRequest in IE8 and IE9
  10. 10. CORS – Client Side var xhr = new XMLHttpRequest(); xhr.open(“get”, url, true); xhr.onload = function () { // instead of using onreadystatechange } xhr.send();
  11. 11. CORS – Client Side API • Functions: o abort() – stops a request that is already in progress o send() – sends a request to the server • Event handlers: o onerror – handles request errors o onload – handles request success
  12. 12. CORS – Access Control Flow • Client sends ‘Access-Control’ headers during request preflight o Using the OPTIONS HTTP request • Server checks whether the requested resource is allowed • Client checks the preflight response and decides whether to allow the request
  13. 13. CORS – Server Side • Use Access-Control headers to allow o Origin – Specific request URI o Method – request method (GET, POST and etc.) o Headers – optional custom headers o Credentials – request credentials
  14. 14. DEMO CORS
  15. 15. Web Application APIs Support – CORS http://caniuse.com
  16. 16. Server-Sent Events • Enables servers to push data over HTTP using push protocols • Use the EventSource JavaScript API var source = new EventSource(url); source.onmessage = function (e) { console.log(e.data); }
  17. 17. Server-Sent Events - Server • Strict server protocol: data: This is a message. event: add data: 73857293 • Response content type should be text/event-stream • Keeps the connection open
  18. 18. DEMO Server-Sent Events
  19. 19. Web Application APIs Support – Server-Sent Events http://caniuse.com
  20. 20. Real Time Web?
  21. 21. Existing Solutions
  22. 22. Web Sockets • Bidirectional communications channels, over a single TCP socket • Don’t allow raw access to the underlying network • Can replace old techniques such as: o Forever frames o Long-polling/comet
  23. 23. Web Sockets – Client Request • The client sends a WebSocket handshake request GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat
  24. 24. Web Sockets – Server Response • The server responses with a WebSocket handshake response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat
  25. 25. Web Sockets – API • Create a WebSocket object using a URL • Use the WebSocket object’s built-in events: o onopen – fired when a web socket has opened o onmessage – fired when a message has been received o onclose – fired when a web socket has been closed
  26. 26. DEMO Web Sockets
  27. 27. Web Application APIs Support – Web Sockets http://caniuse.com
  28. 28. Questions?
  29. 29. Summary • HTML5 is a W3C recommendation • In this session we explored communication and messaging APIs • You have a lot more to cover
  30. 30. Resources • APIs specs – http://www.w3.org/TR/html5/comms.html http://www.w3.org/TR/cors/ http://www.w3.org/TR/eventsource/ http://www.w3.org/TR/websockets/ • My Blog – http://www.gilfink.net • Follow me on Twitter – @gilfink
  31. 31. Thank You!

×