Map rest user to socket login

src/events/events.gateway.ts

@@ -19,7 +19,7 @@ export class EventsGateway
 
   @WebSocketServer() public server: Server;
 
-  users = [];
+  onlineMap = {};
 
   afterInit() {
     this.logger.debug('init');
@@ -28,16 +28,40 @@ export class EventsGateway
     this.logger.debug(
       `client(${socket.id}) connected on namespace(${socket.nsp.name})`,
     );
-    this.users.push(socket.id);
-    this.server.emit('users', { numOfUsers: this.users.length });
+    if (!this.onlineMap[socket.nsp.name]) {
+      this.onlineMap[socket.nsp.name] = {};
+    }
+    this.onlineMap[socket.nsp.name][socket.id] = '';
+    this.server.emit(
+      'onlineList',
+      Object.values(this.onlineMap[socket.nsp.name]),
+    );
   }
 
   handleDisconnect(@ConnectedSocket() socket: Socket) {
     this.logger.debug(
       `client(${socket.id}) disconnected on namespace(${socket.nsp.name})`,
     );
-    this.users = this.users.filter((val) => val !== socket.id);
-    this.server.emit('users', { numOfUsers: this.users.length });
+    delete this.onlineMap[socket.nsp.name][socket.id];
+    this.server.emit(
+      'onlineList',
+      Object.values(this.onlineMap[socket.nsp.name]),
+    );
+  }
+
+  @SubscribeMessage('login')
+  handleLogin(@MessageBody() data, @ConnectedSocket() socket: Socket) {
+    const newNamespace = socket.nsp;
+    this.logger.debug(`login, ${socket.nsp.name}`);
+    this.onlineMap[socket.nsp.name][socket.id] = data;
+    newNamespace.emit(
+      'onlineList',
+      Object.values(this.onlineMap[socket.nsp.name]),
+    );
+
+    const channel = 'all';
+    this.logger.debug(`join, ${socket.nsp.name}, ${channel}`);
+    socket.join(`${socket.nsp.name}-${channel}`);
   }
 
   @SubscribeMessage('chat')

src/users/user.controller.ts

@@ -4,7 +4,7 @@ import {
   ApiResponse,
   ApiTags,
 } from '@nestjs/swagger';
-import { Controller, Get, Render, UseGuards } from '@nestjs/common';
+import { Controller, Get, UseGuards } from '@nestjs/common';
 import { JwtAuthGuard } from '../auth/jwt.auth.guard';
 import { User } from './users.decorator';
 import { UserDto } from './user.dto';
@@ -24,15 +24,12 @@ export class UserController {
   })
   @UseGuards(JwtAuthGuard)
   @Get()
-  @Render('user')
   protected(@User() user: UserDto) {
     const { provider, id, username } = user;
     return {
-      data: {
-        provider,
-        id,
-        username,
-      },
+      provider,
+      id,
+      username,
     };
   }
 }

views/chat.hbs

@@ -25,9 +25,16 @@
   $(function(){
     var socket = io();
 
-    socket.on("users", function(data) {
+    fetch("/user")
+      .then(r=>r.json())
+      .then(data => {
+        console.log(data);
+        socket.emit("login", data);
+      });
+
+    socket.on("onlineList", function(data) {
       console.log(data);
-      $("#numOfUsers").html("<strong>" + 'Number of Users: ' + "</strong>" + data.numOfUsers);
+      $("#numOfUsers").html("<strong>" + 'Users: ' + "</strong>" + data.map((user) => user.username));
     });
 
     socket.on("chat", function(data) {

views/login.hbs

@@ -16,7 +16,7 @@
       </div>
       <div class="row m-4 align-items-start">
         <div class="col">
-          <img src='/images/btnG_complete.png' width='240'>
+          <img src='/images/btn_google_signin_light_focus_web.png' width='246'>
         </div>
       </div>
     </div>