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
44
Web Security, Frontend Masters
stevekinney
0
1.8k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
72
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
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
180
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
680
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
320
Goで作って学ぶWebSocket
ryuichi1208
3
2.4k
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
74k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
12
3.4k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
1.5k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
510
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
速くて安いWebサイトを作る
nishiharatsubasa
15
15k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Music & Morning Musume
bryan
46
6.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Typedesign – Prime Four
hannesfritz
40
2.5k
Designing Experiences People Love
moore
140
23k
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/