105 lines
3.8 KiB
JavaScript
105 lines
3.8 KiB
JavaScript
const express = require('express');
|
|
const path = require('path');
|
|
const http = require('http');
|
|
const { WebSocketServer } = require('ws');
|
|
const { v4: uuidv4 } = require('uuid');
|
|
|
|
const app = express();
|
|
const port = process.env.PORT || 3001;
|
|
const subfolder = '/ag-beats';
|
|
const distPath = path.join(__dirname, 'dist');
|
|
|
|
// --- Helper function for random colors ---
|
|
const COLORS = ['#F94144', '#F3722C', '#F8961E', '#F9C74F', '#90BE6D', '#43AA8B', '#4D908E', '#577590', '#277DA1'];
|
|
const getRandomColor = () => COLORS[Math.floor(Math.random() * COLORS.length)];
|
|
|
|
// --- HTTP and Static Server Setup ---
|
|
app.use(subfolder, express.static(distPath));
|
|
app.get(subfolder + '/*', (req, res) => {
|
|
res.sendFile(path.join(distPath, 'index.html'));
|
|
});
|
|
app.get('/', (req, res) => {
|
|
res.redirect(subfolder);
|
|
});
|
|
|
|
const httpServer = http.createServer(app);
|
|
|
|
// --- WebSocket Server ---
|
|
const wss = new WebSocketServer({ path: '/ag-beats', server: httpServer });
|
|
const sessions = new Map();
|
|
|
|
wss.on('connection', (ws, req) => {
|
|
const url = new URL(req.url, `http://${req.headers.host}`);
|
|
const sessionId = url.searchParams.get('sessionId');
|
|
const clientId = uuidv4();
|
|
const clientColor = getRandomColor();
|
|
|
|
if (!sessionId) {
|
|
return ws.close(1008, 'Session ID required');
|
|
}
|
|
|
|
if (!sessions.has(sessionId)) {
|
|
sessions.set(sessionId, { clients: new Map(), state: {} });
|
|
}
|
|
const session = sessions.get(sessionId);
|
|
session.clients.set(clientId, { ws, color: clientColor });
|
|
|
|
console.log(`Client ${clientId} connected to session ${sessionId}`);
|
|
|
|
// Welcome message with client's own ID and the session's current state
|
|
ws.send(JSON.stringify({
|
|
type: 'welcome',
|
|
payload: {
|
|
clientId,
|
|
state: session.state
|
|
}
|
|
}));
|
|
|
|
// Inform all clients about the current users
|
|
const userList = Array.from(session.clients.entries()).map(([id, { color }]) => ({ id, color }));
|
|
const userUpdateMessage = JSON.stringify({ type: 'user-update', payload: { users: userList } });
|
|
session.clients.forEach(({ ws: clientWs }) => clientWs.send(userUpdateMessage));
|
|
|
|
|
|
ws.on('message', (messageBuffer) => {
|
|
const message = messageBuffer.toString();
|
|
const parsedMessage = JSON.parse(message);
|
|
|
|
// Add sender's ID to the message for client-side identification
|
|
const messageToSend = JSON.stringify({ ...parsedMessage, senderId: clientId });
|
|
|
|
// Persist state on the server, excluding cursor movements
|
|
if (parsedMessage.type !== 'cursor-move') {
|
|
session.state = { ...session.state, ...parsedMessage.payload };
|
|
}
|
|
|
|
// Broadcast to all clients in the session, including the sender
|
|
session.clients.forEach(({ ws: clientWs }) => {
|
|
if (clientWs.readyState === clientWs.OPEN) {
|
|
clientWs.send(messageToSend);
|
|
}
|
|
});
|
|
});
|
|
|
|
ws.on('close', () => {
|
|
console.log(`Client ${clientId} disconnected from session ${sessionId}`);
|
|
session.clients.delete(clientId);
|
|
|
|
if (session.clients.size === 0) {
|
|
sessions.delete(sessionId);
|
|
console.log(`Session ${sessionId} closed.`);
|
|
} else {
|
|
// Inform remaining clients that a user has left
|
|
const userList = Array.from(session.clients.keys()).map(id => ({ id, color: session.clients.get(id).color }));
|
|
const userUpdateMessage = JSON.stringify({ type: 'user-update', payload: { users: userList } });
|
|
session.clients.forEach(({ ws: clientWs }) => clientWs.send(userUpdateMessage));
|
|
}
|
|
});
|
|
|
|
ws.on('error', (error) => console.error(`WebSocket error for client ${clientId}:`, error));
|
|
});
|
|
|
|
httpServer.listen(port, '0.0.0.0', () => {
|
|
console.log(`AG Beats development server started on port ${port} with HTTP.`);
|
|
});
|