Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
app
.gitignore
README.md
bower.json
gulpfile.js
package.json

README.md

Differential Synchronization - Html Canvas Example

Problem

Collaborative drawing on Html canvas

Solution

The AeroGear Sync Server an implementation of Google's Differential Synchonrization by Neil Fraser.

AeroGear.js provides a client library to interact with the server, using both the JSON Patch and Diff-Merge-Patch protocols.

This demo will utilize the JSON Patch part of the library.

Demo

demo

See the demo video on Youtube.

Working Code Example

This demo is using Fabric.js to do high level Html canvas operations. Follow the directions below to get the example working.

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • Install Bower : npm install -g bower
  • Install Gulp : npm install -g gulp
  • git clone <repository-url> this repository
  • change into the new directory
  • npm install
  • bower install

Running

Start up the Sync Server (see here).

Once the Sync Server is running, do:

  • Issue gulp
  • Visit your app at http://localhost:3000. Better multiple windows so that you can see the point of the demo.

Further Reading / Useful Links

Notes

Although in the example we serialize the entire canvas every time, only the diffs are sent and received over the wire thanks to AeroGear sync. A much better implementation would not serialize the canvas every time. This demo is a showcase focused on AeroGear, not Fabric.js.