setup socket and other thiting issues with the registration and login token thingy

package-lock.json

@@ -16,7 +16,9 @@
         "@angular/platform-browser-dynamic": "^19.2.0",
         "@angular/router": "^19.2.0",
         "@simplewebauthn/browser": "^13.1.0",
+        "ngx-socket-io": "^4.8.5",
         "rxjs": "~7.8.0",
+        "socket.io-client": "^4.8.1",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
@@ -4980,7 +4982,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tufjs/canonical-json": {
@@ -5079,7 +5080,6 @@
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
       "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -5182,7 +5182,6 @@
       "version": "24.0.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.1.tgz",
       "integrity": "sha512-MX4Zioh39chHlDJbKmEgydJDS3tspMP/lnQC67G3SWsTnb9NeYVWOjkxpOSy4oMfPs4StcWHwBrvUb4ybfnuaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.8.0"
@@ -5481,7 +5480,6 @@
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-types": "~2.1.34",
@@ -5495,7 +5493,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -5850,7 +5847,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
       "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^4.5.0 || >= 5.9"
@@ -6713,7 +6709,6 @@
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
       "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -6764,6 +6759,17 @@
         "webpack": "^5.1.0"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.43.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.43.0.tgz",
+      "integrity": "sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.43.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.43.0.tgz",
@@ -6789,7 +6795,6 @@
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "object-assign": "^4",
@@ -7250,7 +7255,6 @@
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
       "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/cors": "^2.8.12",
@@ -7267,11 +7271,40 @@
         "node": ">=10.2.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/engine.io-parser": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
       "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -7281,7 +7314,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -10144,7 +10176,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -10154,7 +10185,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -10417,7 +10447,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/msgpackr": {
@@ -10546,6 +10575,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-socket-io": {
+      "version": "4.8.5",
+      "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-4.8.5.tgz",
+      "integrity": "sha512-E/HCB5vYGPhiXcd+9bDYathCgQ7aocgZISeqKoQeqOHfPxtYDiyGHWqAZSdlmjfuPLURvtULsOW1OcDnQVaTnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.39.0",
+        "reflect-metadata": "^0.2.2",
+        "socket.io": "^4.8.1",
+        "socket.io-client": "^4.8.1",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.15.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0",
+        "@angular/core": "^19.0.0",
+        "rxjs": "^7.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
@@ -10846,7 +10894,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11756,7 +11803,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/regenerate": {
@@ -12677,7 +12723,6 @@
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
       "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.4",
@@ -12696,7 +12741,6 @@
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
       "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "~4.3.4",
@@ -12707,7 +12751,38 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -12725,7 +12800,6 @@
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
       "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
@@ -12739,7 +12813,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -12757,7 +12830,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -13526,7 +13598,6 @@
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
       "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -13715,7 +13786,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -14713,7 +14783,6 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
       "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -14731,6 +14800,14 @@
         }
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@simplewebauthn/browser": "^13.1.0",
+    "ngx-socket-io": "^4.8.5",
     "rxjs": "~7.8.0",
+    "socket.io-client": "^4.8.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

src/app/app.component.ts

@@ -1,11 +1,18 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SocketService } from './services/socket.service';
 
 // app.component.ts
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet], // shows routed components
-  template: `<router-outlet></router-outlet>`
+  template: `<router-outlet></router-outlet>`,
 })
-export class AppComponent {}
+export class AppComponent {
+
+  constructor(private socketService: SocketService) {
+
+  }
+ 
+}

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,4 @@
+/* optional styling */
+button {
+  margin-top: 16px;
+}

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,5 @@
-<h2>Welcome to the dashboard!</h2>
-<!-- Make sure you see this line first to confirm the page is rendering -->
-<p>🚨 Dashboard page is working</p>
-<p>Server URL: {{ serverUrl }}</p>
+<h1>Dashboard</h1>
+
+<p *ngIf="serverUrl">Server URL: {{ serverUrl }}</p>
 
-<!-- Now the logout button -->
 <button (click)="logout()">Logout</button>

src/app/dashboard/dashboard.component.ts

@@ -1,20 +1,26 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../services/auth.service';
+import { CommonModule } from '@angular/common';
+import { SocketService } from '../services/socket.service';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
+  imports: [CommonModule],
   templateUrl: './dashboard.component.html'
 })
 export class DashboardComponent implements OnInit {
-  serverUrl: string | null = null;
+  serverUrl: string = '';
 
-  constructor(private auth: AuthService) {}
+  constructor(private auth: AuthService) {
+
+  }
 
   ngOnInit(): void {
     this.auth.getServerUrl().subscribe({
       next: (url) => {
         this.serverUrl = url;
+        console.log('Received server URL:', url);
       },
       error: (err) => {
         console.error('Error fetching server URL:', err);
@@ -22,7 +28,7 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  logout() {
+  logout(): void {
     this.auth.logout();
   }
 }

src/app/interfaces/interface.ts

@@ -1,15 +1,15 @@
 // Define clear types for input and output
-interface RegisterPayload {
+export interface RegisterPayload {
   name: string;
   email: string;
   password: string;
 }
 
-interface LoginPayload {
+export interface LoginPayload {
   email: string;
   password: string;
 }
 
-interface AuthResponse {
-  token: string;
+export interface AuthResponse {
+  access_token: string;
 }

src/app/login/login.component.ts

@@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
 
     this.auth.login(this.form.value).subscribe({
       next: (res) => {
-        this.auth.storeToken(res.token);
+        this.auth.storeToken(res.access_token);
         this.router.navigate(['/dashboard']);
       },
       error: (err) => {

src/app/register/register.component.ts

@@ -37,7 +37,7 @@ export class RegisterComponent implements OnInit {
 
     this.auth.register(formValue).subscribe({
       next: (res) => {
-        this.auth.storeToken(res.token);
+        this.auth.storeToken(res.access_token);
         this.router.navigate(['/dashboard']);
       },
       error: (err) => {

src/app/services/auth.interceptor.ts

@@ -1,22 +1,19 @@
-import { Injectable } from '@angular/core';
-import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { AuthService } from './auth.service';
+// src/app/services/auth.interceptor.ts
 
-@Injectable()
-export class AuthInterceptor implements HttpInterceptor {
-  constructor(private auth: AuthService) {}
+import { HttpInterceptorFn } from '@angular/common/http';
 
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    const token = this.auth.getToken();
-    if (token) {
-      const authReq = req.clone({
-        setHeaders: {
-          Authorization: `Bearer ${token}`
-        }
-      });
-      return next.handle(authReq);
-    }
-    return next.handle(req);
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const token = localStorage.getItem('auth_token');
+  console.log('[InterceptorFn] Token found:', token);
+
+  if (token) {
+    const authReq = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+    return next(authReq);
   }
-}
+
+  return next(req);
+};

src/app/services/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
+import { AuthResponse, LoginPayload, RegisterPayload } from '../interfaces/interface';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {

src/app/services/socket.service.ts

@@ -0,0 +1,38 @@
+// src/app/services/socket.service.ts
+
+import { Injectable } from '@angular/core';
+import { Socket } from 'ngx-socket-io';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class SocketService {
+    private connectionStatus$ = new BehaviorSubject<boolean>(false);
+
+    constructor(private socket: Socket) {
+        console.log('[SocketService] Instance:', this);
+        this.socket.on('connect', () => {
+            console.log('[Socket] Connected');
+            this.connectionStatus$.next(true);
+        });
+
+        this.socket.on('disconnect', () => {
+            console.warn('[Socket] Disconnected');
+            this.connectionStatus$.next(false);
+        });
+    }
+
+    // Example: emit an event
+    sendMessage(msg: string) {
+        this.socket.emit('message', msg);
+    }
+
+    // Example: listen to an event
+    onMessage(): Observable<any> {
+        return this.socket.fromEvent('message');
+    }
+
+    // Disconnect manually
+    disconnect() {
+        this.socket.disconnect();
+    }
+}

src/app/socket.config.ts

@@ -0,0 +1,8 @@
+// src/app/socket.config.ts
+
+import { SocketIoConfig } from 'ngx-socket-io';
+
+export const socketConfig: SocketIoConfig = {
+    url: 'http://localhost:3000/ws', // change this to your backend URL
+    options: {}
+};

src/main.ts

@@ -2,9 +2,16 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { provideRouter } from '@angular/router';
 import { routes } from './app/app.routes';
-import { HTTP_INTERCEPTORS, provideHttpClient } from '@angular/common/http';
-import { AuthInterceptor } from './app/services/auth.interceptor';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { authInterceptor } from './app/services/auth.interceptor';
+import { SocketIoModule } from 'ngx-socket-io';
+import { socketConfig } from './app/socket.config';
+import { importProvidersFrom } from '@angular/core';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideRouter(routes), provideHttpClient(), { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }]
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([authInterceptor])),
+    importProvidersFrom(SocketIoModule.forRoot(socketConfig)) // ✅ correct way
+  ],
 });