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
89
Web Security, Frontend Masters
stevekinney
0
2.8k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
93
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
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
roppongirb_20250911
igaiga
1
220
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
320
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
240
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
160
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Six Lessons from altMBA
skipperchong
28
4k
Building Applications with DynamoDB
mza
96
6.6k
Documentation Writing (for coders)
carmenintech
74
5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
GitHub's CSS Performance
jonrohan
1032
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Gamification - CAS2011
davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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/