Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using Communication and
Messaging API in The HTML5
World
Gil Fink
CEO, sparXys
@gilfink, http://www.gilfink.net
Agenda
• HTML5: Recap
• HTML5 Messaging APIs
• HTML5 Communication APIs
• Q&A
• Summary
HTML5: Recap
• HTML5 ~= HTML + CSS3 + new JavaScript API
• The present and future of the web
• W3C Recommendation!
What’s Under the HTML5
Umbrella?
Communication and Messaging
Cross-Document Messaging
• Simple API to send and receive in-window
messages
• Send messages using the postMessage functio...
DEMO
Cross-Document Messaging
Web Worker
Web Application APIs Support
– Cross-Document Messaging
http://caniuse.com
Cross-Origin Resource Sharing
(CORS)
• Browsers prevent cross-domain JavaScript requests
• CORS enables cross-domain reque...
CORS – Client Side
var xhr = new XMLHttpRequest();
xhr.open(“get”, url, true);
xhr.onload = function () {
// instead of us...
CORS – Client Side API
• Functions:
o abort() – stops a request that is already in progress
o send() – sends a request to ...
CORS – Access Control Flow
• Client sends ‘Access-Control’ headers during
request preflight
o Using the OPTIONS HTTP reque...
CORS – Server Side
• Use Access-Control headers to allow
o Origin – Specific request URI
o Method – request method (GET, P...
DEMO
CORS
Web Application APIs Support
– CORS
http://caniuse.com
Server-Sent Events
• Enables servers to push data over HTTP using push
protocols
• Use the EventSource JavaScript API
var ...
Server-Sent Events - Server
• Strict server protocol:
• Response content type should be text/event-stream
• Keeps the conn...
DEMO
Server-Sent Events
Web Application APIs Support
– Server-Sent Events
http://caniuse.com
Real Time Web?
Existing Solutions
Web Sockets
• Bidirectional communications channels, over a
single TCP socket
• Don’t allow raw access to the underlying n...
Web Sockets – Client Request
• The client sends a WebSocket handshake request
GET /chat HTTP/1.1
Host: server.example.com
...
Web Sockets – Server Response
• The server responses with a WebSocket handshake
response
HTTP/1.1 101 Switching Protocols
...
Web Sockets – API
• Create a WebSocket object using a URL
• Use the WebSocket object’s built-in events:
o onopen – fired w...
DEMO
Web Sockets
Web Application APIs Support
– Web Sockets
http://caniuse.com
Questions?
Summary
• HTML5 is a W3C recommendation
• In this session we explored communication and
messaging APIs
• You have a lot mo...
Resources
• APIs specs –
http://www.w3.org/TR/html5/comms.html
http://www.w3.org/TR/cors/
http://www.w3.org/TR/eventsource...
Thank You!
Upcoming SlideShare
Loading in …5
×

Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys

570 views

Published on

As presented in CodeMotion Tel Aviv:
http://telaviv.codemotionworld.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys

  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: • Response content type should be text/event-stream • Keeps the connection open data: This is a message. event: add data: 73857293
  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!

×