diff --git a/backend/server.js b/backend/server.js index 5e24da4..6366cbe 100644 --- a/backend/server.js +++ b/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); diff --git a/backend/services/ChatService.js b/backend/services/ChatService.js index ef0065d..06076b9 100644 --- a/backend/services/ChatService.js +++ b/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 { diff --git a/backend/socket/ChannelSocketHandler.js b/backend/socket/ChannelSocketHandler.js index 61f6e06..38a66fb 100644 --- a/backend/socket/ChannelSocketHandler.js +++ b/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 }); } }); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index da26cd5..d73d652 100644 --- a/frontend/src/App.tsx +++ b/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(), diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx index c0d9af8..fcae5fe 100644 --- a/frontend/src/components/Chat.tsx +++ b/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) => { diff --git a/frontend/src/services/SocketService.ts b/frontend/src/services/SocketService.ts index c7362a9..d20167b 100644 --- a/frontend/src/services/SocketService.ts +++ b/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 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.'); - - for (const [event, callback] of Object.entries(events)) { - this.socket.on(event, callback); + disconnect() { + if (this.socket) { + this.socket.disconnect(); + this.socket = null; } } + subscribeToEvent(event: string, listener: (data: T) => void) { + if (!this.listeners.has(event)) { + this.listeners.set(event, []); + } + this.listeners.get(event)?.push(listener); + } + + // Event abbestellen + unsubscribeFromEvent(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.'); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 70ecc15..5e5d7b5 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -7,4 +7,7 @@ export default defineConfig({ optimizeDeps: { exclude: ['lucide-react'], }, + server: { + port: 8080, + }, })