0.2.1 • Public • Published

    backbone-socketio Build Status

    Realtime two-way data-binding of Backbone model and collection data to a webserver via Makes realtime, collaborative editing in Backbone applications (hopefully) much simpler.

    Getting Started


    Install the module: npm install backbone-socketio.

    Server-side event listeners are added by injecting the module as a dependency:

    var io = require('');
    // continue to do your normal stuff here


    The only dependencies the client has are Underscore and Backbone.js. Using Cocktail to apply mixins to models or collections will make for a much nicer experience, but is not required.

    Install the client-side code using Bower:

    bower install backbone-socketio

    or by downloading the minified file and hosting it on your server or CDN.

    Include the file: <script src="/bower_components/backbone-socketio/client/backbone-socketio.min.js"></script>

    And mix the event listeners in using Cocktail, or manually with extend.

    With Cocktail:

    var socket = io.connect('http://localhost:3000'),
        backboneMixins = new BackboneSocketio(socket),
        MyModel, MyCollection;
    MyModel = Backbone.Model.extend({ /* normal model init code here */ });
    Cocktail.mixin(MyModel, backboneMixins.mixins.model);
    MyCollection = Backbone.Collection.extend({ /* normal collection init code here */ });
    Cocktail.mixin(MyCollection, backboneMixins.mixins.collection);

    Without Cocktail:

    var socket = io.connect('http://localhost:3000'),
        backboneMixins = new BackboneSocketio(socket),
        SocketModel = Backbone.Model.extend(backboneMixins.mixins.model),
        SocketCollection = Backbone.Collection.extend(backboneMixins.mixins.collection),
        MyModel, MyCollection;
    MyModel = SocketModel.extend({
        // normal model init code here
        initialize: function () {
            // if you need an initialize method make sure you call the parent's
            // initialize function
    MyCollection = SocketCollection.extend({
        // normal collection init code here
        initialize: function () {
            // if you need an initialize method make sure you call the parent's
            // initialize function

    This will set up listeners on all the necessary change events on models and collections then publish those changes down to the server. The server will then broadcast those changes back out to all other clients connected to the same socket and update the data in their corresponding models and collections.

    Handling any DOM manipulation necessary to reflect changes in your views is up to you.


    In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt. grunt will run unit tests and JSHint.

    Release History


    • Added minified version of client file with source map file
    • Only a model's changed data is sent over socket rather than entire model's JSON
    • Reorganized file structure
    • Rewrote unit tests using Mocha


    • Support for Backbone.Collection sort events
    • Minor bug fixes


    Basic proof of concept. Full support for add and remove (collection) and change (model) events.

    TODOs/wish list

    • Put server component on NPM
    • Make client component work with Bower
    • Account/room-specific events
    • Server-side hooks to run custom code in response to change events
    • Probably a lot of other things I can't remember right now


    Copyright (c) 2013-2014 Josh Mock

    Licensed under the MIT license.

    Bitdeli Badge


    npm i backbone-socketio

    DownloadsWeekly Downloads






    Last publish


    • avatar