Socket.IO with Ember and Ember-Data

Question

I've been poking around and I can't find any up to date examples of ember (1.0.0-rc.1) and ember-data(revision 11) that also use socket.io. I've tried something like this.

App.ApplicationRoute = Ember.Route.extend({
  setupController: function(controller, data) {
    var socket = io.connect(),
        self = this;
    socket.on('apartment/new', function(apartment) {
      var apt = App.Apartment.createRecord(apartment);
      self.controllerFor('apartments').pushObject(apt);
    });
  }
});

This actually will create a new model class, it pushes the object to the controller, and creates a new li but the values do not render.

<ul class="list-view">
{{#each apartment in controller}}
    <li>
      {{#linkTo 'apartment' apartment }}
        <span class="date">{{date apartment.date}}</span>
        {{apartment.title}}
      {{/linkTo}}
    </li>
{{/each}}
</ul>

Does this have something to do with the run loop? How do force the values to render? Or is there a better approach to this?

Answer 1

There's a very simple solution to this which I'm using in some of my apps. You can either have a general purpose callback for the socket and accept any kind of data

callback: function(message) {
  // this is better than just `eval`
  var type = Ember.get(Ember.lookup, message.type);
  store.load(type, message.data);
}

or here it is specifically tailored to your use case

socket.on('apartment/new', function(apartment) {
  store.load(App.Apartment, apartment);
});

using store.load will load the record data directly into the identity map. There's also loadMany for loading multiple records.

Answer 2

Ember CLI, ember sockets, and coffescript

I've only been working with Ember for about a month, so no promises that this is the best way of doing this, but I've had to set up an Ember CLI project with Socket.io and Ember Data. The following is based on my working code, though the following is not tested. I think everything you need to get 99% of the way is here. Good luck troubleshooting!

.jshintrc - Ember service is going to yell at you if you don't include EmberSockets here

{
  "predef": {
  "document": true,
  "window": true,
  "nameofprojectENV": true,
  "EmberSockets": true
  },
  ...
}

Brocfile.js - Import Ember Sockets

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

// change this path to where ember-sockets.js is
app.import('vendor/ember-sockets/package/ember-sockets.js');

module.exports = app.toTree();

app.js - remember to replace nameofproject with actual project name

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';

Ember.MODEL_FACTORY_INJECTIONS = true;

// every controller using ember sockets must be listed here in the controllers array
var Socket = EmberSockets.extend({
    host: 'example.local',
    port: 8080,
    controllers: [
        'example'
        // more controllers here
    ]
});

var App = Ember.Application.extend({
    modulePrefix: 'nameofproject',
    Resolver: Resolver,
    Socket: Socket
});

loadInitializers(App, 'nameofproject');

export default App;

router.coffee - remember to replace nameofproject with actual project name

`import Ember from 'ember'`

Router = Ember.Router.extend
    location: nameofprojectENV.locationType

Router.map ->
    @route 'example'

`export default Router`

models/example.coffee

`import DS from 'ember-data'`

Example = DS.Model.extend
    name: DS.attr('string')

`export default Example`

routes/example.coffee

`import Ember from 'ember'`

ExampleRoute = Ember.Route.extend
    # set model to be all example records
    model: ->
        @store.all('example')

    setupController: (controller, model) ->
        controller.set('model', model)

`export default ExampleRoute`

controllers/example.coffee

`import Ember from 'ember'`

ExampleController = Ember.Controller.extend

#### properties

examples: (->
    # @get('content') gets the model, which in this case, is example (set in route)
    @get('content')
).property('content') # watching the model like this might not be right?

#### methods
getExamples: ->
    @socket.emit 'pub',
        # whatever data you need to pass to the server
        data : {examples: true}
        # name of the event you want the data returned on
        event: "getExamples"

#### sockets
sockets:
    # returns examples from server
    getExamples: (data) ->
        # log the data for fun, also to see that you are getting data back
        console.log data
        # set controller to @, which is the same as this.
        controller = @

        # get your array of examples from JSON returned from server
        examples = data.examples

        examples.forEach (example) ->
            # controller instead of @, or it doesn't work
            controller.store.push 'example',
                # you need ids or this will not work
                id: example.id
                name: example.name

`export default ExampleController`

templates/example.coffee

{{#each example in examples}}
    {{example.id}} {{example.name}}
{{/each}}

<button {{action getExamples}}>Get Examples</button>

I would suggest the Chrome Ember Inspector for troubleshooting. You can also see your data models and records, among other things.