ember and websockets

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.