Merge pull request #382 from eMarek/master

Counter example with ottype json1

examples/counter-json1/.gitignore

@@ -0,0 +1 @@
+static/dist/

examples/counter-json1/README.md

@@ -0,0 +1,24 @@
+# Simple realtime client/server sync with ShareDB (ottype json1)
+
+![Demo](demo.gif)
+
+This is a simple websocket server that exposes the ShareDB protocol,
+with a client showing an incrementing number that is sychronized
+across all open browser tabs.
+
+In this demo, data is not persisted. To persist data, run a Mongo
+server and initialize ShareDB with the
+[ShareDBMongo](https://github.com/share/sharedb-mongo) database adapter.
+
+## Install dependencies
+```
+npm install
+```
+
+## Build JavaScript bundle and run server
+```
+npm run build && npm start
+```
+
+## Run app in browser
+Load [http://localhost:8080](http://localhost:8080)

examples/counter-json1/client.js

@@ -0,0 +1,33 @@
+var ReconnectingWebSocket = require('reconnecting-websocket');
+var sharedb = require('sharedb/lib/client');
+var json1 = require('ot-json1');
+
+// Open WebSocket connection to ShareDB server
+var socket = new ReconnectingWebSocket('ws://' + window.location.host);
+sharedb.types.register(json1.type);
+var connection = new sharedb.Connection(socket);
+
+// Create local Doc instance mapped to 'examples' collection document with id 'counter'
+var doc = connection.get('examples', 'counter');
+
+// Get initial value of document and subscribe to changes
+doc.subscribe(showNumbers);
+// When document changes (by this client or any other, or the server),
+// update the number on the page
+doc.on('op', showNumbers);
+
+function showNumbers() {
+  document.querySelector('#num-clicks').textContent = doc.data.numClicks;
+};
+
+// When clicking on the '+1' button, change the number in the local
+// document and sync the change to the server and other connected
+// clients
+function increment() {
+  // Increment `doc.data.numClicks`. See
+  // https://github.com/ottypes/json1/blob/master/spec.md for list of valid operations.
+  doc.submitOp(['numClicks', {ena: 1}]);
+}
+
+// Expose to index.html
+global.increment = increment;

examples/counter-json1/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "sharedb-example-counter-json1",
+  "version": "1.0.0",
+  "description": "A simple client/server app using ShareDB (ottype json1) and WebSockets",
+  "main": "server.js",
+  "scripts": {
+    "build": "mkdir -p static/dist/ && ./node_modules/.bin/browserify client.js -o static/dist/bundle.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "Dmitry Kharitonov <geakstr@me.com> (https://dkharitonov.me/)",
+  "contributors": [
+    "Dmitry Kharitonov <geakstr@me.com> (https://dkharitonov.me/)",
+    "Avital Oliver <avital@aoliver.org> (https://aoliver.org/)",
+    "Marko Bregant <marko@bregant.si> (https://bregant.si/)"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@teamwork/websocket-json-stream": "^2.0.0",
+    "express": "^4.14.0",
+    "ot-json1": "^1.0.0",
+    "reconnecting-websocket": "^4.2.0",
+    "sharedb": "^1.0.0-beta",
+    "ws": "^7.2.0"
+  },
+  "devDependencies": {
+    "browserify": "^16.5.0"
+  }
+}

examples/counter-json1/server.js

@@ -0,0 +1,41 @@
+var http = require('http');
+var express = require('express');
+var ShareDB = require('sharedb');
+var WebSocket = require('ws');
+var WebSocketJSONStream = require('@teamwork/websocket-json-stream');
+var json1 = require('ot-json1');
+
+ShareDB.types.register(json1.type);
+var backend = new ShareDB();
+createDoc(startServer);
+
+// Create initial document then fire callback
+function createDoc(callback) {
+  var connection = backend.connect();
+  var doc = connection.get('examples', 'counter');
+  doc.fetch(function(err) {
+    if (err) throw err;
+    if (doc.type === null) {
+      doc.create({numClicks: 0}, json1.type.uri, callback);
+      return;
+    }
+    callback();
+  });
+}
+
+function startServer() {
+  // Create a web server to serve files and listen to WebSocket connections
+  var app = express();
+  app.use(express.static('static'));
+  var server = http.createServer(app);
+
+  // Connect any incoming WebSocket connection to ShareDB
+  var wss = new WebSocket.Server({server: server});
+  wss.on('connection', function(ws) {
+    var stream = new WebSocketJSONStream(ws);
+    backend.listen(stream);
+  });
+
+  server.listen(8080);
+  console.log('Listening on http://localhost:8080');
+}

examples/counter-json1/static/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>ShareDB Counter (ottype json1)</title>
+
+<div style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 36px;">
+  You clicked <span id="num-clicks"></span> times.
+  <button style="font-size: 36px;" onclick="increment()">+1</button>
+</div>
+
+<script src="dist/bundle.js"></script>