Add Socket.IO integration for real-time updates in diary features

This commit introduces Socket.IO to the backend and frontend, enabling real-time communication for diary-related events. Key updates include the addition of socket event emissions for diary date updates, tag additions/removals, and activity member changes in the backend controllers. The frontend DiaryView component has been enhanced to connect to the socket server and handle incoming events, ensuring that users receive immediate feedback on changes. Additionally, new dependencies for Socket.IO have been added to both the backend and frontend package files, improving the overall interactivity and responsiveness of the application.

backend/services/socketService.js

@@ -0,0 +1,106 @@
+import { Server } from 'socket.io';
+
+let io = null;
+
+export const initializeSocketIO = (httpServer) => {
+  io = new Server(httpServer, {
+    cors: {
+      origin: true,
+      credentials: true,
+      methods: ['GET', 'POST']
+    }
+  });
+
+  io.on('connection', (socket) => {
+    console.log('🔌 Socket verbunden:', socket.id);
+
+    // Client tritt einem Club-Raum bei
+    socket.on('join-club', (clubId) => {
+      const room = `club-${clubId}`;
+      socket.join(room);
+      console.log(`👤 Socket ${socket.id} ist Club ${clubId} beigetreten`);
+    });
+
+    // Client verlässt einen Club-Raum
+    socket.on('leave-club', (clubId) => {
+      const room = `club-${clubId}`;
+      socket.leave(room);
+      console.log(`👤 Socket ${socket.id} hat Club ${clubId} verlassen`);
+    });
+
+    socket.on('disconnect', () => {
+      console.log('🔌 Socket getrennt:', socket.id);
+    });
+  });
+
+  return io;
+};
+
+export const getIO = () => {
+  if (!io) {
+    throw new Error('Socket.IO wurde noch nicht initialisiert. Rufe zuerst initializeSocketIO() auf.');
+  }
+  return io;
+};
+
+// Helper-Funktionen zum Emittieren von Events
+export const emitToClub = (clubId, event, data) => {
+  if (!io) {
+    console.warn('⚠️ [Socket] emitToClub: io nicht initialisiert');
+    return;
+  }
+  const room = `club-${clubId}`;
+  console.log(`📡 [Socket] Emit ${event} an Raum ${room}:`, data);
+  io.to(room).emit(event, data);
+};
+
+// Events für Diary-Änderungen
+export const emitParticipantAdded = (clubId, dateId, participant) => {
+  emitToClub(clubId, 'participant:added', { dateId, participant });
+};
+
+export const emitParticipantRemoved = (clubId, dateId, participantId) => {
+  emitToClub(clubId, 'participant:removed', { dateId, participantId });
+};
+
+export const emitParticipantUpdated = (clubId, dateId, participant) => {
+  emitToClub(clubId, 'participant:updated', { dateId, participant });
+};
+
+export const emitDiaryNoteAdded = (clubId, dateId, note) => {
+  emitToClub(clubId, 'diary:note:added', { dateId, note });
+};
+
+export const emitDiaryNoteUpdated = (clubId, dateId, note) => {
+  emitToClub(clubId, 'diary:note:updated', { dateId, note });
+};
+
+export const emitDiaryNoteDeleted = (clubId, dateId, noteId) => {
+  emitToClub(clubId, 'diary:note:deleted', { dateId, noteId });
+};
+
+export const emitDiaryTagAdded = (clubId, dateId, tag) => {
+  emitToClub(clubId, 'diary:tag:added', { dateId, tag });
+};
+
+export const emitDiaryTagRemoved = (clubId, dateId, tagId) => {
+  emitToClub(clubId, 'diary:tag:removed', { dateId, tagId });
+};
+
+export const emitDiaryDateUpdated = (clubId, dateId, updates) => {
+  emitToClub(clubId, 'diary:date:updated', { dateId, updates });
+};
+
+export const emitActivityMemberAdded = (clubId, activityId, participantId, dateId) => {
+  emitToClub(clubId, 'activity:member:added', { activityId, participantId, dateId });
+};
+
+export const emitActivityMemberRemoved = (clubId, activityId, participantId, dateId) => {
+  emitToClub(clubId, 'activity:member:removed', { activityId, participantId, dateId });
+};
+
+// Event für Aktivitäts-Änderungen (erstellen, aktualisieren, löschen, Reihenfolge ändern)
+export const emitActivityChanged = (clubId, dateId) => {
+  emitToClub(clubId, 'activity:changed', { dateId });
+};
+