[feature] heartbeat on websocket

README.md

@@ -192,12 +192,7 @@ let quillOptions = {
 let editor = new Editor("#container", editorOptions, quillOptions);
 
 let websocketEndpoint = "ws://localhost:8080";
-
-let socket = new ReconnectingWebSocket(websocketEndpoint);
-let connection = new ShareDB.Connection(socket);
-let doc = connection.get("examples", "test-doc");
-
-editor.syncDocument(doc);
+editor.syncThroughWebsocket(websocketEndpoint, "examples", "test-doc");
 
 ```
 

authorship.js

@@ -308,6 +308,10 @@ class AuthorSidebar {
                 current = current.next;
             }
 
+            if(maxLengthAuthor === 0) {
+                return;
+            }
+
             // Update author's name inside sidebar item
             let lineAuthorId = maxLengthAuthor;
             let self = this;

demo/index.js

@@ -1,7 +1,5 @@
 import Editor from "../editor";
 import 'quill/dist/quill.snow.css'
-import ReconnectingWebSocket from "reconnecting-websocket";
-import ShareDB from "sharedb/lib/client";
 import EditorEvents from "../editor-events";
 
 let authors = [
@@ -110,8 +108,4 @@ editor.on(EditorEvents.imageSkipped, ()=>{
 
 let websocketEndpoint = "ws://127.0.0.1:8080";
 
-let socket = new ReconnectingWebSocket(websocketEndpoint);
-let connection = new ShareDB.Connection(socket);
-let doc = connection.get("examples", "test-doc");
-
-editor.syncDocument(doc);
+editor.syncThroughWebsocket(websocketEndpoint, "examples", "test-doc");

editor.js

@@ -16,7 +16,6 @@ import Synchronizer from "./synchronizer";
 shareDB.types.register(richText.type);
 
 Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste);
-Quill.register("modules/authorship", Authorship);
 Quill.register(ImagePlaceholder);
 
 // For icons of header value 3
@@ -63,8 +62,8 @@ class Editor {
         });
     }
 
-    syncDocument(shareDBDocument) {
-        this.synchronizer.syncShareDBDocument(shareDBDocument);
+    syncThroughWebsocket(endpoint, collection, docId) {
+        return this.synchronizer.syncThroughWebsocket(endpoint, collection, docId);
     }
 
     on(event, handler) {
@@ -94,6 +93,11 @@ class Editor {
             });
         }
     }
+
+    close() {
+        this.eventHandlers = {};
+        this.synchronizer.close();
+    }
 }
 
 export default Editor;

synchronizer.js

@@ -1,4 +1,6 @@
 import EditorEvents from "./editor-events";
+import ReconnectingWebSocket from "reconnecting-websocket";
+import ShareDB from "sharedb/lib/client";
 
 class Synchronizer  {
     constructor (editor, composition) {
@@ -7,16 +9,44 @@ class Synchronizer  {
         this.doc = null;
         this.debug = false;
         this.composition = composition;
+        this.heartbeat = null;
+
+        this.socket = null;
     }
 
     submitDeltaToUpstream(delta) {
         this.doc.submitOp(delta, {source: 'user'});
     }
 
-    syncShareDBDocument(shareDBDocument) {
+    syncThroughWebsocket(endpoint, collection, docId) {
 
         this.close();
 
+        this.socket = new ReconnectingWebSocket(endpoint);
+
+        let connection = new ShareDB.Connection(this.socket);
+
+        this.syncShareDBDocument(connection.get(collection, docId));
+
+        // Send heartbeat message to keep websocket connection alive
+
+        let self = this;
+
+        this.socket.addEventListener("open", () => {
+            self.heartbeat = setInterval(() => {
+                self.socket.send('{"a":"hs"}');
+            }, 5000);
+        });
+
+        this.socket.addEventListener("close", () => {
+            clearInterval(self.heartbeat);
+        });
+
+        return this.socket;
+    }
+
+    syncShareDBDocument(shareDBDocument) {
+
         this.doc = shareDBDocument;
 
         let self = this;
@@ -54,6 +84,11 @@ class Synchronizer  {
             this.doc.destroy();
             this.doc = null;
         }
+
+        if(this.socket) {
+            this.socket.close();
+            this.socket = null;
+        }
     }
 
     log(msg){