refactor: better event handling

backend/server.js

@@ -1,5 +1,9 @@
 const express = require('express');
 const dotenv = require('dotenv');
+const { Server } = require('socket.io');
+
+const ChatSocketHandler = require('./socket/ChatSocketHandler');
+const ChannelSocketHandler = require('./socket/ChannelSocketHandler');
 
 const channelController = require('./controllers/ChannelController');
 const streamController = require('./controllers/StreamController');
@@ -19,25 +23,26 @@ app.use('/channels', apiRouter);
 const PORT = 5000;
 const server = app.listen(PORT, () => {
     console.log(`Server listening on Port ${PORT}`);
-    streamController.start();
+    //streamController.start();
 });
 
 
 // Web Sockets
-const io = require('socket.io')(server)
+const io = new Server(server);
 
-const connectedUsers = {}
+const connectedUsers = {};
 
 io.on('connection', socket => {
+  console.log('New client connected');
 
   socket.on('new-user', userId => {
-    connectedUsers[socket.id] = userId
-    socket.broadcast.emit('user-connected', userId)
+    connectedUsers[socket.id] = userId;
+    socket.broadcast.emit('user-connected', userId);
   })
 
   socket.on('disconnect', () => {
-    socket.broadcast.emit('user-disconnected', connectedUsers[socket.id])
-    delete connectedUsers[socket.id]
+    socket.broadcast.emit('user-disconnected', connectedUsers[socket.id]);
+    delete connectedUsers[socket.id];
   })
 
   ChannelSocketHandler(io, socket);

backend/services/ChatService.js

@@ -1,3 +1,4 @@
+const ChatMessage = require('../models/ChatMessage');
 
 // At the moment, this service is not used! It is only a placeholder for future development for a persistent chat.
 class ChatService {

backend/socket/ChannelSocketHandler.js

@@ -17,6 +17,7 @@ module.exports = (io, socket) => {
             ChannelService.setCurrentChannel(id);
             io.emit('channel-selected', id); // Broadcast to all clients
         } catch (err) {
+            console.error(err);
             socket.emit('error', { message: err.message });
         }
     });

frontend/src/App.tsx

@@ -42,10 +42,18 @@ function App() {
   useEffect(() => {
     socketService.connect();
 
-    socketService.subscribeToEvents({
-      'channel-added': (newChannel) => setChannels((prev) => [...prev, newChannel]),
-      'channel-selected': (selectedChannel) => setSelectedChannel(selectedChannel),
-    });
+    console.log('Subscribing to events');
+    const channelAddedListener = (channel: Channel) => {
+      setChannels((prevChannels) => [...prevChannels, channel]);
+    };
+
+    const channelSelectedListener = (channelId: number) => {
+      console.log('Channel selected:', channelId);
+      setSelectedChannel(channels.find((channel) => channel.id === channelId)!);
+    };
+
+    socketService.subscribeToEvent('channel-added', channelAddedListener);
+    socketService.subscribeToEvent('channel-selected', channelSelectedListener);
 
     const systemMessage = {
       id: Date.now(),

frontend/src/components/Chat.tsx

@@ -9,9 +9,15 @@ function Chat() {
   const [userName] = useState('You');
 
   useEffect(() => {
-    socketService.subscribeToEvents({
-      'chat-message': (message: ChatMessage) => setMessages((prev) => [...prev, message]),
-    });
+    const messageListener = (message: ChatMessage) => {
+      setMessages((prevMessages) => [...prevMessages, message]);
+    };
+
+    socketService.subscribeToEvent('chat-message', messageListener);
+
+    return () => {
+      socketService.unsubscribeFromEvent('chat-message', messageListener);
+    };
   }, []);
 
   const handleSendMessage = (e: React.FormEvent) => {

frontend/src/services/SocketService.ts

@@ -1,11 +1,16 @@
 import { io, Socket } from 'socket.io-client';
+import { Channel, ChatMessage } from '../types';
 
 class SocketService {
   private socket: Socket | null = null;
 
+  private listeners: Map<string, ((data: any) => void)[]> = new Map();
+
   // Initialize
   connect() {
-    this.socket = io("http://34.159.173.219/");
+    if (this.socket?.connected) return;
+
+    this.socket = io("http://34.159.173.219");
 
     this.socket.on('connect', () => {
       console.log('Connected to WebSocket server');
@@ -14,17 +19,43 @@ class SocketService {
     this.socket.on('disconnect', () => {
       console.log('Disconnected from WebSocket server');
     });
+
+
+    // Listen for incoming custom events
+    this.socket.onAny((event: string, data: any) => {
+      const eventListeners = this.listeners.get(event);
+      if (eventListeners) {
+        eventListeners.forEach((listener) => listener(data));
+      }
+    });
   }
 
-  // Registriert Event-Listener
-  subscribeToEvents(events) {
-    if (!this.socket) throw new Error('Socket is not connected.');
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
 
-    for (const [event, callback] of Object.entries(events)) {
-      this.socket.on(event, callback);
+  subscribeToEvent<T>(event: string, listener: (data: T) => void) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event)?.push(listener);
+  }
+
+  // Event abbestellen
+  unsubscribeFromEvent<T>(event: string, listener: (data: T) => void) {
+    const eventListeners = this.listeners.get(event);
+    if (eventListeners) {
+      this.listeners.set(
+        event,
+        eventListeners.filter((existingListener) => existingListener !== listener)
+      );
     }
   }
 
+
   // Nachricht senden
   sendMessage(userId, message, timestamp) {
     if (!this.socket) throw new Error('Socket is not connected.');

frontend/vite.config.ts

@@ -7,4 +7,7 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['lucide-react'],
   },
+  server: {
+    port: 8080, 
+  },
 })