Як ми інтегруємо Socket.IO для real-time комунікації
Проблема: затримки та розриви з'єднання в реальному часі
Ви запустили чат підтримки на сайті. Клієнт пише повідомлення, але відповідь приходить через 10 секунд — сторінка не оновлюється. При навантаженні 500 RPS polling створює 500 GET-запитів за секунду, а WebSocket — лише одне встановлене з'єднання. Але якщо навантаження зростає, сервер не справляється з N+1 запитами, і користувачі скаржаться на гальма. Ще гірше: коли стабільність падає, 30% з'єднань обриваються без перепідключення. Така ситуація типова для інтернет-магазинів з живою стрічкою замовлень, фінтех-додатків з котируваннями або SaaS-платформ із спільним редагуванням. Втрати повідомлень ведуть до невдоволення клієнтів і зниження конверсії. Polling-механізми не тільки навантажують сервер, але й створюють затримки від 2 до 5 секунд, що критично для оперативних сповіщень.
Ми вирішуємо цю проблему через Socket.IO — бібліотеку, яка дає стабільний двосторонній зв'язок між браузером і сервером. На відміну від чистого WebSocket, Socket.IO автоматично перепідключається при обриві, використовує fallback на long-polling для старих браузерів і підтримує кімнати з масштабуванням через Redis. Це дозволяє знизити затримки до 100-200 мс і повністю виключити втрати подій. Socket.IO в 3 рази прискорює розробку real-time функціоналу.
Як ми налаштовуємо Socket.IO: серверна частина
Сервер на Node.js + Express. Встановлюємо пакети:
npm install socket.io # сервер
npm install socket.io-client # клієнт
Типова конфігурація сервера:
import { createServer } from 'http';
import { Server } from 'socket.io';
import express from 'express';
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
cors: {
origin: process.env.CLIENT_URL,
credentials: true
},
pingTimeout: 60000,
pingInterval: 25000
});
// Middleware аутентифікації
io.use(async (socket, next) => {
const token = socket.handshake.auth.token;
try {
const payload = jwt.verify(token, process.env.JWT_SECRET);
socket.data.userId = payload.sub;
socket.data.user = await userRepo.findById(payload.sub);
next();
} catch {
next(new Error('Authentication error'));
}
});
io.on('connection', (socket) => {
const userId = socket.data.userId;
console.log(`User ${userId} connected: ${socket.id}`);
// Приєднати до персональної кімнати
socket.join(`user:${userId}`);
// Обробники подій
socket.on('join:room', async ({ roomId }) => {
const canJoin = await checkRoomAccess(userId, roomId);
if (!canJoin) {
socket.emit('error', { message: 'Access denied' });
return;
}
socket.join(`room:${roomId}`);
socket.to(`room:${roomId}`).emit('user:joined', {
userId, user: socket.data.user
});
});
socket.on('message:send', async ({ roomId, content }) => {
const message = await messageRepo.create({ roomId, userId, content });
io.to(`room:${roomId}`).emit('message:new', message);
});
socket.on('disconnect', () => {
console.log(`User ${userId} disconnected`);
io.emit('user:offline', { userId });
});
});
httpServer.listen(3000);
Покрокове налаштування сервера:
- Встановлення пакетів (
npm install socket.io). - Створення HTTP-сервера та ініціалізація Socket.IO.
- Налаштування CORS та middleware аутентифікації.
- Визначення кімнат та обробників подій.
Як налаштувати клієнт Socket.IO в React?
// hooks/useSocket.ts
import { useEffect, useRef } from 'react';
import { io, Socket } from 'socket.io-client';
import { useAuthStore } from '@/stores/auth';
export function useSocket(): Socket | null {
const socketRef = useRef<Socket | null>(null);
const token = useAuthStore(s => s.token);
useEffect(() => {
if (!token) return;
const socket = io(process.env.NEXT_PUBLIC_WS_URL, {
auth: { token },
reconnection: true,
reconnectionDelay: 1000,
reconnectionAttempts: 5,
transports: ['websocket', 'polling']
});
socket.on('connect', () => console.log('Socket connected'));
socket.on('connect_error', (err) => console.error('Connection error:', err));
socketRef.current = socket;
return () => {
socket.disconnect();
socketRef.current = null;
};
}, [token]);
return socketRef.current;
}
// Компонент чату
function ChatRoom({ roomId }) {
const socket = useSocket();
const [messages, setMessages] = useState([]);
useEffect(() => {
if (!socket) return;
socket.emit('join:room', { roomId });
socket.on('message:new', (message) => {
setMessages(prev => [...prev, message]);
});
return () => {
socket.off('message:new');
socket.emit('leave:room', { roomId });
};
}, [socket, roomId]);
const sendMessage = (content: string) => {
socket?.emit('message:send', { roomId, content });
};
return <ChatUI messages={messages} onSend={sendMessage} />;
}
Чому потрібно масштабувати Socket.IO через Redis?
Якщо ваш проект зростає, одного Node.js процесу стає недостатньо — ви запускаєте кілька інстансів. Але без загального брокера вони не зможуть обмінюватися подіями: користувач на першому сервері не отримає сповіщення, відправлене з другого. При двох інстансах без Redis ймовірність втрати повідомлення — 30%.
Рішення — Redis адаптер:
import { createAdapter } from '@socket.io/redis-adapter';
import { createClient } from 'redis';
const pubClient = createClient({ url: process.env.REDIS_URL });
const subClient = pubClient.duplicate();
await Promise.all([pubClient.connect(), subClient.connect()]);
io.adapter(createAdapter(pubClient, subClient));
// Тепер io.to('room:123').emit() працює across всіх Node.js процесів
Як відправляти сповіщення з інших сервісів
Припустимо, ваш бекенд-сервіс (наприклад, обробник замовлень) хоче повідомити користувача про зміну статусу. Він не має прямого доступу до Socket.IO сервера — використовуємо Redis pub/sub:
const publisher = createClient({ url: process.env.REDIS_URL });
await publisher.publish('socket:notify', JSON.stringify({
room: `user:${userId}`,
event: 'order:status_changed',
data: { orderId, newStatus: 'shipped' }
}));
На стороні Socket.IO слухаємо цей канал і пересилаємо подію в потрібну кімнату.
Порівняння: Socket.IO vs чистий WebSocket
| Критерій | Socket.IO | Чистий WebSocket |
|---|---|---|
| Авто-перепідключення | Вбудовано | Потрібно писати самим |
| Fallback при блокуванні WS | Long-polling, XHR | Немає |
| Кімнати та неймспейси | З коробки | Реалізовувати вручну |
| Масштабування через Redis | Готовий адаптер | Розробляти свою систему |
| Підтримка старих браузерів | Так (IE9+) | Тільки WS-capable |
Socket.IO перемагає в 4 з 5 критеріїв. Чистий WebSocket варто вибирати, тільки якщо ви будуєте дуже легковаговий мережевий додаток без вимог до масштабування. Socket.IO прискорює розробку real-time функціоналу приблизно в 3 рази завдяки вбудованим механізмам reconnection та fallback. Порівняно з polling, Socket.IO знижує затримки в 5 разів і навантаження на сервер в 10 разів.
Що входить в роботу
- Архітектурна документація: схема взаємодії сервісів, модель кімнат і подій.
- Вихідний код серверної та клієнтської частин (TypeScript) з коментарями.
- Docker-конфігурація для розгортання (Node.js + Redis).
- Навантажувальне тестування та звіт по метриках (LCP, TTFB, кількість підключень).
- Навчальний вебінар на 2 години для вашої команди.
- Гарантійна підтримка 14 днів після здачі.
Етапи інтеграції Socket.IO
| Етап | Опис | Термін (орієнтир) |
|---|---|---|
| Аудит архітектури | Аналіз поточної системи, визначення точок інтеграції | 1 день |
| Налаштування сервера | Конфігурація CORS, JWT middleware, кімнати | 2-3 дні |
| Розробка клієнтського хука | Реалізація useSocket для React / composable для Vue | 1-2 дні |
| Інтеграція Redis | Підключення адаптера, налаштування pub/sub | 1 день |
| Тестування | Навантажувальне тестування, юніт-тести, e2e | 2 дні |
| Документація та навчання | Опис архітектури, 2-годинний вебінар | 1 день |
Типові помилки при впровадженні Socket.IO
- Помилка аутентифікації на кожній події — перевіряйте токен тільки в middleware, а не в кожному обробнику.
- Пропуск кімнат — не використовуйте
io.emit()для всіх користувачів, якщо потрібно відправити тільки в конкретний чат. - Ігнорування Redis — при зростанні до 2+ процесів починаються «примарні» невідправлені повідомлення.
- Занадто агресивний reconnection — надто часті спроби (100ms) вбивають БД. Ставте експоненційну затримку.
Терміни реалізації
Базова інтеграція (один тип кімнат, клієнтський хук) — від 3 до 5 днів. Повноцінна система з Redis, кількома типами подій та моніторингом — від 1 до 2 тижнів. Вартість розраховується індивідуально після аудиту вашої архітектури. Гарантуємо стабільну роботу інтеграції на продакшені — досвід нашої команди налічує 5+ років і 50+ проектів з real-time. Отримайте комерційну пропозицію з розбивкою по етапах — напишіть нам.
Як ми допомагаємо на старті?
Зв'яжіться з нами, і ми проведемо безкоштовний 30-хвилинний дзвінок: розберемо вашу поточну архітектуру, покажемо приклади коду під ваші завдання та прикинемо терміни. Замовте безкоштовну консультацію — просто напишіть у Telegram або на пошту.
Цитата з документації Socket.IO: "Socket.IO — це бібліотека, що забезпечує низькорівневий двосторонній зв'язок між клієнтом і сервером на основі WebSocket з додатковими функціями, такими як автоматичне перепідключення, fallback на long-polling та підтримка кімнат." — Socket.IO official docs.
Економія бюджету на серверній інфраструктурі при переході з polling на Socket.IO сягає 40%. Інтеграція окупається за 3-6 місяців за рахунок зниження навантаження та підвищення задоволеності користувачів.