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
77
Web Security, Frontend Masters
stevekinney
0
2.6k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
86
React and TypeScript, Turing School
stevekinney
0
320
Redux Workshop, 2021-05-05
stevekinney
2
2.1k
TypeScript and React Utility Types
stevekinney
1
190
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
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
5
3.7k
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
150
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
ロールが細分化された組織でSREは何をするか?
tgidgd
1
470
OpenTelemetry の Log を使いこなそう
biwashi
0
360
Digitization部 紹介資料
sansan33
PRO
1
4.6k
三視点LLMによる複数観点レビュー
mhlyc
0
260
Data Engineering Study#30 LT資料
tetsuroito
1
490
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
200
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
27
7.6k
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
370
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
360
Building Applications with DynamoDB
mza
95
6.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
Facilitating Awesome Meetings
lara
54
6.5k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
BBQ
matthewcrist
89
9.7k
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/