Чат на React, Node.js и TailwindCSS: Протоколы и сервер

io.on('connection', (socket) => {
  // socket - это конкретное подключение
  console.log('Пользователь подключился:', socket.id);
  
  // Подписываемся на события от этого клиента
  socket.on('message', (data) => {
    // Обрабатываем входящее сообщение
    io.emit('message', data); // Транслируем всем
  });
  
  socket.on('disconnect', () => {
    console.log('Пользователь отключился:', socket.id);
  });
});

const socket = io('http://localhost:3000');
 
socket.on('connect', () => {
  console.log('Подключились с ID:', socket.id);
});
 
socket.on('message', (data) => {
  // Получили сообщение от сервера
  updateUI(data);
});
 
socket.emit('message', { text: 'Привет!' });

const [connectionStatus, setConnectionStatus] = useState('connecting');
 
useEffect(() => {
  socket.on('connect', () => setConnectionStatus('connected'));
  socket.on('disconnect', () => setConnectionStatus('disconnected'));
  socket.on('reconnecting', () => setConnectionStatus('reconnecting'));
  
  return () => {
    socket.off('connect');
    socket.off('disconnect');
    socket.off('reconnecting');
  };
}, []);

io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (validateToken(token)) {
    next(); // Пускаем дальше
  } else {
    next(new Error('Неверный токен')); // Отклоняем
  }
});

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
 
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: process.env.CLIENT_URL || 'http://localhost:5173',
    methods: ['GET', 'POST']
  }
});
 
// Массив для хранения сообщений в памяти
const messages = [];
 
io.on('connection', (socket) => {
  console.log(`Подключение: ${socket.id}`);
  
  // Отправляем историю новому клиенту
  socket.emit('history', messages);
  
  socket.on('message', (msg) => {
    const message = {
      id: Date.now(),
      text: msg.text,
      author: msg.author,
      timestamp: new Date().toISOString()
    };
    
    messages.push(message);
    io.emit('message', message); // Всем включая отправителя
  });
  
  socket.on('disconnect', () => {
    console.log(`Отключение: ${socket.id}`);
  });
});
 
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Сервер запущен на порту ${PORT}`);
});

const MAX_MESSAGES = 1000;
const MAX_AGE_MS = 24 * 60 * 60 * 1000; // 24 часа
 
function addMessage(msg) {
  messages.push(msg);
  
  // Удаляем старые по количеству
  if (messages.length > MAX_MESSAGES) {
    messages.shift();
  }
  
  // Удаляем старые по времени
  const cutoff = Date.now() - MAX_AGE_MS;
  while (messages.length > 0 && messages[0].timestamp < cutoff) {
    messages.shift();
  }
}

/server
  index.js          # Точка входа
  handlers/
    messageHandler.js
    roomHandler.js
  middleware/
    auth.js
    validator.js
  utils/
    logger.js

process.on('SIGTERM', () => {
  console.log('SIGTERM получен, закрываем соединения...');
  
  io.close(() => {
    console.log('Socket.io закрыт');
    server.close(() => {
      console.log('HTTP сервер закрыт');
      process.exit(0);
    });
  });
  
  // Принудительно завершаем через 10 секунд
  setTimeout(() => {
    console.error('Таймаут, принудительное завершение');
    process.exit(1);
  }, 10000);
});

const app = express();
const io = require('socket.io')(app); // Не работает!

const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server);

app.use(express.json()); // Парсинг JSON в body
app.use(express.urlencoded({ extended: true })); // Парсинг form data
 
// Логирование запросов
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
});

app.get('/health', (req, res) => {
  res.json({ 
    status: 'ok', 
    timestamp: Date.now(),
    connections: io.engine.clientsCount 
  });
});

app.get('/api/messages', (req, res) => {
  const limit = parseInt(req.query.limit) || 50;
  res.json(messages.slice(-limit));
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Что-то сломалось' });
});

// server/package.json
"socket.io": "^4.7.0"
 
// client/package.json  
"socket.io-client": "^4.7.0"

location /socket.io/ {
    proxy_pass [url]http://localhost:3000;[/url]
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

const io = new Server(server, {
  path: '/api/socket.io/'
});

const socket = io('http://localhost:3000', {
  path: '/api/socket.io/'
});

const io = new Server(server, {
  cors: {
    origin: 'http://localhost:5173',
    credentials: true
  }
});

const socket = io('http://localhost:3000', {
  withCredentials: true
});

const socket = io('http://localhost:3000', {
  reconnectionDelay: 1000,      // Начальная задержка 1 секунда
  reconnectionDelayMax: 5000,   // Максимум 5 секунд
  reconnectionAttempts: Infinity // Бесконечные попытки
});

useEffect(() => {
  socket.on('message', handleMessage);
  
  return () => {
    socket.off('message', handleMessage);
  };
}, []);

io.on('connection', (socket) => {
  // Пользователь присоединяется к комнате
  socket.on('join-room', (roomId) => {
    socket.join(roomId);
    console.log(`Сокет ${socket.id} вошел в комнату ${roomId}`);
    
    // Уведомляем всех в комнате
    socket.to(roomId).emit('user-joined', {
      userId: socket.id,
      roomId: roomId
    });
  });
 
  // Отправка сообщения в конкретную комнату
  socket.on('room-message', (data) => {
    io.to(data.roomId).emit('message', {
      text: data.text,
      author: socket.id,
      room: data.roomId
    });
  });
 
  // Выход из комнаты
  socket.on('leave-room', (roomId) => {
    socket.leave(roomId);
    socket.to(roomId).emit('user-left', {
      userId: socket.id
    });
  });
});

socket.join('general');
socket.join('random');
socket.join('tech-talk');

const roomMembers = new Map(); // roomId -> Set of socket.id
 
socket.on('join-room', (roomId) => {
  socket.join(roomId);
  
  if (!roomMembers.has(roomId)) {
    roomMembers.set(roomId, new Set());
  }
  roomMembers.get(roomId).add(socket.id);
});
 
socket.on('disconnect', () => {
  // Удаляем из всех комнат в нашем мап
  for (const [roomId, members] of roomMembers) {
    if (members.has(socket.id)) {
      members.delete(socket.id);
      io.to(roomId).emit('user-left', { userId: socket.id, roomId });
    }
  }
});

// Публичный чат
const publicChat = io.of('/public');
publicChat.on('connection', (socket) => {
  console.log('Подключение к публичному чату');
});
 
// Приватный чат с аутентификацией
const privateChat = io.of('/private');
privateChat.use((socket, next) => {
  if (socket.handshake.auth.token) {
    next();
  } else {
    next(new Error('Требуется авторизация'));
  }
});
 
privateChat.on('connection', (socket) => {
  console.log('Подключение к приватному чату');
});

const publicSocket = io('http://localhost:3000/public');
const privateSocket = io('http://localhost:3000/private', {
  auth: { token: userToken }
});

const pendingMessages = new Map(); // socket.id -> массив сообщений
 
io.on('connection', (socket) => {
  // Отправляем накопленные сообщения при переподключении
  if (pendingMessages.has(socket.id)) {
    const messages = pendingMessages.get(socket.id);
    messages.forEach(msg => socket.emit('message', msg));
    pendingMessages.delete(socket.id);
  }
 
  socket.on('disconnect', () => {
    // Инициализируем очередь для этого клиента
    if (!pendingMessages.has(socket.id)) {
      pendingMessages.set(socket.id, []);
    }
  });
});
 
// При отправке сообщения проверяем подключение
function sendToUser(socketId, message) {
  const socket = io.sockets.sockets.get(socketId);
  
  if (socket && socket.connected) {
    socket.emit('message', message);
  } else {
    // Добавляем в очередь
    if (!pendingMessages.has(socketId)) {
      pendingMessages.set(socketId, []);
    }
    pendingMessages.get(socketId).push(message);
  }
}

const userSockets = new Map(); // userId -> socket.id
const pendingMessages = new Map(); // userId -> массив сообщений
 
io.use((socket, next) => {
  const userId = socket.handshake.auth.userId;
  if (userId) {
    socket.userId = userId;
    userSockets.set(userId, socket.id);
    next();
  } else {
    next(new Error('userId обязателен'));
  }
});
 
io.on('connection', (socket) => {
  // Отправляем накопленные сообщения пользователю
  if (pendingMessages.has(socket.userId)) {
    const messages = pendingMessages.get(socket.userId);
    messages.forEach(msg => socket.emit('message', msg));
    pendingMessages.delete(socket.userId);
  }
 
  socket.on('disconnect', () => {
    // Удаляем маппинг через некоторое время
    setTimeout(() => {
      if (userSockets.get(socket.userId) === socket.id) {
        userSockets.delete(socket.userId);
      }
    }, 30000); // 30 секунд на переподключение
  });
});
 
function sendToUser(userId, message) {
  const socketId = userSockets.get(userId);
  const socket = socketId ? io.sockets.sockets.get(socketId) : null;
  
  if (socket && socket.connected) {
    socket.emit('message', message);
  } else {
    if (!pendingMessages.has(userId)) {
      pendingMessages.set(userId, []);
    }
    pendingMessages.get(userId).push(message);
  }
}

const MAX_PENDING = 100;
const MESSAGE_TTL = 5 * 60 * 1000; // 5 минут
 
function addPendingMessage(userId, message) {
  if (!pendingMessages.has(userId)) {
    pendingMessages.set(userId, []);
  }
  
  const queue = pendingMessages.get(userId);
  
  // Добавляем временную метку
  const queuedMessage = {
    ...message,
    queuedAt: Date.now()
  };
  
  queue.push(queuedMessage);
  
  // Обрезаем старые
  while (queue.length > MAX_PENDING) {
    queue.shift();
  }
  
  // Удаляем протухшие
  const cutoff = Date.now() - MESSAGE_TTL;
  while (queue.length > 0 && queue[0].queuedAt < cutoff) {
    queue.shift();
  }
}

const processedMessages = new Set();
const PROCESSED_TTL = 60000; // Храним ID минуту
 
socket.on('message', (data) => {
  const messageId = data.id || `${socket.id}-${Date.now()}`;
  
  if (processedMessages.has(messageId)) {
    // Уже обработали, игнорируем
    return;
  }
  
  processedMessages.add(messageId);
  
  // Обрабатываем сообщение
  handleMessage(data);
  
  // Подтверждаем получение
  socket.emit('message-ack', { id: messageId });
  
  // Удаляем ID через минуту
  setTimeout(() => {
    processedMessages.delete(messageId);
  }, PROCESSED_TTL);
});

if (queue.length >= MAX_PENDING) {
  socket.emit('queue-overflow', {
    message: 'Сервер перегружен, некоторые сообщения могут быть потеряны'
  });
  return false;
}

const messages = [];
 
function addMessage(text, author) {
  const message = {
    id: Date.now() + Math.random(), // Простой уникальный ID
    text,
    author,
    timestamp: new Date().toISOString()
  };
  
  messages.push(message);
  return message;
}
 
function getRecentMessages(limit = 50) {
  return messages.slice(-limit);
}

const MAX_MESSAGES = 1000;
 
function addMessage(text, author) {
  const message = {
    id: Date.now() + Math.random(),
    text,
    author, 
    timestamp: new Date().toISOString()
  };
  
  messages.push(message);
  
  // Держим только последнюю тысячу
  if (messages.length > MAX_MESSAGES) {
    messages.splice(0, messages.length - MAX_MESSAGES);
  }
  
  return message;
}

const messages = [];
const messagesById = new Map();
 
function addMessage(text, author) {
  const message = {
    id: Date.now() + Math.random(),
    text,
    author,
    timestamp: new Date().toISOString()
  };
  
  messages.push(message);
  messagesById.set(message.id, message);
  
  // Ротация с очисткой обеих структур
  if (messages.length > MAX_MESSAGES) {
    const removed = messages.shift();
    messagesById.delete(removed.id);
  }
  
  return message;
}
 
function getMessageById(id) {
  return messagesById.get(id); // O(1) вместо O(n)
}

const fs = require('fs').promises;
const BACKUP_FILE = './messages-backup.json';
const BACKUP_INTERVAL = 60000; // Минута
 
async function saveBackup() {
  try {
    await fs.writeFile(BACKUP_FILE, JSON.stringify(messages));
    console.log(`Сохранено ${messages.length} сообщений`);
  } catch (err) {
    console.error('Ошибка сохранения:', err);
  }
}
 
async function loadBackup() {
  try {
    const data = await fs.readFile(BACKUP_FILE, 'utf8');
    const loaded = JSON.parse(data);
    messages.push(...loaded);
    console.log(`Загружено ${loaded.length} сообщений`);
  } catch (err) {
    console.log('Бэкап не найден, начинаем с чистого листа');
  }
}
 
// При старте
loadBackup();
 
// Периодическое сохранение
setInterval(saveBackup, BACKUP_INTERVAL);
 
// При завершении
process.on('SIGTERM', async () => {
  await saveBackup();
  process.exit(0);
});

const cluster = require('cluster');
const os = require('os');
 
if (cluster.isMaster) {
  const numWorkers = os.cpus().length;
  
  console.log(`Запуск ${numWorkers} рабочих процессов`);
  
  for (let i = 0; i < numWorkers; i++) {
    cluster.fork();
  }
  
  cluster.on('exit', (worker, code, signal) => {
    console.log(`Процесс ${worker.process.pid} умер, перезапускаем`);
    cluster.fork();
  });
} else {
  // Обычный код сервера
  const server = require('./server');
  server.listen(3000);
}

const { createAdapter } = require('@socket.io/redis-adapter');
const { createClient } = require('redis');
 
const pubClient = createClient({ url: 'redis://localhost:6379' });
const subClient = pubClient.duplicate();
 
Promise.all([pubClient.connect(), subClient.connect()]).then(() => {
  io.adapter(createAdapter(pubClient, subClient));
  console.log('Redis адаптер подключен');
});

pm2 start server.js -i max  # max = количество CPU ядер
pm2 reload server           # Плавная перезагрузка без разрыва соединений
pm2 logs                    # Агрегированные логи всех процессов

upstream socket_nodes {
  ip_hash;  # Sticky sessions на основе IP
  server node1.example.com:3000;
  server node2.example.com:3000;
  server node3.example.com:3000;
}
 
server {
  location / {
    proxy_pass [url]http://socket_nodes;[/url]
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

const prometheusClient = require('prom-client');
 
const connectionsGauge = new prometheusClient.Gauge({
  name: 'websocket_connections_total',
  help: 'Total number of WebSocket connections'
});
 
io.on('connection', (socket) => {
  connectionsGauge.inc();
  socket.on('disconnect', () => connectionsGauge.dec());
});