From 369cb434b94c3c2951081e907502238a238c2bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Atar?= <ugur.atar@bimobject.com>
Date: Tue, 20 May 2025 18:40:49 +0200
Subject: [PATCH] Cleanup socket event listeners

---
 server.ts                              |  4 ++--
 src/app/chat/chat.component.ts         |  9 +++++++--
 src/app/register/register.component.ts | 25 ++++++++++++++++++-------
 src/app/top-main/top-main.component.ts |  8 ++++++--
 4 files changed, 33 insertions(+), 13 deletions(-)
 mode change 100755 => 100644 src/app/chat/chat.component.ts
 mode change 100755 => 100644 src/app/register/register.component.ts

diff --git a/server.ts b/server.ts
index ec010d5..43d838e 100644
--- a/server.ts
+++ b/server.ts
@@ -31,8 +31,8 @@ function FindAddStack(room: string, currentStack): Datastructure.TopperStack {
 }
 
 io.on('connection', function(client) {
-  // Send current user list to current user only
-  client.emit('update_toppers', totalToppers);
+  // Send current user count to the connecting client only
+  client.emit('total_toppers', totalToppers);
 
   client.on('addUser', function(data: Datastructure.ITopper) {
     data.id = client.id;
diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
old mode 100755
new mode 100644
index a8d0c84..46614c7
--- a/src/app/chat/chat.component.ts
+++ b/src/app/chat/chat.component.ts
@@ -3,7 +3,8 @@ import {
   AfterViewChecked,
   ElementRef,
   ViewChild,
-  OnInit
+  OnInit,
+  OnDestroy
 } from '@angular/core';
 
 import { SocketService } from '../socket.service';
@@ -29,7 +30,7 @@ import { Chat } from '../../../Datastructure/Message';
     'b { color: #2e69c9; }'
   ]
 })
-export class ChatComponent implements OnInit, AfterViewChecked {
+export class ChatComponent implements OnInit, AfterViewChecked, OnDestroy {
   @ViewChild('chatwindow') private myScrollContainer: ElementRef;
 
   private previousChatHeight: number = 0;
@@ -52,6 +53,10 @@ export class ChatComponent implements OnInit, AfterViewChecked {
     });
   }
 
+  ngOnDestroy() {
+    this.socketService.getSocketConnection().off('message');
+  }
+
   sendMessage(event) {
     let message: Chat.Message = {
       message: event.target.value,
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts
old mode 100755
new mode 100644
index 0b95b83..4219281
--- a/src/app/register/register.component.ts
+++ b/src/app/register/register.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { SocketService } from '../socket.service';
 import { Datastructure } from '../../../Datastructure/TopperStack';
 import { Router } from '@angular/router';
@@ -26,7 +26,7 @@ import { Router } from '@angular/router';
     </div>
 <router-outlet></router-outlet>`,
 })
-export class RegisterComponent implements OnInit {
+export class RegisterComponent implements OnInit, OnDestroy {
   currentTopper: Datastructure.ITopper;
   usernameInvalid: boolean = false;
   onlineCount: number = 0;
@@ -38,17 +38,21 @@ export class RegisterComponent implements OnInit {
   }
 
   addUser() {
+    if (!this.currentTopper.name) {
+      this.usernameInvalid = true;
+      return;
+    }
     this.socketService
       .getSocketConnection()
       .emit('addUser', this.currentTopper);
   }
 
   ngOnInit() {
-    this.socketService
-      .getSocketConnection()
-      .on('update_toppers', totalTopppers => {
-        this.onlineCount = totalTopppers;
-      });
+      this.socketService
+        .getSocketConnection()
+        .on('total_toppers', total => {
+          this.onlineCount = total;
+        });
 
     this.socketService.getSocketConnection().on('update_me', data => {
       this.currentTopper.id = data.id;
@@ -60,4 +64,11 @@ export class RegisterComponent implements OnInit {
       this.usernameInvalid = true;
     });
   }
+
+  ngOnDestroy() {
+    const socket = this.socketService.getSocketConnection();
+    socket.off('total_toppers');
+    socket.off('update_me');
+    socket.off('register_failed');
+  }
 }
diff --git a/src/app/top-main/top-main.component.ts b/src/app/top-main/top-main.component.ts
index 022c5b5..8f730be 100644
--- a/src/app/top-main/top-main.component.ts
+++ b/src/app/top-main/top-main.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Datastructure } from '../../../Datastructure/TopperStack';
 import { SocketService } from '../socket.service';
 import { Router } from '@angular/router';
@@ -48,7 +48,7 @@ import { Router } from '@angular/router';
     <router-outlet></router-outlet>`,
   styles: ['#topperList { padding:0px; margin-top:0px; }'],
 })
-export class TopMainComponent implements OnInit {
+export class TopMainComponent implements OnInit, OnDestroy {
   socketService: SocketService;
   currentTopper: Datastructure.ITopper;
   topperList: Datastructure.TopperStack = new Datastructure.TopperStack([]);
@@ -68,6 +68,10 @@ export class TopMainComponent implements OnInit {
     });
   }
 
+  ngOnDestroy() {
+    this.socketService.getSocketConnection().off('update_toppers');
+  }
+
   topMe() {
     this.socketService.getSocketConnection().emit('top_me', this.currentTopper);
   }