Pushing the Web forward.

Slide 1

Slide 1 text

forward pushing the real-time web

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

observe it !

Slide 4

Slide 4 text

meetup.com/grunnjs

Slide 5

Slide 5 text

! 3rdeden " 3rd-eden with a dash

Slide 6

Slide 6 text

previously

Slide 7

Slide 7 text

Plugins

Slide 8

Slide 8 text

polling

Slide 9

Slide 9 text

short polling

Slide 10

Slide 10 text

long polling

Slide 11

Slide 11 text

var s = document.createElement("script"); s.src = "https://example.com/resource"; s.async = true; var target = document.getElementsByTagName("script")[0]; target.parentNode.insertBefore(s, target); jsonp GET

Slide 12

Slide 12 text

var i = document.createElement("iframe"); i.name = "posttarget"; i.src = "javascript:0"; var f = document.createElement("form"); form.action = "https://example.org/resource"; form.target = i.name; var t = document.createElement("textarea"); t.value = "body to post"; t.name = "data"; f.appendChild(i); f.appendChild(t); document.body.appendChild(f); f.submit(); jsonp POST

Slide 13

Slide 13 text

var iframe = document.createElement("iframe"); document.body.appendChild(iframe); document.body.removeChild(iframe); loading indicator

Slide 14

Slide 14 text

var xhr = new XMLHttpRequest(); xhr.open("GET", "/resource", true); xhr.onreadystatechange = function () { // Process the polling. }; xhr.send(); xhr

Slide 15

Slide 15 text

var xhr = new XDomainRequest(); xhr.open("GET", "http://example.com/resource", true); xhr.onload = function () { console.log(xhr.responseText); }; xhr.send(); XDOMAINREQUEST

Slide 16

Slide 16 text

window.addEventListener("load", connect, false); loading indicator

Slide 17

Slide 17 text

caching is a major problem especially back-foward cache

Slide 18

Slide 18 text

var i = 0; // // Generate unique URL for all GET/POST/PUT/* requests // var unique = +new Date() +":"+ i++; url = url + (~url.indexOf("?") ? "&" : "?") +"t="+ unique; stamp + unique

Slide 19

Slide 19 text

now

Slide 20

Slide 20 text

websockets

Slide 21

Slide 21 text

good enough browser support

Slide 22

Slide 22 text

just because its posted on the internet it doesn't mean its true chrome should be flagged as partial correction*

Slide 23

Slide 23 text

GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 The handshake from the server looks as follows: HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat complex but optimized protocol 22,043 words, 01:50:12 reading time

Slide 24

Slide 24 text

var ws; try { ws = new WebSocket("wss://localhost:8080/"); } catch () { return console.error("shit happend", e); } ws.onmessage = function message(event) { console.log(event.data); }; ws.onclose = function close() { console.log(event.data); }; ws.send("Sup Fronteers"); simple and understandable api

Slide 25

Slide 25 text

var ws; try { ws = new WebSocket("wss://localhost:8080/"); } catch () { return console.error("shit happend", e); } ws.binaryType = "arraybuffer"; var image = canvas.getContext("2d").getImageData(0, 0, 440, 300) , data = new Uint8Array(image.data.length); for (var i = 0; i < image.data.length; i++) { data[i] = image.data[i]; } ws.send(data.buffer); binary

Slide 26

Slide 26 text

websockets u*

Slide 27

Slide 27 text

HTTP proxy settings in your network settings can cause a full browser crash luckly, its mac only

Slide 28

Slide 28 text

if ( // Target safari browsers $.browser.safari // Not chrome && !$.browser.chrome // And correct WebKit version && parseFloat($.browser.version, 0) < 534.54 ) { // Don’t use WebSockets. return; } browser sniffing

Slide 29

Slide 29 text

Writing to a closed WebSocket connection can crash your phone Affects Mobile Safari when returning to the page from a different tab or retrieving Safari from the background

Slide 30

Slide 30 text

var ws = new WebSocket("wss://localhost:8080/"); ws.onmessage = function message(event) { setTimeout(function timeout() { ws.send("pong:"+ event.data); }, 0); }; add a slight delay

Slide 31

Slide 31 text

var ws = new WebSocket("wss://localhost:8080/"); ws.onmessage = function message(event) { // // Wrap sends in a setTimeout out to allow the // readyState to be correctly set to closed. But // Only have this delay on mobile devices. // if (mobile) return setTimeout(function timeout() { ws.send("pong:"+ event.data); }, 0); ws.send("pong:"+ event.data); }; dont introduce pointless latency

Slide 32

Slide 32 text

pressing esc in firefox closes the connection fixed in firefox 20

Slide 33

Slide 33 text

$("body").keydown(function (e) { // // make sure that you capture the `esc` key and // prevent it's default action from happening. // if (e.which === 27) e.preventDefault(); }); intercept & prevent

Slide 34

Slide 34 text

firefox can create ghost connections when you connect during ws.close http://bugzil.la/765738

Slide 35

Slide 35 text

lol, mobile - 4g, 3g, LTE all hail the glorious cache proxies

Slide 36

Slide 36 text

var ua = navigator.userAgent.toLowerCase(); // // Detect all possible mobile phones to filter out WebSockets // if ( ~ua.indexOf("mobile") || ~ua.indexOf("android") || ~ua.indexOf("ios") // .. and more .. ) { // Don't use WebSockets. } disable if you have fallbacks

Slide 37

Slide 37 text

http://battlelog.battlefield.com/bf3/forum/threadview/2832654347699167126/1/ https://github.com/Automattic/socket.io/wiki/Socket.IO-and-firewall-software Virus scanners block WebSockets but also extensions.. aka: user environments are hostile

Slide 38

Slide 38 text

same thing, ENOCONNECTIONPOSSIBLE User, network server firewalls

Slide 39

Slide 39 text

out of date Load balancers time to yell at your ops /devops team

Slide 40

Slide 40 text

events server-sent also known as eventsource

Slide 41

Slide 41 text

are...

Slide 42

Slide 42 text

freaking awesome!

Slide 43

Slide 43 text

http://caniuse.com/#search=eventsource even works since opera 8.5+ decent enough browser support

Slide 44

Slide 44 text

HTTP/1.1 200 OK Content-Type: text/event-stream : this is a comment data: this triggers the `message` event event: foo data: this triggers the foo event data: and even has 2 lines, still emitted as one id: 1 data: use message ids to retrieve dropped messages retry: 1000 human readable protocol 4,852 words, 00:24:15 reading time

Slide 45

Slide 45 text

var es = new EventSource("https://example.org/foo/bar"); es.addEventListener("message", function message(evt) { console.log(evt.message); }, false); es.addEventListener("error", function close() { console.log(es.readyState); }, false); simple and understandable api

Slide 46

Slide 46 text

yup! cross domain?

Slide 47

Slide 47 text

// // Check for CORS support. // "withCredentials" in EventSource.prototype; // // And use: // var es = new EventSource(“https://example.org/foo/bar", { withCredentials: true }); cors support

Slide 48

Slide 48 text

// // Sending using postMessage. // var i = document.createElement("iframe"); i.src = "https://example.com/iframe"; document.body.appendChild(i); // // Sending using postMessage. // i.contentWindow.postMessage("hello", origin); window.parent.postMessage("world", origin); // // Receiving messages. // window.addEventListener("message", listener, false); document.attachEvent("onmessage", listener); window.attachEvent("onmessage", listener); sauce: http://stevesouders.com/misc/test-postmessage.php iframe hack

Slide 49

Slide 49 text

http://stackoverflow.com/q/12978466 anti-virus/firewalls buffers up the request

Slide 50

Slide 50 text

bugzil.la/831392 crbug.com/225654 reconnect, maybe? not something you can trust

Slide 51

Slide 51 text

http://tech.ebuddy.com/2013/06/25/server-sent-events-in-action inactive connections

Slide 52

Slide 52 text

control access also known as cors / cross origin

Slide 53

Slide 53 text

HTTP/1.1 200 OK Content-Type: text/event-stream Access-Control-Allow-Origin: https://example.org Access-Control-Allow-Credentials: true When done right, really powerful

Slide 54

Slide 54 text

HTTP/1.1 200 OK Content-Type: text/event-stream Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true non obvious

Slide 55

Slide 55 text

HTTP/1.1 200 OK Content-Type: text/event-stream Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true Origin miss match

Slide 56

Slide 56 text

var xhr = new XMLHttpRequest(); xhr.open("GET", "/resource", true); xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF8"); xhr.timeout = 5000; xhr.onreadystatechange = function () { // Process the XHR request }; xhr.send(); prevent CORS Preflight

Slide 57

Slide 57 text

reconnect

Slide 58

Slide 58 text

! happy connected users

Slide 59

Slide 59 text

! " oh noes!

Slide 60

Slide 60 text

var interval = 3000 , attempt = 0 , times = 10; setTimeout(function reconnect() { attempt++; connect(function (err) { if (attempt === times) return; else if (err) setTimeout(reconnect, interval); }); }, interval); reconnect interval

Slide 61

Slide 61 text

! # reconnect interval

Slide 62

Slide 62 text

Slide 63

Slide 63 text

! # random back off

Slide 64

Slide 64 text

heartbeat

Slide 65

Slide 65 text

client server

Slide 66

Slide 66 text

oﬀline

Slide 67

Slide 67 text

window.addEventListener("offline", function () { console.log("down"); }, false); window.addEventListener("online", function () { console.log("up"); }, false); browser events

Slide 68

Slide 68 text

var img = document.createElement("img"); img.onerror = function () { console.log("down"); }; img.onload = function () { console.log("up"); } img.src = "/favicon.ico?t="+ Date.now(); image check

Slide 69

Slide 69 text

var xhr = new XMLHttpRequest(); xhr.open("HEAD", "/favicon.ico?t="+ Date.now(), true); xhr.timeout = 5000; xhr.onreadystatechange = function () { if (xhr.readyState == 0) console.log("down"); else if (xhr.readyState == 4) { if (xhr.status && xhr.status < 12000) console.log("up"); else console.log("down"); } }; xhr.send(); Or even an xhr

Slide 70

Slide 70 text

connection limit per server major pain but can be avoided

Slide 71

Slide 71 text

different per browser and version http://www.browserscope.org/?category=network

Slide 72

Slide 72 text

especially old versions http://www.browserscope.org/?category=network

Slide 73

Slide 73 text

different subdomain per connection

Slide 74

Slide 74 text

inter tab communication

Slide 75

Slide 75 text

Slide 76

Slide 76 text

var blob = new Blob([ workercode ], { type: "text/javascript" }) , url = URL.createObjectURL(blob) , worker = new SharedWorker(url); worker.port.addEventListener("message", incoming, false); worker.port.start(); // Required for addEventListener. worker.port.postMessage({ can: "send JSON" }); sharedworker , inlined?

Slide 77

Slide 77 text

Slide 78

Slide 78 text