Differential Synchronization - Html Canvas Example
Collaborative drawing on Html canvas
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.
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.
You will need the following things properly installed on your computer.
- Install Bower :
npm install -g bower
- Install Gulp :
npm install -g gulp
git clone <repository-url>this repository
- change into the new directory
Start up the Sync Server (see here).
Once the Sync Server is running, do:
- Visit your app at http://localhost:3000. Better multiple windows so that you can see the point of the demo.
Further Reading / Useful Links
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