Backbone.js and PubNub Integration - Real Time Backbone Collections and Models

Todos

Mark all as complete

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="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="/path/to/backbone-pubnub.min.js"></script>

From here the framework gives you three ways to integrate:

Backbone.PubNub.Collection

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();

Backbone.sync

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();

Backbone.PubNub.Model

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…

Backbone.js + PubNub

Real-Time Multi-User Backbone Collections and Models