Replace client.subscribe with doc.subscribe

yorkie-team · Apr 25, 2024 · 15a22cf · 15a22cf
1 parent 1b1c4d4
commit 15a22cf
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 141 deletions.
diff --git a/public/counter.html b/public/counter.html
@@ -38,13 +38,13 @@
         try {
           // 01. create client with RPCAddr then activate it.
           const client = new yorkie.Client('http://localhost:8080');
-          client.subscribe(network.statusListener(statusHolder));
           await client.activate();
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('counter', {
             enableDevtools: true,
           });
+          doc.subscribe('connection', new Network(statusHolder).statusListener);
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayOnlineClients(doc.getPresences(), client.getID());

diff --git a/public/devtool/text.css b/public/devtool/text.css
@@ -94,7 +94,6 @@
 
 .user-info {
   --client-background-color: var(--client-color, #000);
-  --client-status-color: var(--network-status-color, --client-background-color);
   background-color: var(--client-background-color);
   position: relative;
   display: flex;
@@ -110,19 +109,6 @@
   cursor: pointer;
 }
 
-.user-info.me::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform-origin: center center;
-  transform: translate(-50%, -50%) scale(1.2);
-  border: 2px solid var(--client-status-color);
-  border-radius: 50%;
-}
-
 /* toolbar > hide deleted node */
 
 .text-view-area.hide-deleted-node .char-item.deleted,

diff --git a/public/index.html b/public/index.html
@@ -227,11 +227,6 @@ <h4 class="title">
           .join('');
 
         document.head.querySelector('#codemirror-custom-style').textContent = `
-          :root {
-            --network-status-color: ${
-              network.isOnline ? usersInfo[myClientID]?.color : '#ff0000'
-            };
-          }
           .CodeMirror-selected {
             background-color: ${usersInfo[myClientID]?.color} !important;
           }
@@ -325,16 +320,14 @@ <h4 class="title">
 
           // 02-1. create client with RPCAddr.
           const client = new yorkie.Client('http://localhost:8080');
-          // 02-2. subscribe client event.
-          client.subscribe(network.statusListener(statusHolder));
-
-          // 02-3. activate client
+          // 02-2. activate client
           await client.activate();
 
           // 03-1. create a document then attach it into the client.
           const doc = new yorkie.Document('codemirror', {
             enableDevtools: true,
           });
+          doc.subscribe('connection', new Network(statusHolder).statusListener);
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayUsers(doc.getPresences(), client.getID());

diff --git a/public/multi.html b/public/multi.html
@@ -80,15 +80,14 @@ <h2>yorkie document</h2>
         try {
           // 01-1. create client with RPCAddr.
           const client = new yorkie.Client('http://localhost:8080');
-          // 01-2. subscribe client event.
-          client.subscribe(network.statusListener(statusHolder));
-          // 01-3. activate client
+          // 01-2. activate client
           await client.activate();
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('multi-example', {
             enableDevtools: true,
           });
+          doc.subscribe('connection', new Network(statusHolder).statusListener);
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayOnlineClients(doc.getPresences(), client.getID());

diff --git a/public/quill-two-clients.html b/public/quill-two-clients.html
@@ -18,6 +18,7 @@
     <div class="client-container">
       <div id="client-a">
         Client A ( id:<span class="client-id"></span>)
+        <span class="network-status"></span>
         <div class="syncmode-option">
           <span>SyncMode: </span>
           <div class="realtime-sync">
@@ -67,6 +68,7 @@
       </div>
       <div id="client-b">
         Client B ( id:<span class="client-id"></span>)
+        <span class="network-status"></span>
         <div class="syncmode-option">
           <span>SyncMode: </span>
           <div class="realtime-sync">
@@ -149,7 +151,11 @@
             const doc = new yorkie.Document(documentKey, {
               enableDevtools: true,
             });
-
+            doc.subscribe(
+              'connection',
+              new Network(clientElem.querySelector('.network-status'))
+                .statusListener,
+            );
             const onlineClients = clientElem.querySelector('.online-clients');
             doc.subscribe('presence', (event) => {
               // Update online clients list

diff --git a/public/quill.html b/public/quill.html
@@ -66,12 +66,12 @@
           // 01. create client with RPCAddr then activate it.
           const client = new yorkie.Client('http://localhost:8080');
           await client.activate();
-          client.subscribe(network.statusListener(networkStatusElem));
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document(documentKey, {
             enableDevtools: true,
           });
+          doc.subscribe('connection', new Network(statusHolder).statusListener);
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayOnlineClients(doc.getPresences(), client.getID());

diff --git a/public/style.css b/public/style.css
@@ -35,12 +35,14 @@ button {
 }
 
 #network-status,
+.network-status,
 #online-clients,
 #log-holder {
   margin: 1rem;
   font-family: monospace;
 }
-#network-status:before {
+#network-status:before,
+.network-status:before {
   content: 'network: ';
 }
 #online-clients:before {
@@ -49,16 +51,19 @@ button {
 #log-holder:before {
   content: 'root: ';
 }
-#network-status span {
+#network-status span,
+.network-status span {
   display: inline-block;
   height: 0.8rem;
   width: 0.8rem;
   border-radius: 0.4rem;
 }
-#network-status .green {
+#network-status .green,
+.network-status .green {
   background-color: green;
 }
-#network-status .red {
+#network-status .red,
+.network-status .red {
   background-color: red;
 }
 

diff --git a/public/util.js b/public/util.js
@@ -1,34 +1,36 @@
-const network = {
-  isOnline: false,
-  showOffline: (elem) => {
-    network.isOnline = false;
-    elem.innerHTML = '<span class="red"> </span>';
-  },
-  showOnline: (elem) => {
-    network.isOnline = true;
-    elem.innerHTML = '<span class="green"> </span>';
-  },
-  statusListener: (elem) => {
-    return (event) => {
-      if (
-        network.isOnline &&
-        ((event.type == 'status-changed' && event.value == 'deactivated') ||
-          (event.type == 'stream-connection-status-changed' &&
-            event.value == 'disconnected') ||
-          (event.type == 'document-sync-result' &&
-            event.value == 'sync-failed'))
-      ) {
-        network.showOffline(elem);
-      } else if (
-        !network.isOnline &&
-        ((event.type == 'status-changed' && event.value == 'activated') ||
-          (event.type == 'stream-connection-status-changed' &&
-            event.value == 'connected') ||
-          (event.type == 'document-sync-result' && event.value == 'synced') ||
-          event.type == 'document-changed')
-      ) {
-        network.showOnline(elem);
-      }
-    };
-  },
-};
+/**
+ * `Network` is a class that manages the network status.
+ */
+class Network {
+  constructor(elem) {
+    this.isOnline = false;
+    this.elem = elem;
+  }
+
+  /**
+   * Show offline status.
+   */
+  showOffline() {
+    this.isOnline = false;
+    this.elem.innerHTML = '<span class="red"> </span>';
+  }
+
+  /**
+   * Show online status.
+   */
+  showOnline() {
+    this.isOnline = true;
+    this.elem.innerHTML = '<span class="green"> </span>';
+  }
+
+  /**
+   * Listen to the network status changes.
+   */
+  statusListener = (event) => {
+    if (this.isOnline && event.value === 'disconnected') {
+      this.showOffline();
+    } else if (!this.isOnline && event.value === 'connected') {
+      this.showOnline();
+    }
+  };
+}
diff --git a/public/whiteboard.html b/public/whiteboard.html
@@ -255,7 +255,6 @@ <h2>
         try {
           // 01. create client with RPCAddr then activate it.
           const client = new yorkie.Client('http://localhost:8080');
-          client.subscribe(network.statusListener(statusHolder));
           await client.activate();
           const myClientID = client.getID();
 
@@ -286,6 +285,7 @@ <h2>
             redoStackCount.textContent = doc.getRedoStackForTest().length;
           };
 
+          doc.subscribe('connection', new Network(statusHolder).statusListener);
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') {
               renderShapes(doc, myClientID);

diff --git a/src/client/client.ts b/src/client/client.ts
@@ -15,7 +15,12 @@
  */
 
 import { ActorID } from '@yorkie-js-sdk/src/document/time/actor_id';
-import { createPromiseClient, PromiseClient } from '@connectrpc/connect';
+import {
+  createPromiseClient,
+  PromiseClient,
+  ConnectError,
+  Code as ConnectErrorCode,
+} from '@connectrpc/connect';
 import { createGrpcWebTransport } from '@connectrpc/connect-web';
 import { YorkieService } from '../api/yorkie/v1/yorkie_connect';
 import { WatchDocumentResponse } from '@yorkie-js-sdk/src/api/yorkie/v1/yorkie_pb';
@@ -30,6 +35,9 @@ import {
   DocumentKey,
   DocumentStatus,
   Indexable,
+  DocEventType,
+  StreamConnectionStatus,
+  DocumentSyncStatus,
 } from '@yorkie-js-sdk/src/document/document';
 import { createAuthInterceptor } from '@yorkie-js-sdk/src/client/auth_interceptor';
 import { createMetricInterceptor } from '@yorkie-js-sdk/src/client/metric_interceptor';
@@ -446,13 +454,7 @@ export class Client {
       });
     }
 
-    return Promise.all(promises).catch((err) => {
-      // this.eventStreamObserver.next({
-      //   type: ClientEventType.DocumentSynced,
-      //   value: DocumentSyncResultType.SyncFailed,
-      // });
-      throw err;
-    });
+    return Promise.all(promises);
   }
 
   /**
@@ -544,10 +546,6 @@ export class Client {
         .then(() => setTimeout(doLoop, this.syncLoopDuration))
         .catch((err) => {
           logger.error(`[SL] c:"${this.getKey()}" sync failed:`, err);
-          // this.eventStreamObserver.next({
-          //   type: ClientEventType.DocumentSynced,
-          //   value: DocumentSyncResultType.SyncFailed,
-          // });
           setTimeout(doLoop, this.retrySyncLoopDelay);
         });
     };
@@ -585,10 +583,12 @@ export class Client {
           },
         );
 
-        // this.eventStreamObserver.next({
-        //   type: ClientEventType.StreamConnectionStatusChanged,
-        //   value: StreamConnectionStatus.Connected,
-        // });
+        attachment.doc.publish([
+          {
+            type: DocEventType.ConnectionChanged,
+            value: StreamConnectionStatus.Connected,
+          },
+        ]);
         logger.info(`[WD] c:"${this.getKey()}" watches d:"${docKey}"`);
 
         return new Promise((resolve, reject) => {
@@ -604,12 +604,20 @@ export class Client {
                 }
               }
             } catch (err) {
-              // this.eventStreamObserver.next({
-              //   type: ClientEventType.StreamConnectionStatusChanged,
-              //   value: StreamConnectionStatus.Disconnected,
-              // });
+              attachment.doc.publish([
+                {
+                  type: DocEventType.ConnectionChanged,
+                  value: StreamConnectionStatus.Disconnected,
+                },
+              ]);
               logger.debug(`[WD] c:"${this.getKey()}" unwatches`);
-              onDisconnect();
+
+              if (
+                err instanceof ConnectError &&
+                err.code != ConnectErrorCode.Canceled
+              ) {
+                onDisconnect();
+              }
 
               reject(err);
             }
@@ -649,11 +657,6 @@ export class Client {
     attachment.cancelWatchStream();
     logger.debug(`[WD] c:"${this.getKey()}" unwatches`);
 
-    // this.eventStreamObserver.next({
-    //   type: ClientEventType.StreamConnectionStatusChanged,
-    //   value: StreamConnectionStatus.Disconnected,
-    // });
-
     this.attachmentMap.delete(docKey);
   }
 
@@ -689,10 +692,12 @@ export class Client {
         }
 
         doc.applyChangePack(respPack);
-        // this.eventStreamObserver.next({
-        //   type: ClientEventType.DocumentSynced,
-        //   value: DocumentSyncResultType.Synced,
-        // });
+        attachment.doc.publish([
+          {
+            type: DocEventType.SyncStatusChanged,
+            value: DocumentSyncStatus.Synced,
+          },
+        ]);
         // NOTE(chacha912): If a document has been removed, watchStream should
         // be disconnected to not receive an event for that document.
         if (doc.getStatus() === DocumentStatus.Removed) {
@@ -709,6 +714,12 @@ export class Client {
         return doc;
       })
       .catch((err) => {
+        doc.publish([
+          {
+            type: DocEventType.SyncStatusChanged,
+            value: DocumentSyncStatus.SyncFailed,
+          },
+        ]);
         logger.error(`[PP] c:"${this.getKey()}" err :`, err);
         throw err;
       });