feat(nbstore): add awareness storage&sync&frontend (#9016)

packages/common/nbstore/src/impls/cloud/awareness.ts

@@ -0,0 +1,148 @@
+import type { SocketOptions } from 'socket.io-client';
+
+import { share } from '../../connection';
+import {
+  type AwarenessRecord,
+  AwarenessStorage,
+  type AwarenessStorageOptions,
+} from '../../storage/awareness';
+import {
+  base64ToUint8Array,
+  SocketConnection,
+  uint8ArrayToBase64,
+} from './socket';
+
+interface CloudAwarenessStorageOptions extends AwarenessStorageOptions {
+  socketOptions: SocketOptions;
+}
+
+export class CloudAwarenessStorage extends AwarenessStorage<CloudAwarenessStorageOptions> {
+  connection = share(
+    new SocketConnection(this.peer, this.options.socketOptions)
+  );
+
+  private get socket() {
+    return this.connection.inner;
+  }
+
+  override async connect(): Promise<void> {
+    await super.connect();
+  }
+
+  override async update(record: AwarenessRecord): Promise<void> {
+    const encodedUpdate = await uint8ArrayToBase64(record.bin);
+    this.socket.emit('space:update-awareness', {
+      spaceType: this.spaceType,
+      spaceId: this.spaceId,
+      docId: record.docId,
+      awarenessUpdate: encodedUpdate,
+    });
+  }
+
+  override subscribeUpdate(
+    id: string,
+    onUpdate: (update: AwarenessRecord, origin?: string) => void,
+    onCollect: () => AwarenessRecord
+  ): () => void {
+    // leave awareness
+    const leave = () => {
+      this.socket.emit('space:leave-awareness', {
+        spaceType: this.spaceType,
+        spaceId: this.spaceId,
+        docId: id,
+      });
+    };
+
+    // join awareness, and collect awareness from others
+    const joinAndCollect = async () => {
+      await this.socket.emitWithAck('space:join-awareness', {
+        spaceType: this.spaceType,
+        spaceId: this.spaceId,
+        docId: id,
+        clientVersion: BUILD_CONFIG.appVersion,
+      });
+      this.socket.emit('space:load-awarenesses', {
+        spaceType: this.spaceType,
+        spaceId: this.spaceId,
+        docId: id,
+      });
+    };
+
+    joinAndCollect().catch(err => console.error('awareness join failed', err));
+
+    const unsubscribeConnectionStatusChanged = this.connection.onStatusChanged(
+      status => {
+        if (status === 'connected') {
+          joinAndCollect().catch(err =>
+            console.error('awareness join failed', err)
+          );
+        }
+      }
+    );
+
+    const handleCollectAwareness = ({
+      spaceId,
+      spaceType,
+      docId,
+    }: {
+      spaceId: string;
+      spaceType: string;
+      docId: string;
+    }) => {
+      if (
+        spaceId === this.spaceId &&
+        spaceType === this.spaceType &&
+        docId === id
+      ) {
+        (async () => {
+          const record = onCollect();
+          const encodedUpdate = await uint8ArrayToBase64(record.bin);
+          this.socket.emit('space:update-awareness', {
+            spaceType: this.spaceType,
+            spaceId: this.spaceId,
+            docId: record.docId,
+            awarenessUpdate: encodedUpdate,
+          });
+        })().catch(err => console.error('awareness upload failed', err));
+      }
+    };
+
+    const handleBroadcastAwarenessUpdate = ({
+      spaceType,
+      spaceId,
+      docId,
+      awarenessUpdate,
+    }: {
+      spaceType: string;
+      spaceId: string;
+      docId: string;
+      awarenessUpdate: string;
+    }) => {
+      if (
+        spaceId === this.spaceId &&
+        spaceType === this.spaceType &&
+        docId === id
+      ) {
+        onUpdate({
+          bin: base64ToUint8Array(awarenessUpdate),
+          docId: id,
+        });
+      }
+    };
+
+    this.socket.on('space:collect-awareness', handleCollectAwareness);
+    this.socket.on(
+      'space:broadcast-awareness-update',
+      handleBroadcastAwarenessUpdate
+    );
+    return () => {
+      leave();
+      this.socket.off('space:collect-awareness', handleCollectAwareness);
+      this.socket.off(
+        'space:broadcast-awareness-update',
+        handleBroadcastAwarenessUpdate
+      );
+      unsubscribeConnectionStatusChanged();
+    };
+  }
+}

packages/common/nbstore/src/impls/cloud/doc.ts

@@ -1,4 +1,3 @@
-import { noop } from 'lodash-es';
 import type { SocketOptions } from 'socket.io-client';
 
 import { share } from '../../connection';
@@ -33,7 +32,9 @@ export class CloudDocStorage extends DocStorage<CloudDocStorageOptions> {
     await super.connect();
     this.connection.onStatusChanged(status => {
       if (status === 'connected') {
-        this.join().catch(noop);
+        this.join().catch(err => {
+          console.error('doc storage join failed', err);
+        });
         this.socket.on('space:broadcast-doc-update', this.onServerUpdate);
       }
     });

packages/common/nbstore/src/impls/cloud/index.ts

@@ -1,2 +1,3 @@
+export * from './awareness';
 export * from './blob';
 export * from './doc';

packages/common/nbstore/src/impls/cloud/socket.ts

@@ -29,6 +29,19 @@ interface ServerEvents {
     timestamp: number;
     editor: string;
   };
+
+  'space:collect-awareness': {
+    spaceType: string;
+    spaceId: string;
+    docId: string;
+  };
+
+  'space:broadcast-awareness-update': {
+    spaceType: string;
+    spaceId: string;
+    docId: string;
+    awarenessUpdate: string;
+  };
 }
 
 interface ClientEvents {
@@ -52,6 +65,19 @@ interface ClientEvents {
     docId: string;
   };
 
+  'space:update-awareness': {
+    spaceType: string;
+    spaceId: string;
+    docId: string;
+    awarenessUpdate: string;
+  };
+
+  'space:load-awarenesses': {
+    spaceType: string;
+    spaceId: string;
+    docId: string;
+  };
+
   'space:push-doc-update': [
     { spaceType: string; spaceId: string; docId: string; updates: string },
     { timestamp: number },