feat: implement real-time chat with Socket.IO
Implemented WebSocket-based real-time messaging for both event rooms and private match chats using Socket.IO with comprehensive test coverage. Backend changes: - Installed socket.io@4.8.1 for WebSocket server - Created Socket.IO server with JWT authentication middleware - Implemented event room management (join/leave/messages) - Added active users tracking with real-time updates - Implemented private match room messaging - Integrated Socket.IO with Express HTTP server - Messages are persisted to PostgreSQL via Prisma - Added 12 comprehensive unit tests (89.13% coverage) Frontend changes: - Installed socket.io-client for WebSocket connections - Created socket service layer for connection management - Updated EventChatPage with real-time messaging - Updated MatchChatPage with real-time private chat - Added connection status indicators (● Connected/Disconnected) - Disabled message input when not connected Infrastructure: - Updated nginx config to proxy WebSocket connections at /socket.io - Added Upgrade and Connection headers for WebSocket support - Set long timeouts (7d) for persistent WebSocket connections Key features: - JWT-authenticated socket connections - Room-based architecture for events and matches - Real-time message broadcasting - Active users list with automatic updates - Automatic cleanup on disconnect - Message persistence in database Test coverage: - 12 tests passing (authentication, event rooms, match rooms, disconnect, errors) - Socket.IO module: 89.13% statements, 81.81% branches, 91.66% functions - Overall coverage: 81.19% Phase 1, Step 4 completed. Ready for Phase 2 (Core Features).
This commit is contained in:
Radosław Gierwiało
270
backend/src/socket/index.js
Normal file
270
backend/src/socket/index.js
Normal file
@@ -0,0 +1,270 @@
|
||||
const { Server } = require('socket.io');
|
||||
const { verifyToken } = require('../utils/auth');
|
||||
const { prisma } = require('../utils/db');
|
||||
|
||||
// Track active users in each event room
|
||||
const activeUsers = new Map(); // eventId -> Set of { socketId, userId, username, avatar }
|
||||
|
||||
function initializeSocket(httpServer) {
|
||||
const io = new Server(httpServer, {
|
||||
cors: {
|
||||
origin: process.env.CORS_ORIGIN || 'http://localhost:8080',
|
||||
credentials: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Authentication middleware for Socket.IO
|
||||
io.use(async (socket, next) => {
|
||||
try {
|
||||
const token = socket.handshake.auth.token;
|
||||
|
||||
if (!token) {
|
||||
return next(new Error('Authentication required'));
|
||||
}
|
||||
|
||||
const decoded = verifyToken(token);
|
||||
if (!decoded) {
|
||||
return next(new Error('Invalid token'));
|
||||
}
|
||||
|
||||
// Get user from database
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: decoded.userId },
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
email: true,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return next(new Error('User not found'));
|
||||
}
|
||||
|
||||
socket.user = user;
|
||||
next();
|
||||
} catch (error) {
|
||||
console.error('Socket auth error:', error);
|
||||
next(new Error('Authentication failed'));
|
||||
}
|
||||
});
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
console.log(`✅ User connected: ${socket.user.username} (${socket.id})`);
|
||||
|
||||
// Join event room
|
||||
socket.on('join_event_room', async ({ eventId }) => {
|
||||
try {
|
||||
const roomName = `event_${eventId}`;
|
||||
socket.join(roomName);
|
||||
socket.currentEventRoom = roomName;
|
||||
socket.currentEventId = eventId;
|
||||
|
||||
// Add user to active users
|
||||
if (!activeUsers.has(eventId)) {
|
||||
activeUsers.set(eventId, new Set());
|
||||
}
|
||||
|
||||
const userInfo = {
|
||||
socketId: socket.id,
|
||||
userId: socket.user.id,
|
||||
username: socket.user.username,
|
||||
avatar: socket.user.avatar,
|
||||
};
|
||||
|
||||
activeUsers.get(eventId).add(JSON.stringify(userInfo));
|
||||
|
||||
console.log(`👤 ${socket.user.username} joined event room ${eventId}`);
|
||||
|
||||
// Broadcast updated active users list
|
||||
const users = Array.from(activeUsers.get(eventId)).map(u => JSON.parse(u));
|
||||
io.to(roomName).emit('active_users', users);
|
||||
|
||||
// Notify room about new user
|
||||
socket.to(roomName).emit('user_joined', {
|
||||
userId: socket.user.id,
|
||||
username: socket.user.username,
|
||||
avatar: socket.user.avatar,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Join event room error:', error);
|
||||
socket.emit('error', { message: 'Failed to join room' });
|
||||
}
|
||||
});
|
||||
|
||||
// Leave event room
|
||||
socket.on('leave_event_room', ({ eventId }) => {
|
||||
const roomName = `event_${eventId}`;
|
||||
socket.leave(roomName);
|
||||
|
||||
// Remove from active users
|
||||
if (activeUsers.has(eventId)) {
|
||||
const users = activeUsers.get(eventId);
|
||||
const userInfo = JSON.stringify({
|
||||
socketId: socket.id,
|
||||
userId: socket.user.id,
|
||||
username: socket.user.username,
|
||||
avatar: socket.user.avatar,
|
||||
});
|
||||
users.delete(userInfo);
|
||||
|
||||
// Broadcast updated list
|
||||
const updatedUsers = Array.from(users).map(u => JSON.parse(u));
|
||||
io.to(roomName).emit('active_users', updatedUsers);
|
||||
}
|
||||
|
||||
console.log(`👤 ${socket.user.username} left event room ${eventId}`);
|
||||
});
|
||||
|
||||
// Send message to event room
|
||||
socket.on('send_event_message', async ({ eventId, content }) => {
|
||||
try {
|
||||
const roomName = `event_${eventId}`;
|
||||
|
||||
// Save message to database
|
||||
const chatRoom = await prisma.chatRoom.findFirst({
|
||||
where: {
|
||||
eventId: parseInt(eventId),
|
||||
type: 'event',
|
||||
},
|
||||
});
|
||||
|
||||
if (!chatRoom) {
|
||||
return socket.emit('error', { message: 'Chat room not found' });
|
||||
}
|
||||
|
||||
const message = await prisma.message.create({
|
||||
data: {
|
||||
roomId: chatRoom.id,
|
||||
userId: socket.user.id,
|
||||
content,
|
||||
type: 'text',
|
||||
},
|
||||
include: {
|
||||
user: {
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
avatar: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Broadcast message to room
|
||||
io.to(roomName).emit('event_message', {
|
||||
id: message.id,
|
||||
roomId: message.roomId,
|
||||
userId: message.user.id,
|
||||
username: message.user.username,
|
||||
avatar: message.user.avatar,
|
||||
content: message.content,
|
||||
type: message.type,
|
||||
createdAt: message.createdAt,
|
||||
});
|
||||
|
||||
console.log(`💬 Message in event ${eventId} from ${socket.user.username}`);
|
||||
} catch (error) {
|
||||
console.error('Send message error:', error);
|
||||
socket.emit('error', { message: 'Failed to send message' });
|
||||
}
|
||||
});
|
||||
|
||||
// Join private match room
|
||||
socket.on('join_match_room', ({ matchId }) => {
|
||||
const roomName = `match_${matchId}`;
|
||||
socket.join(roomName);
|
||||
socket.currentMatchRoom = roomName;
|
||||
console.log(`👥 ${socket.user.username} joined match room ${matchId}`);
|
||||
});
|
||||
|
||||
// Send message to match room
|
||||
socket.on('send_match_message', async ({ matchId, content }) => {
|
||||
try {
|
||||
const roomName = `match_${matchId}`;
|
||||
|
||||
// Get match and its room
|
||||
const match = await prisma.match.findUnique({
|
||||
where: { id: parseInt(matchId) },
|
||||
include: { room: true },
|
||||
});
|
||||
|
||||
if (!match || !match.room) {
|
||||
return socket.emit('error', { message: 'Match room not found' });
|
||||
}
|
||||
|
||||
// Save message
|
||||
const message = await prisma.message.create({
|
||||
data: {
|
||||
roomId: match.room.id,
|
||||
userId: socket.user.id,
|
||||
content,
|
||||
type: 'text',
|
||||
},
|
||||
include: {
|
||||
user: {
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
avatar: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Broadcast to match room
|
||||
io.to(roomName).emit('match_message', {
|
||||
id: message.id,
|
||||
roomId: message.roomId,
|
||||
userId: message.user.id,
|
||||
username: message.user.username,
|
||||
avatar: message.user.avatar,
|
||||
content: message.content,
|
||||
type: message.type,
|
||||
createdAt: message.createdAt,
|
||||
});
|
||||
|
||||
console.log(`💬 Private message in match ${matchId} from ${socket.user.username}`);
|
||||
} catch (error) {
|
||||
console.error('Send match message error:', error);
|
||||
socket.emit('error', { message: 'Failed to send message' });
|
||||
}
|
||||
});
|
||||
|
||||
// Handle disconnection
|
||||
socket.on('disconnect', () => {
|
||||
console.log(`❌ User disconnected: ${socket.user.username} (${socket.id})`);
|
||||
|
||||
// Remove from active users in all event rooms
|
||||
if (socket.currentEventId) {
|
||||
const eventId = socket.currentEventId;
|
||||
if (activeUsers.has(eventId)) {
|
||||
const users = activeUsers.get(eventId);
|
||||
const userInfo = JSON.stringify({
|
||||
socketId: socket.id,
|
||||
userId: socket.user.id,
|
||||
username: socket.user.username,
|
||||
avatar: socket.user.avatar,
|
||||
});
|
||||
users.delete(userInfo);
|
||||
|
||||
// Broadcast updated list
|
||||
const updatedUsers = Array.from(users).map(u => JSON.parse(u));
|
||||
io.to(socket.currentEventRoom).emit('active_users', updatedUsers);
|
||||
|
||||
// Notify about user leaving
|
||||
socket.to(socket.currentEventRoom).emit('user_left', {
|
||||
userId: socket.user.id,
|
||||
username: socket.user.username,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log('🔌 Socket.IO initialized');
|
||||
return io;
|
||||
}
|
||||
|
||||
module.exports = { initializeSocket };
|
||||
Reference in New Issue
Block a user