Building Realtime Apps with Ember.js and WebSockets

transcript

Building Real-Time Apps with EmberJS & WebSockets

Ben LimmerGEMConf - 5/21/2016 ! ember.party

" blimmer

Ben LimmerEmberJS Meetup - 2/24/2016 ! ember.party

Talk Roadmap

• WebSockets vs. AJAX

• Fundamentals of WebSockets

• Code!

• Other Considerations

request

response

request

response

with a lot of apps, this paradigm still works

but what about real-time apps?

live dashboards

Source: http://www.heckyl.com/

2nd screen apps

Ben LimmerGEMConf - 5/21/2016 ! ember.party© MLB / Source: MLB.com

deployment notifications

Source: inbox.google.com

Source: http://browserquest.mozilla.org/img/common/promo-title.jpg

gamesdeployment notifications

live dashboards

2nd screen apps

activity streams

comment sections

realtime progresscollaborative

editing

how do we build a real-time app?

update?

(old way) short polling

update?

dataupdate?

(old way) long polling

requestKeep-Alive

timeout

requestKeep-Alive

response

requestKeep-Alive

WebSockets

handshake

connection ope

bi-directionalcommunication

WebSockets

no polling

full duplex over TCP

communication over standard HTTP(S) ports

broadcast to all connected clients

Talk Roadmap

• WebSockets vs. AJAX

• Code!

the handshake

RequestGET wss://example.org/socket HTTP/1.1 Origin: https://example.org Host: example.org Sec-WebSocket-Key: zy6Dy9mSAIM7GJZNf9rI1A== Upgrade: websocket Connection: Upgrade Sec-WebSocket-Version: 13

ResponseHTTP/1.1 101 Switching Protocols Connection: Upgrade Sec-WebSocket-Accept: EDJa7WCAQQzMCYNJM42Syuo9SqQ= Upgrade: websocket

events• open • message • error • close

• send • close

methods

WebSocket.send()

send(String 'foo');

send(Blob 010101);

send(ArrayBuffer file);

WebSocket.send(’YOLO’);

sub-protocols

• a contract between client/server

• 2 classes of sub-protocols

• well-defined (e.g. STOMP, WAMP)

• application specific protocols

Request with ProtocolGET wss://example.org/socket HTTP/1.1 Origin: https://example.org Host: example.org Sec-WebSocket-Key: zy6Dy9mSAIM7GJZNf9rI1A== Upgrade: websocket Connection: Upgrade Sec-WebSocket-Version: 13 Sec-WebSocket-Protocol: v10.stomp

STOMPSENDdestination:/queue/a

hello queue a^@

MESSAGEdestination:/queue/amessage-id: <message-identifier>

hello queue a^@

SENDdestination:/queue/a

hello queue a^@

subprotocols bring structure to ws

Talk Roadmap

• AJAX vs. WebSockets

• Code!

let’s build something!

alice clicks

bob / everyone sees

bob clicks

alice / everyone sees

npm install ws

• fast

• simple WebSocket implementation

• few bells and whistles

npm install ws

server/index.js

1 const WebSocketServer = require('ws').Server; 2 3 const wss = new WebSocketServer({ 4 port: process.env.PORT 5 });

waiting for socket connection…

ember install ember-websockets

• integrates with the Ember runloop

• is an Ember.ObjectProxy

• abstracts away the WebSocket

app/services/rt-ember-socket.js 1 websockets: service(), 2 3 init() { 4 this._super(...arguments); 5 6 const socket = this.get('websockets').socketFor(host); 7 8 socket.on('open', this.open, this); 9 socket.on('close', this.reconnect, this); 10 }, 11 12 online: false, 13 open() { 14 this.set('online', true); 15 }, 16 17 reconnect() { 18 this.set('online', false); 19 20 Ember.run.later(this, () => { 21 this.get('socket').reconnect(); 22 }, 5000); 23 },

rtember-1.0 - sub-protocol

data events

server/index.js 1 const WebSocketServer = require('ws').Server; 2 3 const wss = new WebSocketServer({ 4 port: process.env.PORT, 5 handleProtocols: function(protocol, cb) { 6 const supportedProtocol = 7 protocol[protocol.indexOf('rtember-1.0')]; 8 if (supportedProtocol) { 9 cb(true, supportedProtocol); 10 } else { 11 cb(false); 12 } 13 }, 14 });

app/services/rt-ember-socket.js

1 websockets: Ember.inject.service(), 2 3 socket: null, 4 init() { 5 this._super(...arguments); 6 7 const socket = this.get('websockets') 8 .socketFor(host, ['rtember-1.0']); 9 10 socket.on('open', this.open, this); 11 socket.on('close', this.reconnect, this); 12 13 this.set('socket', socket); 14 },

data events

{ "frameType": "event", "payload": { “eventType": ... event type ..., "eventInfo": ... event info ... }}

{ "frameType": "data", "payload": { ... json api payload ... }}

data events

1 wss.on('connection', function(ws) { 2 sendInitialGifs(ws); 3 }); 4 5 function sendInitialGifs(ws) { 6 const gifs = gifDb; 7 const random = _.sampleSize(gifs, 25); 8 9 sendDataToClient(ws, serializeGifs(random)); 10 } 11 12 function sendDataToClient(ws, payload) { 13 const payload = { 14 frameType: FRAME_TYPES.DATA, 15 payload, 16 } 17 ws.send(JSON.stringify(payload)); 18 }

app/services/rt-ember-socket.js 1 init() { 2 ... 3 socket.on('message', this.handleMessage, this); 4 ... 5 }, 6 7 handleMessage(msg) { 8 const { frameType, payload } = JSON.parse(msg.data); 9 10 if (frameType === FRAME_TYPES.DATA) { 11 this.handleData(payload); 12 } else { 13 warn(`Encountered unknown frame type: ${frameType}`); 14 } 15 }, 16 17 handleData(payload) { 18 this.get('store').pushPayload(payload); 19 }

{ "frameType": "data", "payload": { "data": [{ "type": "gif", "id": "3o8doPV2heuYjdN2Fy", "attributes": { "url": "http://giphy.com/3o8doPV2heuYjdN2Fy/giphy.gif" } }, { ... }, { ... }] }}

app/routes/index.js

1 export default Ember.Route.extend({ 2 model() { 3 return this.store.peekAll('gif'); 4 } 5 });

app/templates/index.hbs{{gif-tv gifs=model}}

app/templates/components/gif-tv.hbs<div class='suggestions'> {{#each gifs as |gif|}} <img src={{gif.url}} /> {{/each}}</div>

data events

{ "frameType": "event", "payload": { “eventType": ... event type ..., "eventInfo": ... event info ... }}

Share GIF Event{ "frameType": "event", "payload": { "eventType": "share_gif", "eventInfo": "<gif_id>" }}

{ "frameType": "data", "payload": {[ <shared_gif>, <previously_shared_gif> ]}}

{ "frameType": "data", "payload": { "data": [ { "type": "gifs", "id": "3o8doPV2heuYjdN2Fy", "attributes": { "url": "http://giphy.com/3o8doPV2heuYjdN2Fy/giphy.gif", "shared": false } }, { "type": "gifs", "id": "xTiQyBOIQe5cgiyUPS", "attributes": { "url": "http://giphy.com/xTiQyBOIQe5cgiyUPS/giphy.gif", "shared": true } } ] }}

app/templates/components/gif-tv.hbs<div class='suggestions'> {{#each gifs as |gif|}} <img {{action shareGif gif}} src={{gif.url}} /> {{/each}}</div>

app/components/gif-tv.js 1 export default Ember.Component.extend({ 2 rtEmberSocket: service(), 3 4 shareGif(gif) { 5 this.get('rtEmberSocket') 6 .sendEvent(EVENTS.SHARE_GIF, gif.get('id')); 7 }, 8 });

5 this.get('rtEmberSocket') 6 .sendEvent(EVENTS.SHARE_GIF, gif.get('id')); 7 }, 8 });

app/services/rt-ember-socket.js 1 sendEvent(eventType, eventInfo) { 2 this.get('socket').send(JSON.stringify({ 3 frameType: FRAME_TYPES.EVENT, 4 payload: { 5 eventType, 6 eventInfo, 7 }, 8 })); 9 }

1 ws.on('message', function(rawData) { 2 const data = JSON.parse(rawData); 3 4 if (data.frameType === FRAME_TYPES.EVENT) { 5 const newShare = _.find(gifDb, { 6 id: data.payload.eventInfo 7 }); 8 const previouslyShared = _.find(gifDb, 'shared'); 9 10 newShare.shared = true; 11 previouslyShared.shared = false; 12 13 const framePayload = { 14 frameType: FRAME_TYPES.DATA, 15 payload: serializeGifs([previouslyShared, newShare]), 16 }; 17 const rawPayload = JSON.stringify(framePayload); 18 wss.clients.forEach((client) => { 19 client.send(rawPayload); 20 }); 21 } 22 });

beware

1 ws.on('message', function(rawData) { 2 try { 3 const data = JSON.parse(rawData); 4 5 if (data.frameType === FRAME_TYPES.EVENT) { 6 if (data.payload.eventType !== EVENTS.SHARE_GIF) { 7 throw Error(); // unknown event 8 } 9 10 const newShare = ...; 11 if (!newShare) { 12 throw Error(); // unknown gif 13 } 14 ... 15 } 16 } catch(e) { 17 ws.close(1003); // unsupported data 18 } 19 });

{ "frameType": "data", "payload": { "data": [ { "type": "gifs", "id": "3o8doPV2heuYjdN2Fy", "attributes": { "url": "http://giphy.com/3o8doPV2heuYjdN2Fy/giphy.gif", "shared": false } }, { "type": "gifs", "id": "xTiQyBOIQe5cgiyUPS", "attributes": { "url": "http://giphy.com/xTiQyBOIQe5cgiyUPS/giphy.gif", "shared": true } } ] }}

app/templates/components/gif-tv.hbs

app/components/gif-tv.js 1 export default Ember.Component.extend({ 2 sharedGif: computed('gifs.@each.shared', function() { 3 return this.get('gifs').findBy('shared', true); 4 }), 5 });

ember.party/gemconf

Talk Roadmap

• AJAX vs. WebSockets

• Code!

other considerations

• security

• websocket support (libraries)

• learn from example

security

• Use TLS (wss:// vs. ws://)

• Verify the Origin header

• Verify the request by using a random token on handshake

source: WebSocket (Andrew Lombardi) - O’Reilly

• security

support

socket.io

• Graceful fallback to polling / flash (!)

• Syntactic Sugar vs. ws package

• Support in ember-websockets add-on

pusher.com

• Graceful fallback

• Presence support

• Authentication / Security strategies

• No infrastructure required

• security

learn by example

https://github.com/blimmer/real-time-ember-clienthttps://github.com/blimmer/real-time-ember-server

# l1m5" blimmer

thanks!

• WebSocket: Lightweight Client-Server Communications (O’Reilly)

• WebSockets: Methods for Real-Time Data Streaming (Steve Schwartz)

Credits

• pusher.com

• socket.io

• node ws

• websocket security (heroku)

Resources

Building Realtime Apps with Ember.js and WebSockets

Technology