Add customizable metadata for peer awareness

yorkie-team · Dec 1, 2020 · 42ce87b · 42ce87b
1 parent 0ff9537
commit 42ce87b
Show file tree

Hide file tree

Showing 7 changed files with 409 additions and 72 deletions.
diff --git a/examples/drawing.html b/examples/drawing.html
@@ -12,7 +12,7 @@
     <div>document:</div>
     <pre style="white-space: pre-wrap;"><code id="log-holder"></code></pre>
   </div>
-  <script src="./yorkie.js"></script>
+  <script src="../dist/yorkie.js"></script>
   <script src="./util.js"></script>
   <script>
     const statusHolder = document.getElementById('network-status');

diff --git a/examples/index.html b/examples/index.html
@@ -18,7 +18,7 @@
     <div>text:</div>
     <pre style="white-space: pre-wrap;"><code id="text-log-holder"></code></pre>
   </div>
-  <script src="./yorkie.js"></script>
+  <script src="../dist/yorkie.js"></script>
   <script src="./util.js"></script>
   <script>
     const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
@@ -37,7 +37,13 @@
     }
 
     function displayPeers(peers, clientID) {
-      peersHolder.innerHTML = JSON.stringify(peers).replace(clientID, `<b>${clientID}</b>`);
+      const clientIDs = [];
+
+      peers.forEach((_, clientID) => {
+        clientIDs.push(clientID);
+      })
+
+      peersHolder.innerHTML = JSON.stringify(clientIDs).replace(clientID, `<b>${clientID}</b>`);
     }
 
     // https://github.com/codemirror/CodeMirror/pull/5619

diff --git a/examples/quill.html b/examples/quill.html
@@ -7,23 +7,32 @@
   <link rel="stylesheet" href="style.css">
   <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/quill-cursors@3.0.0/dist/quill-cursors.js"></script>
+  <script src="https://zenozeng.github.io/color-hash/dist/color-hash.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/short-unique-id@latest/dist/short-unique-id.min.js"></script>
 </head>
 <body>
   <div>status: <span id="network-status"></span></div>
   <div id="toolbar"></div>
   <div id="editor"></div>
+  <div>peers:</div>
+  <pre style="white-space: pre-wrap;"><code id="peers-holder"></code></pre>
   <div>document:</div>
   <pre style="white-space: pre-wrap;"><code id="log-holder"></code></pre>
   <div>text:</div>
   <pre style="white-space: pre-wrap;"><code id="text-log-holder"></code></pre>
 
-  <script src="./yorkie.js"></script>
+  <script src="../dist/yorkie.js"></script>
   <script src="./util.js"></script>
   <script>
-    const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
+    const uid = new ShortUniqueId();
     const statusHolder = document.getElementById('network-status');
+    const peersHolder = document.getElementById('peers-holder');
     const logHolder = document.getElementById('log-holder');
     const textLogHolder = document.getElementById('text-log-holder');
+    const colorHash = new ColorHash();
+    const params = new URLSearchParams(window.location.search);
+    const username = params.get('username') || `anon-${uid()}`;
+    const meta = (new Map()).set('username', username);
 
     function displayLog(doc) {
       logHolder.innerText = doc.toJSON();
@@ -54,17 +63,43 @@
       return attributes;
     }
 
+    function displayPeers(peers, username) {
+      const usernames = [];
+
+      peers.forEach(peer => {
+        usernames.push(peer.get('username'));
+      })
+
+      peersHolder.innerHTML = JSON.stringify(usernames).replace(username, `<b>${username}</b>`);
+    }
+
     async function main() {
       try {
+        let peers;
+
         // 01. create client with RPCAddr(envoy) then activate it.
-        const client = yorkie.createClient('http://localhost:8080');
+        const client = yorkie.createClient(
+          'http://localhost:8080', 
+          {
+            meta: meta,
+            syncLoopDuration: 50,
+            reconnectStreamDelay: 1000,
+          }
+        );
         client.subscribe(network.statusListener(statusHolder));
         await client.activate();
 
         // 02. create a document then attach it into the client.
         const doc = yorkie.createDocument('examples', 'quill');
         await client.attach(doc);
 
+        client.subscribe((event) => {
+          if (event.name === 'documents-watching-peer-changed') {
+            peers = event.value[doc.getKey().toIDString()];
+            displayPeers(peers, meta.get('username'));
+          }
+        });
+
         doc.update((root) => {
           if (!root.content) {
             root.createRichText('content');
@@ -164,6 +199,7 @@
               continue;
             }
 
+            const actorName = peers.get(actor).get('username');
             const from = change.from;
             const to = change.to;
             const retainFrom = from - prevTo;
@@ -207,8 +243,8 @@
               }
             } else if (change.type === 'selection') {
               const cursors = quill.getModule('cursors');
-              cursors.createCursor(actor, actor, colors[0]);
-              cursors.moveCursor(actor, {
+              cursors.createCursor(actorName, actorName, colorHash.hex(actorName));
+              cursors.moveCursor(actorName, {
                 index: from,
                 length: retainTo
               });

diff --git a/src/api/yorkie.proto b/src/api/yorkie.proto
@@ -79,11 +79,17 @@ message DetachDocumentResponse {
 message WatchDocumentsRequest {
     RequestHeader header = 1;
     string client_id = 2;
-    repeated DocumentKey document_keys = 3;
+    map<string, string> client_meta = 3;
+    repeated DocumentKey document_keys = 4;
+}
+
+message Client {
+    string client_id = 1;
+    map<string, string> client_meta = 2;
 }
 
 message Clients {
-    repeated string client_ids = 1;
+    repeated Client clients = 1;
 }
 
 message WatchDocumentsResponse {
@@ -93,8 +99,9 @@ message WatchDocumentsResponse {
 
     message Event {
         string client_id = 1;
-        EventType event_type = 2;
-        repeated DocumentKey document_keys = 3;
+        map<string, string> client_meta = 2;
+        EventType event_type = 3;
+        repeated DocumentKey document_keys = 4;
     }
 
     oneof body {

diff --git a/src/api/yorkie_pb.d.ts b/src/api/yorkie_pb.d.ts
@@ -225,6 +225,9 @@ export class WatchDocumentsRequest extends jspb.Message {
   getClientId(): string;
   setClientId(value: string): WatchDocumentsRequest;
 
+  getClientMetaMap(): jspb.Map<string, string>;
+  clearClientMetaMap(): WatchDocumentsRequest;
+
   getDocumentKeysList(): Array<DocumentKey>;
   setDocumentKeysList(value: Array<DocumentKey>): WatchDocumentsRequest;
   clearDocumentKeysList(): WatchDocumentsRequest;
@@ -242,15 +245,38 @@ export namespace WatchDocumentsRequest {
   export type AsObject = {
     header?: RequestHeader.AsObject,
     clientId: string,
+    clientMetaMap: Array<[string, string]>,
     documentKeysList: Array<DocumentKey.AsObject>,
   }
 }
 
+export class Client extends jspb.Message {
+  getClientId(): string;
+  setClientId(value: string): Client;
+
+  getClientMetaMap(): jspb.Map<string, string>;
+  clearClientMetaMap(): Client;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): Client.AsObject;
+  static toObject(includeInstance: boolean, msg: Client): Client.AsObject;
+  static serializeBinaryToWriter(message: Client, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): Client;
+  static deserializeBinaryFromReader(message: Client, reader: jspb.BinaryReader): Client;
+}
+
+export namespace Client {
+  export type AsObject = {
+    clientId: string,
+    clientMetaMap: Array<[string, string]>,
+  }
+}
+
 export class Clients extends jspb.Message {
-  getClientIdsList(): Array<string>;
-  setClientIdsList(value: Array<string>): Clients;
-  clearClientIdsList(): Clients;
-  addClientIds(value: string, index?: number): Clients;
+  getClientsList(): Array<Client>;
+  setClientsList(value: Array<Client>): Clients;
+  clearClientsList(): Clients;
+  addClients(value?: Client, index?: number): Client;
 
   serializeBinary(): Uint8Array;
   toObject(includeInstance?: boolean): Clients.AsObject;
@@ -262,7 +288,7 @@ export class Clients extends jspb.Message {
 
 export namespace Clients {
   export type AsObject = {
-    clientIdsList: Array<string>,
+    clientsList: Array<Client.AsObject>,
   }
 }
 
@@ -316,6 +342,9 @@ export namespace WatchDocumentsResponse {
     getClientId(): string;
     setClientId(value: string): Event;
 
+    getClientMetaMap(): jspb.Map<string, string>;
+    clearClientMetaMap(): Event;
+
     getEventType(): EventType;
     setEventType(value: EventType): Event;
 
@@ -335,6 +364,7 @@ export namespace WatchDocumentsResponse {
   export namespace Event {
     export type AsObject = {
       clientId: string,
+      clientMetaMap: Array<[string, string]>,
       eventType: EventType,
       documentKeysList: Array<DocumentKey.AsObject>,
     }