feat(web): enable websocket (#3765)

* send store event to page

* fix format

* add new asset to existing bucket

* format

* debouncing

* format

* load bucket

* feedback

* feat: listen to deletes and auto-subscribe on all asset grid pages

* feat: auto refresh on person thumbnail

* chore: skip upload event for now

* fix: person thumbnail event

* fix merge

* update handleAssetDeletion with websocket communication

* update info box on mount

* fix test

* fix test

* feat: event for trash asset

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

server/src/infra/communication.gateway.ts

@@ -1,34 +0,0 @@
-import { AuthService } from '@app/domain';
-import { Logger } from '@nestjs/common';
-import { OnGatewayConnection, OnGatewayDisconnect, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
-import { Server, Socket } from 'socket.io';
-
-@WebSocketGateway({ cors: true })
-export class CommunicationGateway implements OnGatewayConnection, OnGatewayDisconnect {
-  private logger = new Logger(CommunicationGateway.name);
-
-  constructor(private authService: AuthService) {}
-
-  @WebSocketServer() server!: Server;
-
-  handleDisconnect(client: Socket) {
-    client.leave(client.nsp.name);
-    this.logger.log(`Client ${client.id} disconnected from Websocket`);
-  }
-
-  async handleConnection(client: Socket) {
-    try {
-      this.logger.log(`New websocket connection: ${client.id}`);
-      const user = await this.authService.validate(client.request.headers, {});
-      if (user) {
-        client.join(user.id);
-      } else {
-        client.emit('error', 'unauthorized');
-        client.disconnect();
-      }
-    } catch (e) {
-      client.emit('error', 'unauthorized');
-      client.disconnect();
-    }
-  }
-}

server/src/infra/infra.module.ts

@@ -27,7 +27,6 @@ import { BullModule } from '@nestjs/bullmq';
 import { Global, Module, Provider } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { CommunicationGateway } from './communication.gateway';
 import { databaseConfig } from './database.config';
 import { databaseEntities } from './entities';
 import { bullConfig, bullQueues } from './infra.config';
@@ -90,7 +89,7 @@ const providers: Provider[] = [
     BullModule.forRoot(bullConfig),
     BullModule.registerQueue(...bullQueues),
   ],
-  providers: [...providers, CommunicationGateway],
+  providers: [...providers],
   exports: [...providers, BullModule],
 })
 export class InfraModule {}

server/src/infra/repositories/communication.repository.ts

@@ -1,16 +1,43 @@
-import { CommunicationEvent } from '@app/domain';
-import { Injectable } from '@nestjs/common';
-import { CommunicationGateway } from '../communication.gateway';
+import { AuthService, CommunicationEvent, ICommunicationRepository, serverVersion } from '@app/domain';
+import { Logger } from '@nestjs/common';
+import { OnGatewayConnection, OnGatewayDisconnect, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
+import { Server, Socket } from 'socket.io';
 
-@Injectable()
-export class CommunicationRepository {
-  constructor(private ws: CommunicationGateway) {}
+@WebSocketGateway({ cors: true })
+export class CommunicationRepository implements OnGatewayConnection, OnGatewayDisconnect, ICommunicationRepository {
+  private logger = new Logger(CommunicationRepository.name);
+
+  constructor(private authService: AuthService) {}
+
+  @WebSocketServer() server!: Server;
+
+  async handleConnection(client: Socket) {
+    try {
+      this.logger.log(`New websocket connection: ${client.id}`);
+      const user = await this.authService.validate(client.request.headers, {});
+      if (user) {
+        client.join(user.id);
+        this.send(CommunicationEvent.SERVER_VERSION, user.id, serverVersion);
+      } else {
+        client.emit('error', 'unauthorized');
+        client.disconnect();
+      }
+    } catch (e) {
+      client.emit('error', 'unauthorized');
+      client.disconnect();
+    }
+  }
+
+  handleDisconnect(client: Socket) {
+    client.leave(client.nsp.name);
+    this.logger.log(`Client ${client.id} disconnected from Websocket`);
+  }
 
   send(event: CommunicationEvent, userId: string, data: any) {
-    this.ws.server.to(userId).emit(event, JSON.stringify(data));
+    this.server.to(userId).emit(event, JSON.stringify(data));
   }
 
   broadcast(event: CommunicationEvent, data: any) {
-    this.ws.server.emit(event, data);
+    this.server.emit(event, data);
   }
 }