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 function

• Wire handlers to the message event

6

window.postMessage(message, domain);

window.addEventListener("message", function () {

// do something

}, false);

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 requests as long as: o Response includes Access-Control-Allow-Origin header

o XMLHttpRequest supports CORS

• XDomainRequest in IE8 and IE9

CORS – Client Side var xhr = new XMLHttpRequest();

xhr.open(“get”, url, true);

xhr.onload = function () {

// instead of using onreadystatechange

}

xhr.send();

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

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

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

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 source = new EventSource(url);

source.onmessage = function (e) {

console.log(e.data);

}

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

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 network

• Can replace old techniques such as: o Forever frames

o Long-polling/comet

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

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

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

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 more to cover

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

Thank You!