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
120
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
95
Web Security, Frontend Masters
stevekinney
0
2.9k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
95
React and TypeScript, Turing School
stevekinney
0
330
Redux Workshop, 2021-05-05
stevekinney
2
2.1k
TypeScript and React Utility Types
stevekinney
1
200
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
160
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
240
Other Decks in Technology
See All in Technology
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
いまさら聞けない ABテスト入門
skmr2348
1
210
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
190
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
4
860
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.7k
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
500
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
290
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
6
790
BtoBプロダクト開発の深層
16bitidol
0
370
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
610
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.8k
Thoughts on Productivity
jonyablonski
70
4.9k
Making Projects Easy
brettharned
119
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Visualization
eitanlees
148
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
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/