Populating ember-data table from WebSocket

Question

My backend is sending me this JSON (example):

{
  id: 0,
  list: [
         {username:'user_1', name:'Name1', surname:'Surname1', user:0},
         {username:'user_2', name:'Name2', surname:'Surname2', user:0},
        ]
}

I have the necessity to bootstrap my table App.WUser with that type of JSON. Data comes via WebSocket. My Ember.js schema is defined as follow:

App.WUser = DS.Model.extend({
  list: DS.hasMany('App.User')
});

App.User = DS.Model.extend({
  username: DS.attr('string'), // primary key
  name: DS.attr('string'),
  surname: DS.attr('string'),
  user: DS.belongsTo('App.WUser')
});

I writed my custum Adapter for WebSocket implementation. Note that App.WebSocketConnection is a Mixin contains the connection handler (see the last snippet).

DS.SocketAdapter = DS.RESTAdapter.extend(App.WebSocketConnection, { 
  socket: undefined,

  init: function() {    
    socket = this.getSocket(); // activate WS connection (see Mixin)
    this._super();
  },

  find: function (store, type, id) {
     // empty block    
  },

  findAll: function (store, type) { 
    // empty block
  },

  createRecord: function(store, type, record) {
    // code not relevant
  }
});



DS.SocketAdapter.map('App.User', {
    primaryKey: 'username'
});


DS.SocketAdapter.map('App.WUser', {
  list: {embedded: 'always'}
});

My Store

App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.SocketAdapter.create({})
});

My Mixin:

App.WebSocketHandler = Ember.Object.extend({
  uri: 'ws://localhost:8080/App/atmosphere/chat/all',
  ws: ,

  init: function() { 
    this.ws = new WebSocket(this.uri));                                                                 

    // callbacks
    this.ws.onopen = function() {
      console.log('Connection established /all');
    };
    this.ws.onclone = function() {
      console.log('Connection closed /' + 'all');
    };
    this.ws.onmessage = function(data) {
      alert('New JSON message from server /all ' + data);    // <---- ???
    };

    this._super();
  },

  send: function(data) { 


    // not relevant method... this method simply send a message to the server
    /* 
   var some = ...

    this.ws.send( JSON.stringify( some ) );
    */
  }

});

Searching on Google, I reached to write this piece of code:

var JSONfromWebSocket = {
  id: 0,
  list: [
     {username:'user_1', name:'Name1', surname:'Surname1', user:0},
     {username:'user_2', name:'Name2', surname:'Surname2', user:0},
    ]
};
    var store = DS.get('defaultStore');
    store.loadMany(App.WUser, [0], JSONfromWebSocket); // should I specify the [0] id?

    (?) this.didCreateRecords(store, App.WUser, records(?), undefined); // is it a neccessary line?

Questions:

1. Where I put my piece of code?
2. Is my piece of code correct? Is it the correct way to boostrap data?
3. Is it correct the usage of custum primaryKey?
4. Considering my custum ID of table App.User; is it correct the call to loadMany() function?
5. Note that the JSON is coming from onmessage callback (see line `// <---- ??? ). How to call one of functions - and which - (i.e.createRecords) inherited by the Adapter, passing it the JSON data?

I am a bit confused, but I hope i am in the right way... My problem is to glue the pieces of my code!

Thanks for patience!

Mattia

Answer 1

It looks like that you get only one App.WUser at a time.

So something like this

App.WebSocketHandler = Ember.Object.extend({
  uri: 'ws://localhost:8080/App/atmosphere/chat/all',
  ws: ,

  init: function() { 
    this.ws = new WebSocket(this.uri));                                                                 

    // callbacks
    this.ws.onopen = function() {
      console.log('Connection established /all');
    };
    this.ws.onclone = function() {
      console.log('Connection closed /' + 'all');
    };
    this.ws.onmessage = function(data) {
      DS.get('defaultStore').load(App.WUser, data);  //Simply load your json in the store.
    };

    this._super();
  },