HTML5/JavaScript Communication APIs - DPC 2014

HTML5/JavaScript Communication APIs - DPC 2014

• 1.
  www.arrabiata.co.uk HTML5/JavaScript Communication APIs DutchPHP Conference, 27.06.2014 Christian Wenz [email protected]
• 2.
  Arrabiata Solutions :: As aspecialist for digital solutions we offer our clients all services from conception to realization, support and optimization. Our focus is international with offices in Munich and London. Arrabiata Solutions was founded in 2006 and has more than 30 employees with a combined experience of over 100 successful projects. :: Arrabiata is a full-service digital agency.
• 3.
  AGENDA STATUS QUO WORKING ARONDSOP MESSAGING API SSE & WEB SOCKETS CONCLUSION
• 4.
  Status Quo • GETrequests via anything with an src attribute – No restrictions – Only possible to provide URL • Any (browser-supported) HTTP verb via XMLHttpRequest – Can set headers and HTTP body – Restricted by SOP (same-origin policy) • Protocol, domain, port • Still using HTTP
• 5.
  Working around SOP:JSONP • JSON with padding • Ajax call: – <script src="http://domain/file.ashx?jsonp=func"> </script> • Return value: – func([1, 2, 3]); • „Padding“ is „func“ • Works in virtually any browser • Still is kinda hackish
• 6.
  CORS • Cross-Origin ResourceSharing • Works around the Same Origin Policy • Restrictions must be met, though – Specific Content-type header – Origin header – Server uses Access-Control-Allow-Origin header (value must be * or Origin header for the browser to proceed) • Advanced approach: preflighted requests (e.g. for POST requests to avoid CSRF)
• 7.
  Messaging API • Simplecross-domain mechanism to send/receive data • Works everywhere except IE7-, and limited in IE8+ • Sending: – Access other window (e.g. contentWindow property of an iframe) – Use postMessage() method to send data (1st argument) – For security reasons, use origin of target site as 2nd argument
• 8.
  Messaging API (2) •Receiving: – Wait for window‘s message event. – Event arguments contain the data sent (data property) and the origin of the sender (origin property) – Use postMessage() to send data back to the origin – Sender may use the message event as well to process the data from the receiver.
• 9.
  Server-Sent Events • JavaScriptAPI for long polling requests • Server continously sends data, the client just receives and processes them • Step 1: subscribe to source – var es = new EventSource("polling.ext"); • Step 2: listen to message event – es.onmessage = function(ev) { console.log(ev.data); }; • Works almost everywhere except IE
• 10.
  Stream Format • Content-type:text/event-stream • Fields: id, data, event, retry (all optional!) • Format: <field>: <value> • Blank lines between fields • id: 123 data: abc id: 456 event: def
• 11.
  Reconnecting to theServer • Browser reconnects the connection every few seconds (unless changed by retry stream value) • Browser sends Last-Event-ID HTTP header if server sent ID before • Allows server to only send new events
• 12.
  Web Sockets • Fullduplex communication • Circumvents a few of the disadvantages of HTTP (metadata sent with each request, re- establishment of the connection, etc.) • Works in all recent browsers except IE9-
• 13.
  HTTP Handshake • Request: GET/chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com • Response: HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
• 14.
  API for WebSockets • Server: depends on the technology used; node.js is the poster child of the month • Client: – var w = new WebSocket("ws://server:1234"); – w.onopen = function(ev) { w.send("Hi!"); } w.onmessage = function(ev) { console.log(ev.data); }
• 15.
  Websocket Server withnode.js var server = require('http'); var webSocketServer = require("websocket").server; server.listen(1234); var wsServer = new webSocketServer({ httpServer: server }); wsServer.on('request', function(request) { … });
• 16.
  Socket.IO • There arecountless protocol versions for Web Sockets • Better use an abstraction layer that also provides polyfills for browsers that use an older API version, e.g. Socket.IO (http://socket.io/). • Server: – var io = require("socket.io").listen(1234); • Client: – var ws = io.connect("http://127.0.0.1:1234");
• 17.
  Decision Chart Technique X-DomainReturn data Backchannel Long running High Performance src      XHR      JSONP      CORS      Messaging      Workers      Server-Sent Events      Web Sockets     
• 18.
  Thank You! • [email protected] •http://www.arrabiata.co.uk/ • @chwenz • Rate this session: http://joind.in/talk/view/10857