ember and websockets
DESCRIPTION
Ember and WebSockets. I am writing this because because the more text I write makes the "virality score" on SlideShare go up and I'm all about gamification. Also, I had to export this to PowerPoint because SlideShare does't supper Keynote. WTF?TRANSCRIPT
Ember + WebSocketsEmber.js Denver, November 2014
Hi. I'm Steve.@stevekinney
Hire our students, please: http://people.turing.io/
What even are
WebSockets?
WebSockets are an HTTP independent,
bi-directional, TCP-based protocol over
port 80 standardized in 2011 by the
IETF as RFC 6455.
Duh.
Why WebSockets?
• Notifications (e.g. Github prompting you to create a
pull request when you create a new branch)
• Document Collaboration
• Real-time Chat and Messaging
• JSON Patch
Can I actually use
them?
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));
});
So, let's look at some code.
stevekinney/socketry-client
stevekinney/socketry-server
First, the server—in 15 lines.
var WebSocketServer = require('ws').Server;
var socket = new WebSocketServer({ port: 8080 });
socket.broadcast = function(data) {
this.clients.forEach(function (client) {
client.send(data);
});
};
socket.on('connection', function(connection) {
connection.on('message', function(message) {
console.log('Received: %s', message);
socket.broadcast(message);
});
});
Approach #1:
Controllers
Let's create a singleton
controller.
export default Ember.Controller.extend({});
// ApplicationController
export default Ember.ArrayController.extend({
needs: ['websocket'],
…
});
// WebsocketController
export default Ember.Controller.extend({
_setup: function () { … }.on('init')
});
Approach #2:
Services*
Coming soon…
// app/services/geolocation.js
export default Ember.Service.extend({
availableIn: ['controllers', 'routes']
// Implementation goes here.
});
// app/controllers/nearby-tweets.js
export default Ember.ArrayController.extend({
fetchNearbyTweets: function() {
this.geolocation.getPosition().then(function() {
// Profit
});
}
});
Can I actually use
them?
But, if you can emulate
services today.
ember generate service websocket
installing
create app/initializers/websocket-service.js
create app/services/websocket.js
Thank you.