Merge pull request #138 from mbalex99/reconnectingwebsocket

nateps · web-flow · commit 762e05d50271 · 2018-07-14T12:58:11.000-07:00
Reconnecting Websocket Example and Updated Readme
diff --git a/README.md b/README.md
@@ -26,10 +26,26 @@ tracker](https://github.com/share/sharedb/issues).
 - Projections to select desired fields from documents and operations
 - Middleware for implementing access control and custom extensions
 - Ideal for use in browsers or on the server
-- Reconnection of document and query subscriptions
 - Offline change syncing upon reconnection
 - In-memory implementations of database and pub/sub for unit testing
 
+### Reconnection
+
+**TLDR**
+```javascript
+const WebSocket = require('reconnecting-websocket');
+var socket = new WebSocket('ws://' + window.location.host);
+var connection = new sharedb.Connection(socket);
+```
+
+The native Websocket object that you feed to ShareDB's `Connection` constructor **does not** handle reconnections. 
+
+The easiest way is to give it a WebSocket object that does reconnect. There are plenty of example on the web. The most important thing is that the custom reconnecting websocket, must have the same API as the native rfc6455 version.
+
+In the "textarea" example we show this off using a Reconnecting Websocket implementation from [https://github.com/pladaria/reconnecting-websocket](reconnecting-websocket).
+
+
+
 ## Example apps
 
 [<img src="examples/counter/demo.gif" height="300">
diff --git a/examples/textarea/client.js b/examples/textarea/client.js
@@ -2,14 +2,35 @@ var sharedb = require('sharedb/lib/client');
 var StringBinding = require('sharedb-string-binding');
 
 // Open WebSocket connection to ShareDB server
+const WebSocket = require('reconnecting-websocket');
 var socket = new WebSocket('ws://' + window.location.host);
 var connection = new sharedb.Connection(socket);
 
+var element = document.querySelector('textarea');
+var statusSpan = document.getElementById('status-span');
+status.innerHTML = "Not Connected"
+
+element.style.backgroundColor = "gray";
+socket.onopen = function(){
+  status.innerHTML = "Connected"
+  element.style.backgroundColor = "white";
+};
+
+socket.onclose = function(){
+  status.innerHTML = "Closed"
+  element.style.backgroundColor = "gray";
+};
+
+socket.onerror = function() {
+  status.innerHTML = "Error"
+  element.style.backgroundColor = "red";
+}
+
 // Create local Doc instance mapped to 'examples' collection document with id 'textarea'
 var doc = connection.get('examples', 'textarea');
 doc.subscribe(function(err) {
   if (err) throw err;
-  var element = document.querySelector('textarea');
+  
   var binding = new StringBinding(element, doc);
   binding.setup();
 });
diff --git a/examples/textarea/package.json b/examples/textarea/package.json
@@ -15,6 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "express": "^4.14.0",
+    "reconnecting-websocket": "^3.0.3",
     "sharedb": "^1.0.0-beta",
     "sharedb-string-binding": "^1.0.0",
     "websocket-json-stream": "^0.0.1",
diff --git a/examples/textarea/static/index.html b/examples/textarea/static/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>ShareDB Textarea</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 <style>
 body {
   background: #ddd;
@@ -19,9 +20,14 @@
   width: 100%;
   box-sizing: border-box;
 }
+#title {
+  font-size: 24;
+}
 </style>
 
 <div id="container">
+  <h1 id="title">Text Area Example with Reconnecting Websockets</h1>
+  <p>Connection Status: <span id="status-span"></span></p>
   <textarea autofocus></textarea>
 </div>
 
