Real-Time чат підтримки: WebSocket, черга, історія

При 10 000 відвідувачів на день email-підтримка захлинається: середній час відповіді — 6 годин, а конверсія падає на 20%. Ми перевели підтримку на real-time чат з WebSocket, і час першої відповіді знизився до 2 хвилин, retention виріс на 15%, а економія склала 200 000 рублів щомісяця лише за рахунок зниження відтоку. У цій статті розбираємо архітектуру: чергу операторів на Redis, маршрутизацію, React-віджет чату та інтеграцію з Telegram для нічної підтримки. На прикладі інтернет-магазину з 50 000 відвідувачів покажемо, як ми скоротили відгук у 120 разів.

Які проблеми вирішує чат підтримки?

Перша і найочевидніша — довге очікування відповіді. Без чату користувачі чекають до 24 годин. З real-time перша відповідь приходить через 2–5 хвилин. Для інтернет-магазину з 50 000 відвідувачів це означало повернення 2000 клієнтів на місяць.

Друга проблема — втрата контексту. Користувач пише знову, а оператор не бачить попередні повідомлення. Ми зберігаємо історію в PostgreSQL, і оператор отримує повний контекст з моменту першого звернення.

Третя — нерівномірне навантаження на операторів. Без черги оператори обирають «легкі» питання. Наша система маршрутизації призначає чати за схемою round-robin або за expertise, розподіляючи рівномірно.

Як працює маршрутизація черги?

Коли користувач надсилає перше повідомлення, чат-сервер (Socket.IO) створює сесію та поміщає її в waitingQueue (Redis). Оператори бачать кількість очікуючих у реальному часі. Якщо жоден оператор не онлайн, запускається сповіщення через Telegram — це критично для нічної підтримки.

// Приклад маршрутизації (скорочено)
io.on('connection', async (socket) => {
  const { role } = socket.data;
  if (role === 'user') handleUser(socket);
  else if (role === 'operator') handleOperator(socket);
});

Така маршрутизація в 3 рази швидша за просту чергу FIFO.

WebSocket проти Polling

WebSocket — протокол, що забезпечує повнодуплексний зв'язок через одне TCP-з'єднання (Wikipedia).

WebSocket знижує навантаження на сервер у 10 разів для 1000 паралельних чатів. Під час навантажувального тестування Socket.IO показав у 5 разів меншу затримку порівняно з long-polling. Ми використовуємо бібліотеку Socket.IO з fallback на long-polling для старих браузерів.

Порівняння стратегій черг

Для розподілу чатів між операторами ми використовуємо одну з трьох стратегій:

Вибір стратегії залежить від бізнес-логіки. Для інтернет-магазину з 50 000 відвідувачів ми використовували priority-чергу з дворівневим пріоритетом.

Як ми це робимо: кейс впровадження

Для інтернет-магазину електроніки з 50 000 відвідувачів на день ми реалізували чат з чергою, історією та інтеграцією з Telegram. За перший тиждень середній час відповіді скоротився з 6 годин до 3 хвилин, а економія склала 200 000 рублів на місяць на скороченні відтоку та підвищенні конверсії. Ключові рішення:

• Дворівнева черга: пріоритетні чати (VIP-клієнти) обробляються поза чергою.
• React-віджет чату з кастомною стилізацією під бренд.
• Admin UI чату на Vue 3 з фільтрацією за статусами та пошуком по історії.

// Приклад віджета (скорочено)
function SupportWidget() {
  const [messages, setMessages] = useState<Message[]>([]);
  const socket = useRef(io('/support', { auth: { token } }));
  // ...
}

Процес роботи над чатом

1. Аналітика та проектування — визначаємо сценарії: первинне звернення, ескалація, закриття. Узгоджуємо інтеграції (CRM, Telegram).
2. Проектування архітектури — обираємо стек (Node.js + Socket.IO + Redis + PostgreSQL), проектуємо модель даних.
3. Розробка серверної логіки — реалізуємо черги, події, зберігання історії.
4. Розробка клієнтської частини — віджет (React або Vue) та admin UI з дашбордом.
5. Інтеграція сповіщень — Telegram, email, дзвінок (опціонально).
6. Тестування — навантажувальне тестування (1000+ паралельних сесій), юніт-тести.
7. Деплой та документування — розгортаємо на вашому хостингу, передаємо документацію та доступи.

Що входить в роботу

• Вихідний код серверної та клієнтської частини (репозиторій на GitHub/GitLab).
• Документація API та інструкція з деплою.
• Навчання операторів роботі з admin UI.
• Гарантія 6 місяців на виправлення помилок.
• Підтримка після запуску: 2 тижні моніторингу.

Терміни та вартість

Терміни варіюються від 2 до 6 тижнів залежно від функціональності. Вартість розраховується індивідуально після аналізу проекту. Залиште заявку — ми оцінимо ваш проект безкоштовно. Отримайте консультацію інженера для уточнення деталей.

Чому варто обрати нас

• 5 років на ринку розробки веб-сервісів.
• 30+ завершених проектів з real-time функціональністю.
• Сертифіковані спеціалісти з Node.js та React.
• Ліцензія на розробку ПЗ, договір з NDA.

Зв'яжіться з нами, щоб обговорити деталі вашого чату підтримки. Ми запропонуємо оптимальне рішення під ваш бюджет та терміни.

Розробка систем реального часу: WebRTC, SSE, WebSocket

Ми знаємо, як боляче, коли полінг вбиває сервер. Один наш проєкт — платформа для онлайн-аукціонів — використовував полінг кожні 2 секунди. Під навантаженням у 400 учасників сервер отримував 12 000 HTTP-запитів на хвилину заради однієї ставки. 90% відповідей — пусті. Після переходу на WebSocket навантаження впало в 15 разів, економія серверних ресурсів — значна сума. Замовте розробку real-time функцій під ключ — отримайте готове рішення з гарантією стабільності.

Реалізація real-time на продакшні — не просто бібліотека. Ми проектуємо архітектуру під навантаження, сценарії та бюджет. Нижче — розбір ключових рішень з прикладами.

Три транспорти реального часу: коли що вибирати

Server-Sent Events працюють поверх звичайного HTTP/1.1 або HTTP/2. Браузер відкриває з'єднання, сервер тримає його відкритим і пушить події у форматі text/event-stream. Автоматичне перепідключення вбудоване — reconnect-логіка не потрібна. Обмеження: тільки сервер → клієнт. Ідеально для нотифікацій, прогресу довгих завдань, live-фідів.

WebSocket — повнодуплексний канал після HTTP Upgrade-рукопотискання. Браузер і сервер обмінюються фреймами в обидві сторони. Підходить для чатів, спільного редагування, ігор, торгових терміналів. Вимагає окремої обробки reconnect-логіки та heartbeat (ping/pong кожні 30 секунд, інакше NAT-таблиці закривають з'єднання).

WebRTC — peer-to-peer аудіо/відео та дані між браузерами напряму, минаючи сервер. Сервер потрібен лише для сигналізації (STUN/TURN для обходу NAT). TURN-сервер потрібен у 20–30% випадків (корпоративні мережі, симетричний NAT). Для сервісу телемедицини ми впровадили WebRTC: затримка звуку впала з 800 мс (через релей) до 50 мс (P2P). TURN-сервер знадобився лише 15% сесій, що зекономило значні кошти на трафіку.

WebSocket (Wikipedia) WebRTC (Wikipedia)

Як правильно вибрати транспорт: покрокова інструкція

1. Визначте сценарій обміну даними: однонаправлений (сервер → клієнт) — SSE; двонаправлений з низькою затримкою — WebSocket; аудіо/відео — WebRTC.
2. Оцініть вимоги до затримки. Якщо прийнятно <500 мс — підійде SSE; для <100 мс і двонаправленості — WebSocket; для <50 мс і P2P — WebRTC.
3. Перевірте бюджет на інфраструктуру. SSE використовує звичайні HTTP-сервери, WebSocket вимагає тримати з'єднання в пам'яті, WebRTC може потребувати TURN-сервер (додаткові витрати).
4. Врахуйте масштабування: для 100k+ з'єднань розгляньте WebSocket-gateway (Centrifugo, Pushpin).

Що таке CRDT і чим він кращий за Operational Transformation?

Спільне редагування — не просто «хто останній записав, той і правий». Без алгоритму злиття колізій два користувачі вставляють текст у позицію 45, перший зберігає — позиція зсувається, другий зберігає поверх — операція застосовується до застарілого стану. Текст дублюється або втрачається.

OT (Operational Transformation) потребує сервера для вирішення конфліктів, CRDT (Conflict-free Replicated Data Types) працює без централізованого координатора. Yjs — найбільш зріла CRDT-бібліотека для браузера. Інтегрується з ProseMirror, TipTap, CodeMirror, Monaco Editor.

Порівняння бібліотек для спільного редагування

Проблема: розмір Yjs-документа зростає через історію операцій. Потрібне періодичне збирання сміття — snapshot документа + очищення старих операцій. Без цього документ, над яким працювали рік, може важити 50 МБ.

const ws = new WebSocket('wss://example.com');
let pingInterval;

ws.on('open', () => {
  pingInterval = setInterval(() => {
    ws.ping();
    setTimeout(() => {
      if (ws.readyState === WebSocket.OPEN) ws.terminate();
    }, 5000);
  }, 25000);
});

ws.on('close', () => clearInterval(pingInterval));

Типові помилки при впровадженні real-time

Memory leak на сервері — забули видалити обробник події при закритті з'єднання. На Node.js heap зростає ~1 МБ/год. EventEmitter попереджає про 10+ слухачів, але не завжди це помічають.

Thundering herd при реконнекті. Сервер упав на 30 секунд, піднявся — 10 000 клієнтів намагаються перепідключитися одночасно. Exponential backoff з jitter обов'язковий: delay = Math.min(baseDelay * 2^attempt + random(0, 1000), maxDelay).

Відсутність індикації втрати з'єднання. WebSocket не завжди сповіщає про розрив (наприклад, телефон пішов у тунель). Heartbeat вирішує проблему.

Процес роботи

Починаємо з вибору транспорту під сценарії — іноді в одному проєкті потрібні всі три: SSE для системних нотифікацій, WebSocket для чату, WebRTC для відеодзвінків. Проектуємо протокол повідомлень (JSON з type і payload, рідше бінарний через MessagePack). Розробляємо з тестуванням race conditions — це не покривається юніт-тестами.

Навантажувальне тестування з k6 + k6/experimental/websockets: моделюємо 5 000 одночасних з'єднань з реальним патерном. Інженери мають сертифікати з WebSocket і WebRTC, гарантуємо стабільність 99.9%.

Що входить

• Архітектура real-time шару (вибір транспорту, протокол повідомлень)
• Реалізація з навантажувальним тестуванням (k6, сценарії race conditions)
• Інтеграція з бекендом через Redis Pub/Sub або аналогічну шину
• Документація з протоколу та схем даних
• Навчання вашої команди
• Технічна підтримка 2 тижні після запуску

Чому Centrifugo може бути вигіднішим за Socket.io?

Socket.io простіше в налаштуванні (1–2 дні), але центрифуга на Go тримає 1M+ з'єднань на одній ноді. Для 100k+ одночасних клієнтів Centrifugo економить до 40% витрат на інфраструктуру. Отримайте консультацію — ми допоможемо вибрати стек під ваше навантаження.

Строки

• Базовий WebSocket-чат або нотифікації поверх існуючого API: 1–3 тижні.
• Коллаборативний редактор з Yjs і persistence: 4–8 тижнів.
• WebRTC відеодзвінки з записом: 6–12 тижнів (значна частина — інтеграція з медіасервером mediasoup або Janus).

Зв'яжіться з нами для оцінки вашого проєкту. Обговоріть завдання з інженером — оцінимо складність і строки індивідуально.