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 func...
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 re...
CORS – Client Side 
var xhr = new XMLHttpRequest(); 
xhr.open(“get”, url, true); 
xhr.onload = function () { 
// instead o...
CORS – Client Side API 
• Functions: 
o abort() – stops a request that is already in progress 
o send() – sends a request ...
CORS – Access Control Flow 
• Client sends ‘Access-Control’ headers during 
request preflight 
o Using the OPTIONS HTTP re...
CORS – Server Side 
• Use Access-Control headers to allow 
o Origin – Specific request URI 
o Method – request method (GET...
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 
...
Server-Sent Events - Server 
• Strict server protocol: 
data: This is a message. 
event: add 
data: 73857293 
• Response c...
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 underlyin...
Web Sockets – Client Request 
• The client sends a WebSocket handshake request 
GET /chat HTTP/1.1 
Host: server.example.c...
Web Sockets – Server Response 
• The server responses with a WebSocket handshake 
response 
HTTP/1.1 101 Switching Protoco...
Web Sockets – API 
• Create a WebSocket object using a URL 
• Use the WebSocket object’s built-in events: 
o onopen – fire...
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 lo...
Resources 
• APIs specs – 
http://www.w3.org/TR/html5/comms.html 
http://www.w3.org/TR/cors/ 
http://www.w3.org/TR/eventso...
Thank You!
Upcoming SlideShare
Loading in …5
×

Using Communication and Messaging API in the HTML5 World

505 views

Published on

A session I delivered in Codemotion Tel Aviv.

Published in: Software
  • Be the first to comment

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!

×