Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Real-Time Applications in Ember.js
Search
Steve Kinney
March 04, 2015
Technology
0
110
Building Real-Time Applications in Ember.js
Steve Kinney
March 04, 2015
Tweet
Share
More Decks by Steve Kinney
See All by Steve Kinney
Introduction to Testing
stevekinney
0
43
Web Security, Frontend Masters
stevekinney
0
1.8k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
71
React and TypeScript, Turing School
stevekinney
0
300
Redux Workshop, 2021-05-05
stevekinney
2
2k
TypeScript and React Utility Types
stevekinney
1
180
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
150
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
220
Other Decks in Technology
See All in Technology
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building Applications with DynamoDB
mza
93
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
How to train your dragon (web standard)
notwaldorf
90
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Code Reviewing Like a Champion
maltzj
521
39k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Transcript
Building Real-Time Applications in Ember EmberConf 2015
Hi. I'm Steve. @stevekinney |
[email protected]
None
None
Let's talk about building real-time applications with Ember.
This is a story about WebSockets…
It's also a story about integrating all sorts of browser
functionality and third-party code into our applications.
What even is a WebSocket?
WebSockets are an HTTP independent, bi-directional, TCP-based protocol over port
80 standardized in 2011 by the IETF as RFC 6455.
Duh.
None
What are WebSockets used for?
Quick Demo
Can I actually use WebSockets?
None
None
Now, that we know everything there is to know about
WebSockets, let’s get to implementing them.
None
None
Step Zero: We need a WebSocket server, right?
A WebSocket server in fourteen lines.
var WebSocketServer = require('ws').Server; var socket = new WebSocketServer({ port:
8080 }); socket.on('connection', function(connection) { connection.on('message', function(message) { socket.broadcast(message); }); }); socket.broadcast = function(data) { this.clients.forEach(function (client) { client.send(data); }); };
What does this look like on the client?
A Traditional Example var socket = io(); $('form').submit(function(){ socket.emit('chat message',
$('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); });
Ugh. DOM/selector- based development. #fail
—Erik Bryn “Selector-based programming”
We can do better.
Let's try two or three different approaches.
Approach #1: A standalone controller
ember generate controller websocket
app/controllers/ websocket.js
None
None
None
None
None
None
None
None
None
None
app/controllers/ chatroom.js
None
None
None
None
None
None
None
app/routes/ chatroom.js
None
None
Quick Demo
This approach works great, but it's somewhat limited.
None
Approach #2: Dependency Injection with Services
ember generate service websocket
installing create app/services/websocket.js create app/initializers/websocket.js
app/initializers/ websocket.js
None
None
None
None
None
Let's move that code from the controller into our service.
rm -rf app/controllers/websocket.js
app/controllers/ chatroom.js
None
None
That's it.
Approach #3: Using Socket.io
Point of Interest: Socket.io is both a server- and client-
side library.
To each her own.
Let's set up a Socket.io server
None
None
bower install sio-client
None
app/services/ websocket.js
None
app/controllers/ chatroom.js
None
None
Thank you. Code example: stevekinney/emberconf-chat Twitter and Github: @stevekinney Email:
[email protected]
Hire our students: http://people.turing.io/