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
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
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
240
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
200
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
210
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.3k
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
220
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
830
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
120
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
640
MCPに潜むセキュリティリスクを考えてみる
milix_m
0
520
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Autify Company Deck
autifyhq
2
44k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
185
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How GitHub (no longer) Works
holman
314
140k
The Pragmatic Product Professional
lauravandoore
35
6.8k
RailsConf 2023
tenderlove
30
1.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Music & Morning Musume
bryan
46
6.7k
Site-Speed That Sticks
csswizardry
10
710
Transcript
Building Real-Time Applications in Ember EmberConf 2015
Hi. I'm Steve. @stevekinney | steve@turing.io
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:
steve@turing.io Hire our students: http://people.turing.io/