Node, Real-time, HTML5: why wait?

Slide 1

Slide 1 text

Node. Real Time. HTML5. Why Wait? http://www.ﬂickr.com/photos/botosynthetic/7107597727

Slide 2

Slide 2 text

The Plan • Context - why is real-time important? • What is Node.js? • Real-time client technology • My experience • Live coding live data...!

Slide 3

Slide 3 text

Why do I care about Node?

Slide 4

Slide 4 text

I worked in the finance web industry, and real-time prices were the golden egg.

Slide 5

Slide 5 text

Comet was the right solution. http://www.ﬂickr.com/photos/chrs_snll/373710073

Slide 6

Slide 6 text

http://www.ﬂickr.com/photos/chrs_snll/373710073 Comet is hard. Comet is a hack.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

http://www.ﬂickr.com/photos/blank22763/4089952578

Slide 9

Slide 9 text

Demos simple chat using long polling. Code is simple. function longPoll (data) { // :: snip :: handle the messages // start the long poll again $.ajax({ cache: false, url: "/recv", data: { since: CONFIG.last_message_time, id: CONFIG.id }, success: function (data) { longPoll(data); } });

Slide 10

Slide 10 text

More importantly, no infrastructure making it hard.

Slide 11

Slide 11 text

Usual LAMP stack http://www.ﬂickr.com/photos/barkbud/4342814008

Slide 12

Slide 12 text

Apache pre-forks itself, concurrent connections are limited to apache forks

Slide 13

Slide 13 text

Apache fires up and kills php, and there is no persistence (out of the box).

Slide 14

Slide 14 text

Node is event driven.

Slide 15

Slide 15 text

Traditional model • You greet receptionist at doctors • Who asks you to fill out forms and conversation back and forth • As you fill out, others are waiting and queuing behind you. • You're blocking.

Slide 16

Slide 16 text

Event Driven • You greet receptionist at doctors • Who asks you to fill out forms and come back once they're complete • As you're filling them out, the next person is dealt with and so on. • Once you're done, you return the forms and are processed.

Slide 17

Slide 17 text

Warning: Node doesn't solve world poverty.

Slide 18

Slide 18 text

Node makes complicated server programming easy for web developers http://www.ﬂickr.com/photos/brooke/25588103

Slide 19

Slide 19 text

Real-time made...

Slide 20

Slide 20 text

Long polling - keep Ajax request open.

Slide 21

Slide 21 text

function longPoll() { // $.ajax({ url: '/prices', type: 'json', success: function (data) { failures = 0; showPrices(data); longPoll(); }, error: longPollFailure }); }

Slide 22

Slide 22 text

Event Source very similar to long polling, except always open.

Slide 23

Slide 23 text

var es = new EventSource('/prices'); es.onmessage = function (event) { var data = JSON.parse(event.data); showPrices(data); };

Slide 24

Slide 24 text

EventSource • Events emit from server • Read only stream • Simple API • Possible to polyfill (so IE support)

Slide 25

Slide 25 text

EventSource • Supports connection dropping and resuming with Last-Event-ID • Supports bespoke events other than `message` • CORS is coming (x-domain SSE)

Slide 26

Slide 26 text

var es = new EventSource('/prices'); es.onmessage = function (event) { var data = JSON.parse(event.data); showPrices(data); };

Slide 27

Slide 27 text

Web Sockets Node module: websocket.io https://github.com/LearnBoost/websocket.io

Slide 28

Slide 28 text

var socket = new WebSocket('ws://somesite'); socket.onmessage = function (event) { var data = JSON.parse(event.data); showData(data); });

Slide 29

Slide 29 text

var socket = new WebSocket('ws://somesite'); socket.onmessage = function (event) { var data = JSON.parse(event.data); showData(data); }); // data = { user: 'rem', data: payload }; socket.send(JSON.stringify(data));

Slide 30

Slide 30 text

WebSockets • Persistent connection • Tiny chunks of data exchanged • Bi-directional & no origin rules

Slide 31

Slide 31 text

WebSockets • Persistent connection • Tiny chunks of data exchanged • Bi-directional & no origin rules

Slide 32

Slide 32 text

Abstractions: Socket.IO most popular and complete.

Slide 33

Slide 33 text

Example

Slide 34

Slide 34 text

jsconsole

Slide 35

Slide 35 text

http://www.ﬂickr.com/photos/jjeff/6320152982

Slide 36

Slide 36 text

If only I had a two way communication channel with the device...

Slide 37

Slide 37 text

Sockets? Flash is the polyfill, and Android 2.2 has no flash.

Slide 38

Slide 38 text

Event Source + postMessage + Ajax

Slide 39

Slide 39 text

your mobile site add iframe origin: jsconsole.com jsconsole server jsconsole client postMessage & onmessage EventSource Ajax post EventSource Ajax post

Slide 40

Slide 40 text

Since jsconsole is a client side app, all I need to do is replace the static serving with Node and use connect

Slide 41

Slide 41 text

server.js

Slide 42

Slide 42 text

Important part that's missing: res.end() and the response object is cached for use later on. app.get('/remote/:id/run', function (req, res) { var id = req.params.id; res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' }); res.write('id:0\n\n'); sessions.run[id] = res; });

Slide 43

Slide 43 text

app.post('/remote/:id/run', function (req, res) { var id = req.params.id, data = ''; // send to listening connections if (sessions.run[id]) { eventId++; data = 'data:' + req.body.data + '\nid:' + eventId); sessions.run[id].write(data + '\n\n'); } // close the ajax request res.writeHead(200, { 'Content-Type' : 'text/plain' }); res.end(); });

Slide 44

Slide 44 text

remote-iframe.js

Slide 45

Slide 45 text

var sse = new EventSource('/remote/' + id + '/run'), win = window.top; sse.onmessage = function (event) { win.postMessage(event.data, origin); };

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Remote Tilt

Slide 48

Slide 48 text

Remote Tilt • Create same message tunnel as jsconsole • Pipe orientation events from phone directly in to desktop browser • Orientation events now tested on desktop

Slide 49

Slide 49 text

jsbin.com/3/

Slide 50

Slide 50 text

Real-time !== chat

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

• Mobile users enter twitter handle, and hit my face • A socket establishes their connection and notifies server they're still active • Upon hit, message sent to main screen with their score (which is captured using EventSource) • Upon image capture on server, it's piped down to the connected devices.