• Stars
    star
    582
  • Rank 74,128 (Top 2 %)
  • Language
    JavaScript
  • Created over 12 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Bind socket.io events to backbone models & collections. Also includes a drop-in replacement for Backbone.sync using socket.io.

Backbone.ioBind

Backbone.ioBind allows you to bind socket.io events to backbone model & collection events. Also includes 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.

Quick Links

Dependencies

Compatibility

Use Backbone.ioBind < 0.4.6 for compatibility with version Backbone less then 1.0.0

Usage

Download and include in your projects.

<script src="/js/backbone.iosync.js"></script>
<script src="/js/backbone.iobind.js"></script>

Or use the minimized versions.

<script src="/js/backbone.iosync.min.js"></script>
<script src="/js/backbone.iobind.min.js"></script>

Where to Get Help

Please post issues to GitHub Issues. Community forum is available at the Google Group.

Using the Backbone.sync Replacement for Socket.io

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 transport.

Namespaces / Urls

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:

  • posts:create
  • posts:read
  • posts:update
  • posts:delete

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 urlRoot.

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 posts.*

RPC / Callbacks

This replacement assumes that you are using socket.io's RPC (callback) formula for these events. Examine this psuedo-code:

socket.on('posts:read', function (data, callback) {
  db.query({_id: data.id}, function (err, model) {
    if (err) {
      callback(err);
    } else {
      // ... some data scrubbing
      callback(null, model);
    }
  });
});

The callback accepts two parameters: error and model. If no error has occurred, send null for error.

The model should be a JSON representation of the client-side model's attributes.

Using Backbone.ioBind for Custom Events

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.

ioBind

The ioBind function is available for both Models and Collections, and behaves almost identically in both scenarios

// Example Model.extend
urlRoot: 'todo',
initialize: function () {
  _.bindAll(this, 'serverChange', 'serverDelete', 'modelCleanup');
  this.ioBind('update', window.socket, this.serverChange, this);
  this.ioBind('delete', window.socket, this.serverDelete, this);
}

// Example Collection.exend
url: 'todos',
initialize: function () {
  _.bindAll(this, 'serverCreate', 'collectionCleanup');
  this.ioBind('create', window.socket, this.serverCreate, 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 events
socket.emit('todo/' + todo_obj.id + ':update', todo_obj);
socket.emit('todo/' + todo_obj.id + ':delete', todo_obj);

// Collection events
socket.emit('todos:create', todo_obj);

Usage Guidelines

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 urlRoot.

Reserved events: Do NOT bind to reserved backbone events, such as change, remove, and add. Proxy these events using different event tags such as update, delete, and create.

Building

Clone this repo:

$ git clone https://github.com/logicalparadox/backbone.iobind

Install development/build dependancies (Ie: folio).:

$ npm install

Run make

$ make

Example Tasks Application

There is an example application demonstrating the basics of using the ioSync and 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 example folder. 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.

Other Frameworks

Protip

Works great with the awesome backbone.modelbinding.

Contributors

Interested in contributing? Fork to get started. Contact @mahnunchik if you are interested in being regular contributor.

License

(The MIT License)

Copyright (c) 2011 Jake Luer [email protected]

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.

More Repositories

1

android-check

Static code analysis plugin for Android project. (Checkstyle, PMD)
Groovy
267
star
2

android-logger

Useful logger for Android based on standard android.util.Log class. Simple lightweight (< 50 Kb) implementation of SLF4J API. Easy but powerful configuration via properties file and some additional helpful logging methods. Easy analogue of popular log4j library.
Java
224
star
3

Highlightify

Add pressed state to text color and drawables from runtime
XSLT
29
star
4

rxpy-example

Демо-проект RSS-агрегатора
Python
27
star
5

gulp-spritegen

gulp-spritegen generates sprites for different densities (iPhone 6+)
JavaScript
22
star
6

android-project-example

Example of Android project. Keywords: Gradle, signing, keystore, JNI, Android NDK, Checkstyle, FindBugs, PMD.
Java
11
star
7

honeycombs

State manager with built-in side-effects
JavaScript
5
star
8

clap

TODO: write description
Java
4
star
9

university-android-presentations

HTML
4
star
10

nhaystack

Improvements, optimizations and back-ports for Haystack (with Elastic biases).
Python
4
star
11

NOAPIController

API controller with JSON to Objective-C objects mapping.
Objective-C
4
star
12

android-cache-manager

TODO: write a description
3
star
13

java-bean-helper

TODO write a description
Java
3
star
14

BLE-HRM-iOS-Demo

Simple app that demonstrates usage of BLE stack on iOS.
Objective-C
2
star
15

vue-update-watcher

JavaScript
1
star
16

android-snitch

Java
1
star
17

ios-nui

Objective-C
1
star
18

task-executor

Simple asynchronous (background) task executor for Java.
Java
1
star
19

university-android-task7

Android database task
Java
1
star
20

ios-aux

Auxiliary functions for iOS developers
Objective-C
1
star
21

hibernate-envers-legacy

Java
1
star
22

university-android-task3

Java
1
star
23

release-watcher

JavaScript
1
star
24

draft-android-database-helper

Java
1
star
25

rpc

Remote procedure call library for node.js and browser/react-native which works in both sides and allows to execute methods on the client and the server sides.
TypeScript
1
star