Bind socket.io events to backbone models & collections.
Backbone.ioBind allows you to bind socket.io events to backbone model & collection events.
backbone.iosync.js, a drop in replacement for
Backbone.sync that uses socket.io.
Your best bet for starting is to check out the API Documentation.
Use Backbone.ioBind < 0.4.6 for compatibility with version Backbone less then 1.0.0
Download and include in your projects.
Or use the minimized versions.
The Backbone.sync replacement,
backbone.iosync.js, is a drop-in replacement for Backbone.sync that
will make Backbone use socket.io for all normal CRUD operations. By this, anytime you
save a model,
fetch a collection,
remove a model, or other database operation, socket.io will be used as the
Backbone has a dedicated attribute,
urlRoot for models, and
url for collections, that is used
by the default sync method to direct AJAX request. ioSync uses this same attribute to create a
namespace tag for that model.
For Example: If your collection url is 'posts' or '/posts', the events to listen for server-side will be:
As with the default sync method, for a given model, ioSync will default to the
url of the collection
that model is a part of, else it will use the models
If your url has a depth of more than one, only the first will be used. Example:
/posts/comments will still only have a namespace of
This replacement assumes that you are using socket.io's RPC (callback) formula for these events. Examine this psuedo-code:
socketon'posts:read'dbquery_id: dataidif errcallbackerr;else// ... some data scrubbingcallbacknull model;;;
The callback accepts two parameters:
model. If no error has occurred, send
model should be a JSON representation of the client-side model's attributes.
The primary function for Backbone.ioBind is to make it easy to create client-side listeners for server-side socket.io events. The most likely use case for this is to broadcast changes made by one client to all other clients watching a particular data object.
The example app demonstrates a very basic usage scenario. If you would like to see specific code examples, please check out the wiki page on using the example app.
The ioBind function is available for both Models and Collections, and behaves almost identically in both scenarios
// Example Model.extendurlRoot: 'todo'_bindAllthis 'serverChange' 'serverDelete' 'modelCleanup';thisioBind'update' windowsocket thisserverChange this;thisioBind'delete' windowsocket thisserverDelete this;// Example Collection.exendurl: 'todos'_bindAllthis 'serverCreate' 'collectionCleanup';thisioBind'create' windowsocket thisserverCreate this;
The primary difference between
ioBind on Models and Collection is the event string that is listened for.
On models, the event string includes the Model
id, whereas on collection it is simply the collection namespace.
The above example will respond to the following socket.io events.
// Model eventssocketemit'todo/' + todo_objid + ':update' todo_obj;socketemit'todo/' + todo_objid + ':delete' todo_obj;// Collection eventssocketemit'todos:create' todo_obj;
Model binding without ID: Do NOT bind to Models that do NOT have an
id assigned. This will cause for extra listeners
and cause potentially large memory leak problems. See the example app for one possible workaround.
Namespace construction: When constructing the namespace, as with the the ioSync method, for a given model ioBind
will default to the
url of the collection that model is a part of, else it will use the models
Reserved events: Do NOT bind to reserved backbone events, such as
add. Proxy these
events using different event tags such as
Clone this repo:
$ git clone https://github.com/logicalparadox/backbone.iobind
Install development/build dependancies (Ie: folio).:
$ npm install
There is an example application demonstrating the basics of using the
ioBind components. It is a tasks application that will keep itself syncronized across all open
browser instances. The foundation is an Express
server using Seed as an in-memory data store.
The app is found in the
View the Documentation Article
on the example app for instructions on how to get everything set up.
In short, run
node example/app.js from the root directory.
Works great with the awesome backbone.modelbinding.
Interested in contributing? Fork to get started. Contact @mahnunchik if you are interested in being regular contributor.
(The MIT License)
Copyright (c) 2011 Jake Luer email@example.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.