Clarify the ClientEvent that is sent to client.subscribe

public/counter.html

@@ -25,31 +25,35 @@
       const counterIncreaseButton = document.getElementById('increaseButton');
       const counterDecreaseButton = document.getElementById('decreaseButton');
 
+      function displayPeers(peers, myClientID) {
+        const usernames = [];
+        for (const { clientID, presence } of peers) {
+          usernames.push(
+            clientID === myClientID ? `<b>${clientID}</b>` : clientID,
+          );
+        }
+        peersHolder.innerHTML = JSON.stringify(usernames);
+      }
+
       async function main() {
         try {
           // 01. create client with RPCAddr(envoy) then activate it.
           const client = new yorkie.Client('http://localhost:8080');
           client.subscribe(network.statusListener(statusHolder));
+          client.subscribe((event) => {
+            if (event.type === 'peers-changed') {
+              displayPeers(
+                client.getPeersByDocKey(doc.getKey()),
+                client.getID(),
+              );
+            }
+          });
           await client.activate();
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('counter');
           await client.attach(doc);
 
-          client.subscribe((event) => {
-            if (event.type === 'peers-changed') {
-              const usernames = [];
-              const myClientID = client.getID();
-              const peers = event.value[doc.getKey()];
-              for (const [clientID, presence] of Object.entries(peers)) {
-                usernames.push(
-                  clientID === myClientID ? `<b>${clientID}</b>` : clientID,
-                );
-              }
-              peersHolder.innerHTML = JSON.stringify(usernames);
-            }
-          });
-
           // 03. initialize document properties
           doc.update((root) => {
             if (!root.counter) {

public/index.html

@@ -49,17 +49,14 @@
         textLogHolder.innerText = doc.getRoot().content.getStructureAsString();
       }
 
-      function displayPeers(peers, clientID) {
-        const clientIDs = [];
-
-        for (const [clientID, _] of Object.entries(peers)) {
-          clientIDs.push(clientID);
+      function displayPeers(peers, myClientID) {
+        const usernames = [];
+        for (const { clientID, presence } of peers) {
+          usernames.push(
+            clientID === myClientID ? `<b>${clientID}</b>` : clientID,
+          );
         }
-
-        peersHolder.innerHTML = JSON.stringify(clientIDs).replace(
-          clientID,
-          `<b>${clientID}</b>`,
-        );
+        peersHolder.innerHTML = JSON.stringify(usernames);
       }
 
       // https://github.com/codemirror/CodeMirror/pull/5619
@@ -137,17 +134,20 @@
 
       async function main() {
         try {
-          // 01. create client with RPCAddr(envoy) then activate it.
+          // 01-1. create client with RPCAddr(envoy).
           const client = new yorkie.Client('http://localhost:8080');
-          client.subscribe(network.statusListener(statusHolder));
-          await client.activate();
-
           // 01-2. subscribe client event.
+          client.subscribe(network.statusListener(statusHolder));
           client.subscribe((event) => {
             if (event.type === 'peers-changed') {
-              displayPeers(event.value[doc.getKey()], client.getID());
+              displayPeers(
+                client.getPeersByDocKey(doc.getKey()),
+                client.getID(),
+              );
             }
           });
+          // 01-3. activate client
+          await client.activate();
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('codemirror');

public/quill.html

@@ -41,7 +41,7 @@
         const { embed, ...restAttributes } = textValue.attributes ?? {};
 
         if (embed) {
-          return { insert: JSON.parse(embed), attributes: restAttributes }
+          return { insert: JSON.parse(embed), attributes: restAttributes };
         }
 
         return {
@@ -50,51 +50,49 @@
         };
       }
 
-      function displayPeers(elem, peers, clientID) {
+      function displayPeers(peers, myClientID) {
         const usernames = [];
-        for (const [clientID, presence] of Object.entries(peers)) {
+        for (const { clientID, presence } of peers) {
           usernames.push(
-            clientID === clientID ? `<b>${presence.username}</b>` : presence.username,
+            myClientID === clientID
+              ? `<b>${presence.username}</b>`
+              : presence.username,
           );
         }
-        elem.innerHTML = JSON.stringify(usernames);
+        peersElem.innerHTML = JSON.stringify(usernames);
       }
 
-      function findDefectors(peers, newPeers) {
-        const usernames = [];
-        for (const [clientID, presence] of Object.entries(peers)) {
-          if (!newPeers[clientID]) {
-            usernames.push(presence.username);
+      function getPeerPresence(peers, peerID) {
+        for (const peer of peers) {
+          if (peer.clientID === peerID) {
+            return peer.presence;
           }
         }
-        return usernames;
+        return null;
       }
 
       async function main() {
         try {
-          let peers;
+          let quillPeers;
 
-          // 01-1. create client with RPCAddr(envoy) then activate it.
+          // 01. create client with RPCAddr(envoy) then activate it.
           const client = new yorkie.Client('http://localhost:8080', {
             presence: {
               username: `username-${shortUniqueID()}`,
             },
           });
           await client.activate();
-
-          // 01-2. subscribe client event.
+          client.subscribe(network.statusListener(networkStatusElem));
           client.subscribe((event) => {
-            network.statusListener(networkStatusElem)(event);
-            if (event.type === 'peers-changed') {
-              const newPeers = event.value[doc.getKey()];
-              if (peers) {
-                for (const username of findDefectors(peers, newPeers)) {
-                  cursors.removeCursor(username);
-                }
-              }
-              peers = newPeers;
-              displayPeers(peersElem, event.value[doc.getKey()], client.getID() || '');
+            if (event.type !== 'peers-changed') return;
+
+            const { type, peers } = event.value;
+            if (type === 'unwatched') {
+              cursors.removeCursor(
+                peers[doc.getKey()].map((peer) => peer.presence.username),
+              );
             }
+            displayPeers(client.getPeersByDocKey(doc.getKey()), client.getID());
           });
 
           // 02. create a document then attach it into the client.
@@ -220,12 +218,12 @@
             const deltaOperations = [];
             let prevTo = 0;
             for (const change of changes) {
-              const actor = change.actor;
-              if (actor === client.getID()) {
+              const actorID = change.actor;
+              if (actorID === client.getID()) {
                 continue;
               }
 
-              const actorName = peers[actor]['username'];
+              const actorName = getPeerPresence(quillPeers, actorID).username;
               const from = change.from;
               const to = change.to;
               const retainFrom = from - prevTo;