Fork me on GitHub

Backbone.js + PubNub

Real-Time Multi-User Backbone Collections and Models


    How It Works

    This is an example of the Backbone Todo List extended with the real-time power of PubNub. Every time a change is detected in the collection of todos, that change is propagated to all other clients running the same demo in their browser. Open this page in another browser window to see it in action!

    View on GitHub

    Getting Started

    You can install the package using bower and bower install pubnub-backbone or by cloning this repository. Install the PubNub library along with this one in your html file like so, replacing the *'s with the PubNub version you want to use:

    <script src=""></script>
    <script src="/path/to/backbone-pubnub.min.js"></script>

    From here the framework gives you three ways to integrate:


    This collection takes the pubnub instance and a name and then publishes all create, update, and delete methods across clients using PubNub. The name property is used to generate a unique channel name so collections do not collide with each other. As a warning, with the same name will update each other regardless of what class they come from.

    var MyCollection = Backbone.PubNub.Collection.extend({
      name: 'MyCollection', // Used to namespace the updates to this collection
      pubnub: pubnub        // A global instance of PubNub
    var myCollection = new MyCollection();


    The Backbone.sync method allows you to have a collection with a remote store, much like the LocalStorage module from the original Backbone Todos demo. This allows you to take updates from other clients when you want them and not automatically.

    var MyCollection = Backbone.Collection.extend({
      pubnub: new Backbone.PubNub(pubnub, "MyCollection") // A PubNub plugin to make the collection real-time
    var myCollection = new MyCollection();


    This will create a model that is updated in real-time across all instances. This works very similarly to the collection in that it publishes all changes across the PubNub network.

    var MyModel = Backbone.PubNub.Model.extend({
      name: 'MyModel',
      pubnub: pubnub
    var myModel = new MyModel();

    What is PubNub?

    Today’s users expect to interact in real-time. PubNub makes it easy for you to add real-time capabilities to your apps, without worrying about the infrastructure. Build apps that allow your users to engage in real-time across mobile, browser, desktop and server.

    What Can I Build With PubNub?

    The PubNub Real-Time Network takes care of the connections, global infrastructure and key building blocks for real-time interactivity, so you can focus creating killer apps…

    • Real-Time Collaboration
    • Machine-to-Machine
    • Real-Time Financial Streams
    • Real-Time Location Tracking
    • Call Triggering
    • 2nd Screen Sync
    • Live Dashboards
    • Multi-Player Games
    • Group Chat Rooms
    • Thousands more…

    Start Building Real-Time Apps Now!