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
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
31
React and TypeScript, Turing School
stevekinney
0
180
Redux Workshop, 2021-05-05
stevekinney
1
1.9k
TypeScript and React Utility Types
stevekinney
1
160
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
140
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
190
Building Modular Frontend Architectures
stevekinney
1
410
Redux
stevekinney
1
110
Other Decks in Technology
See All in Technology
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
本当のAWS基礎
toru_kubota
0
510
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
440
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
850
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
300
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
430
Featured
See All Featured
Optimizing for Happiness
mojombo
370
69k
Gamification - CAS2011
davidbonilla
76
4.6k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Building an army of robots
kneath
300
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Ruby is Unlike a Banana
tanoku
96
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Designing the Hi-DPI Web
ddemaree
276
33k
Faster Mobile Websites
deanohume
299
30k
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/