Vert.x bus custom adapter

Ember Data
1

Hello, I’m trying to write a custom adapter for communication with vert.x bus. Since vert.x bus is based on SockJS I’m trying to rewrite the code from this example: https://gist.github.com/carlwoodward/8659793.

Here is the code of my running verticle in vert.x:

var eventBus = require("vertx/event_bus");
var mindMaps = {};

eventBus.registerHandler("mindMaps.list", function(args, responder) {
	responder({"mindMaps": Object.keys(mindMaps).map(function(key) {
		return mindMaps[key];
	})});
});

eventBus.registerHandler("mindMaps.save", function(mindMap, responder) {
	if (!mindMap._id) {
		mindMap._id = Math.random();
	}
	mindMaps[mindMap._id] = mindMap;
	responder(mindMap);
});

eventBus.registerHandler("mindMaps.delete", function(args, responder) {
	delete mindMaps[args.id];
	responder({});
});

And here is the code of my adapter:

import DS from 'ember-data';
import Ember from 'ember';

// export default DS.FixtureAdapter.extend({
// });

var VertxAdapter = DS.RESTAdapter.extend({
  callbacks: {},
  vertx: null,
  beforeOpenQueue: [],
  protocol: 'http',
  host: 'localhost',
  port: '4200',

  ajax: function(url, type, params) {
   console.log(url, type, params);

    var adapter = this;
    var uuid = adapter.generateUuid();

    adapter.initializeVertx();

    return new Ember.RSVP.Promise(function(resolve, reject) {
      var success = function(json) {
        Ember.run(null, resolve, json);
      };
      var error = function(json) {
        Ember.run(null, reject, json);
      };

      var callback = { success: success, error: error };
      adapter.callbacks[uuid] = callback;

      var payload = { uuid: uuid, path: url, type: type, params: params, version: adapter.version || 1};
      console.log(payload);
      if(adapter.vertx.readyState === 1) {
      	console.log('ready state');
        adapter.vertx.send(JSON.stringify(payload));
      }
      else {
      	console.log('push state');
        adapter.beforeOpenQueue.push(payload);
      }
    });
  },

  initializeVertx: function() {
    var adapter = this;

    if (adapter.vertx === null) {
      adapter.vertx = new vertx.EventBus(adapter.protocol + '://' + adapter.host + ':' + adapter.port + '/eventbus');
      console.log('initialize vertx');
      adapter.vertx.onopen = function(event) { adapter.open.apply(adapter, [event]); };
      adapter.vertx.onmessage = function(event) { adapter.message.apply(adapter, [event]); };
      adapter.vertx.onerror = function(event) { adapter.error.apply(adapter, [event]); };
    }
  },

  open: function(event) {

    var adapter = this;

    if(adapter.beforeOpenQueue.length > 0) {
      adapter.beforeOpenQueue.forEach(function(payload) {
        adapter.vertx.send("mindMaps.list", JSON.stringify(payload), function(res) {
			$.each(res.mindMaps, function() {
	    		console.log(this);
	    	});
		});
      });
      adapter.beforeOpenQueue = [];
    }
  },

  message: function(event) {
  	console.log('message');

    var adapter = this;
    var result = JSON.parse(event.data);

    adapter.callbacks[result.uuid].success(result.payload);
    delete adapter.callbacks[result.uuid];
  },

  error: function(event) {
  	console.log('error');

    alert(event.data);
  },

  generateUuid: function() {
  	console.log('creating uuid');

    var date = new Date().getTime();
    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(character) {
      var random = (date + Math.random() * 16) % 16 | 0;
      date = Math.floor(date/16);
      return (character === "x" ? random : (random & 0x7 | 0x8)).toString(16);
    });
    return uuid;
  },

  findAll: function(store, type, sinceToken) {
  	console.log(store, type);
    //store.push( "mind-map", {name: "One", id: 6});
    var query = { since: sinceToken };
    return this.ajax("mindMaps.list", 'GET', { data: query});

  }

});

export default VertxAdapter.extend({
	port: '8080',
	version: 1
});

For now I’m just trying to render the data I get from backend through the vert.x event bridge bus. In the console I can see the data but my page refuses to render. I suppose that something is wrong with my code, but since I’m pretty new in Ember I can’t get whats wrong.

Can somebody, who knows how does vert.x work, help me a bit so I can get on the right track.

Here is the example how does client should look like outside the Ember:

var eventBus = new vertx.EventBus(window.location.protocol + '//' + window.location.hostname + ':' 
	+ window.location.port + '/eventbus');

eventBus.onopen = function() {
	console.log("Event bus connected");
	var renderListItem = function(mindMap) {
    	var li = $('<li>');
    	var deleteMindMap = function() {
      	
      			eventBus.send('mindMaps.delete', {id: mindMap._id}, function() {
        		li.remove();
      		});
      		return false;
    	};

    	$('<span>').text(mindMap.name).appendTo(li);
    	$('<button>').text('Delete').on('click', deleteMindMap).appendTo(li);
    	li.appendTo('.mind-maps');
  	};

  	$('.create-form').submit(function() {
    	var nameInput = $('[name=name]', this);
    	eventBus.send('mindMaps.save', {name: nameInput.val()}, function(result) {
      			renderListItem(result);
      			nameInput.val('');
   			});
    	return false;
  	});

	eventBus.send("mindMaps.list", {}, function(res) {
		$.each(res.mindMaps, function() {
    		renderListItem(this);
    	});
	})
};

Here is the preview of the console: