CODEWITHSUNDEEP
apirestbackbone.jswebsocketsocket.io
user1082754
user1082754

Reputation:

Backbone.sync – Collection using ajax as well as Socket.IO/WebSockets

I have a Backbone application, which has a collection called Links. Links maps to a REST API URI of /api/links.

The API will give the user the latest links. However, I have a system in place that will add a job to the message queue when the user hits this API, requesting that the links in the database are updated.

When this job is finished, I would to push the new links to the Backbone collection.

How should I do this? In my mind I have two options:

WebSockets with the REST API

If I use WebSockets, I'm not sure of the best way to integrate this into my Backbone collection so that it works alongside the REST API.

At the moment my Backbone collection looks like this:

var Links = Backbone.Collection.extend({
  url: '/api/links'
});

I'm not sure how to enable the Backbone collection to handle AJAX and WebSockets. Do I continue to use the default Backbone.sync for the CRUD Ajax operations, and then deal with the single WebSocket connection manually? In my mind:

var Links = Backbone.Collection.extend({
  url: '/api/links',
  initialize: function () {
    var socket = io.connect('http://localhost');
    socket.on('newLinks', addLinks)
  },
  addLinks: function (data) {
    // Prepend `data` to the collection
  };
})

Questions

How should I implement my realtime needs, from the options above or any other ideas you have? Please provide examples of code to give some context.

Upvotes: 8

Views: 770

Answers (2)

ydaniv
ydaniv

Reputation: 1289

No worries! Backbone.WS got you covered.

You can init a WebSocket connection like:

var ws = new Bakcbone.WS('ws://exmaple.com/');

And bind a Model to it like:

var model = new Backbone.Model();
ws.bind(model);

Then this model will listen to messages events with the type ws:message and you can call model.send(data) to send data via that connection.

Of course the same goes for Collections.

Backbone.WS also gives some tools for mapping a custom REST-like API to your Models/Collections.

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

My company has a fully Socket.io based solution using backbone, primarily because we want our app to "update" the gui when changes are made on another users screen in real time.

In a nutshell, it's a can of worms. Socket.IO works well, but it also opens a lot of doors you may not be interested in seeing behind. Backbone events get quite out of whack because they are so tightly tied to the ajax transactions...you're effectively overriding that default behavior. One of our better hiccups has been deletes, because our socket response isn't the model that changed, but the entire collection, for example. Our solution does go a bit further than most, because transactions are via a DDL that is specifically setup to be universal across the many devices we need to be able to communicate with, now and in the future.

If you do go the ioBind path, beware that you'll be using different methods for change events compared to your non-socket traffic (if you mix and match) That's the big drawback of that method, standard things like "change" becomes "update" for example to avoid collisions. It can get really confusing in late-night debug or when you have a new developer join the team. For that reason, I prefer either going sockets, or not, not a combination. Sockets have been good so far, and scary fast.

We use a base function that does the heavy lifting, and have several others that extend this base to give us the transaction functionality we need.

This article gives a great starter for the method we used.

Upvotes: 0

Related Questions