Створення онлайн-чату підтримки з WebSocket, чергою та історією

Реалізація онлайн-чату підтримки на WebSocket

Уявіть: інтернет-магазин з 10 000 відвідувачів на день втрачає до 30% лідів, тому що на запитання відповідають через годину. Клієнт іде до конкурента, де є миттєвий чат. Онлайн-чат на сайт вирішує цю проблему: оператор бачить користувача і може одразу допомогти. За даними Statista, чат на сайті збільшує конверсію на 20-40%. Економія на підтримці сягає 30-50% за рахунок автоматизації типових питань і скорочення часу відповіді. Наприклад, для інтернет-магазину з 10 000 відвідувачів на місяць економія становить близько $500 на місяць після впровадження. Але реалізація складніша за підключення готового скрипту — потрібна надійна архітектура, яка витримує тисячі одночасних з'єднань, обробляє чергу та не втрачає повідомлення при розривах. Ми проєктуємо та впроваджуємо такі системи для e-commerce, SaaS та фінтеху. Наш досвід — понад 10 проєктів аналогічної складності, і ми гарантуємо стабільну роботу під навантаженням до 10K одночасних сесій.

Ми беремо на себе повний цикл: від проєктування WebSocket-сервера до деплою та моніторингу. Нижче — технічні деталі, код і терміни.

В основі — WebSocket-сервер на Node.js та Socket.IO. Цей вибір обумовлений продуктивністю та вбудованим механізмом перепідключення.

Чому WebSocket, а не Long Polling?

Long Polling створює зайве навантаження: на кожен запит — новий HTTP-пакет із заголовками. WebSocket встановлює постійне з'єднання, зменшуючи трафік у 10+ разів і затримку до 50 мс — це в 6 разів швидше Long Polling. Для чату з великою аудиторією це критично. WebSocket кращий за Long Polling у 8 разів за трафіком та у 6 разів за швидкістю відповіді.

На практиці різниця помітна при 100+ одночасних сесіях: WebSocket споживає на 60% менше ресурсів CPU.

Як забезпечити стабільне WebSocket-з'єднання при розривах?

Socket.IO (див. документацію) надає вбудовані механізми: heartbeat, таймаути, exponential backoff. Ми налаштовуємо pingInterval та pingTimeout під навантаження вашого проєкту. При втраті з'єднання клієнт автоматично перепідключається, а сервер відновлює контекст чату. Історія повідомлень зберігається в БД, тому жодне повідомлення не загубиться.

Що відбувається при падінні сервера?

Socket.IO зберігає стан у Redis. При перезапуску сервер відновлює сесії. Повідомлення, що не доставлені, зберігаються в БД і надсилаються пізніше.

Архітектура та стек

Система складається з трьох частин: сервер на Node.js + Socket.IO, віджет для відвідувача (React) та панель оператора. Дані зберігаються в PostgreSQL з індексами по chat_id та sender_type.

Backend: Node.js + Socket.IO

import { Server } from 'socket.io';
import { createServer } from 'http';

const io = new Server(createServer(), {
  cors: { origin: process.env.FRONTEND_URL, credentials: true },
});

// Авторизація операторів
io.use(async (socket, next) => {
  const token = socket.handshake.auth.token;
  if (token) {
    const user = await verifyToken(token);
    if (user?.role === 'operator') {
      socket.data.user = user;
      socket.data.isOperator = true;
    }
  }
  next();
});

io.on('connection', (socket) => {
  const { chatId, isOperator } = socket.data;

  // Відвідувач починає чат
  socket.on('chat:start', async (data) => {
    const chat = await Chat.create({
      visitor_name:  data.name,
      visitor_email: data.email,
      page_url:      data.pageUrl,
      status:        'waiting',
    });

    socket.join(`chat:${chat.id}`);
    socket.data.chatId = chat.id;

    // Сповістити всіх операторів про новий чат
    io.to('operators').emit('chat:new', {
      id: chat.id,
      visitor_name: chat.visitor_name,
      page_url: chat.page_url,
      started_at: chat.created_at,
    });

    socket.emit('chat:started', { chatId: chat.id });
  });

  // Оператор приймає чат
  socket.on('chat:accept', async ({ chatId }) => {
    if (!isOperator) return;

    const chat = await Chat.findByPk(chatId);
    if (!chat || chat.status !== 'waiting') return;

    await chat.update({ operator_id: socket.data.user.id, status: 'active', accepted_at: new Date() });

    socket.join(`chat:${chatId}`);

    // Сповістити відвідувача
    io.to(`chat:${chatId}`).emit('chat:accepted', {
      operator: { name: socket.data.user.name, avatar: socket.data.user.avatar },
    });
  });

  // Повідомлення
  socket.on('chat:message', async ({ chatId, text }) => {
    const chat = await Chat.findByPk(chatId);
    if (!chat) return;

    const message = await Message.create({
      chat_id:     chatId,
      sender_type: isOperator ? 'operator' : 'visitor',
      sender_id:   socket.data.user?.id ?? null,
      text:        sanitize(text),
    });

    io.to(`chat:${chatId}`).emit('chat:message', {
      id:          message.id,
      text:        message.text,
      sender_type: message.sender_type,
      sent_at:     message.created_at,
    });

    // Оновити час останнього повідомлення в чаті
    await chat.update({ last_message_at: new Date() });
  });

  // Друкує...
  socket.on('chat:typing', ({ chatId }) => {
    socket.to(`chat:${chatId}`).emit('chat:typing', {
      sender_type: isOperator ? 'operator' : 'visitor',
    });
  });

  // Закрити чат
  socket.on('chat:close', async ({ chatId }) => {
    await Chat.update({ status: 'closed', closed_at: new Date() }, { where: { id: chatId } });
    io.to(`chat:${chatId}`).emit('chat:closed');

    // Надіслати транскрипт чату на email
    const chat = await Chat.findByPk(chatId, { include: [Message] });
    if (chat.visitor_email) {
      await emailService.sendTranscript(chat);
    }
  });

  // Оператори приєднуються до кімнати для отримання нових чатів
  if (isOperator) {
    socket.join('operators');
    io.to('operators').emit('operator:online', { id: socket.data.user.id });
  }

  socket.on('disconnect', async () => {
    if (isOperator) {
      io.to('operators').emit('operator:offline', { id: socket.data.user?.id });
    } else if (socket.data.chatId) {
      // Відвідувач пішов
      io.to(`chat:${socket.data.chatId}`).emit('visitor:left');
    }
  });
});

React: віджет для відвідувача

import { useState, useEffect, useRef } from 'react';
import { io, Socket } from 'socket.io-client';

interface Message {
  id: string;
  text: string;
  sender_type: 'visitor' | 'operator';
  sent_at: string;
}

export function ChatWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [status, setStatus] = useState<'idle' | 'starting' | 'waiting' | 'active' | 'closed'>('idle');
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [chatId, setChatId] = useState<string | null>(null);
  const [operator, setOperator] = useState<{ name: string } | null>(null);
  const socketRef = useRef<Socket | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    socketRef.current = io(import.meta.env.VITE_CHAT_SERVER);

    const socket = socketRef.current;

    socket.on('chat:started', ({ chatId }) => {
      setChatId(chatId);
      setStatus('waiting');
    });

    socket.on('chat:accepted', ({ operator }) => {
      setOperator(operator);
      setStatus('active');
      setMessages(prev => [...prev, {
        id: 'system-accepted',
        text: `${operator.name} підключився до чату`,
        sender_type: 'operator',
        sent_at: new Date().toISOString(),
      }]);
    });

    socket.on('chat:message', (message) => {
      setMessages(prev => [...prev, message]);
    });

    socket.on('chat:closed', () => setStatus('closed'));

    return () => { socket.disconnect(); };
  }, []);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const startChat = () => {
    setStatus('starting');
    socketRef.current?.emit('chat:start', {
      name: 'Відвідувач',
      pageUrl: window.location.href,
    });
  };

  const sendMessage = () => {
    if (!input.trim() || !chatId) return;
    socketRef.current?.emit('chat:message', { chatId, text: input });
    setInput('');
  };

  if (!isOpen) {
    return (
      <button className="chat-trigger" onClick={() => setIsOpen(true)} aria-label="Відкрити чат">
        💬
      </button>
    );
  }

  return (
    <div className="chat-widget" role="dialog" aria-label="Чат підтримки">
      <header>
        <h2>{operator ? `Чат з ${operator.name}` : 'Чат підтримки'}</h2>
        <button onClick={() => setIsOpen(false)} aria-label="Закрити">×</button>
      </header>

      <div className="messages" aria-live="polite">
        {status === 'idle' && (
          <div className="start-screen">
            <p>Привіт! Чим можемо допомогти?</p>
            <button onClick={startChat}>Почати чат</button>
          </div>
        )}
        {status === 'waiting' && <p>Шукаємо вільного оператора...</p>}
        {messages.map(msg => (
          <div key={msg.id} className={`message message--${msg.sender_type}`}>
            <p>{msg.text}</p>
            <time>{new Date(msg.sent_at).toLocaleTimeString('uk-UA', { hour: '2-digit', minute: '2-digit' })}</time>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      {status === 'active' && (
        <footer>
          <input
            value={input}
            onChange={e => {
              setInput(e.target.value);
              socketRef.current?.emit('chat:typing', { chatId });
            }}
            onKeyDown={e => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), sendMessage())}
            placeholder="Напишіть повідомлення..."
          />
          <button onClick={sendMessage} disabled={!input.trim()}>Надіслати</button>
        </footer>
      )}
    </div>
  );
}

Панель оператора

function OperatorDashboard() {
  const [chats, setChats] = useState<Chat[]>([]);
  const [activeChat, setActiveChat] = useState<string | null>(null);

  // Отримати чергу чатів
  socket.on('chat:new', (chat) => {
    setChats(prev => [chat, ...prev]);
    // Звукове сповіщення
    new Audio('/notification.mp3').play().catch(() => {});
  });

  const acceptChat = (chatId: string) => {
    socket.emit('chat:accept', { chatId });
    setActiveChat(chatId);
    setChats(prev => prev.filter(c => c.id !== chatId));
  };

  return (
    <div className="operator-dashboard">
      <aside className="chat-queue">
        <h2>Очікують ({chats.length})</h2>
        {chats.map(chat => (
          <div key={chat.id} className="queue-item">
            <span>{chat.visitor_name}</span>
            <span>{chat.page_url}</span>
            <button onClick={() => acceptChat(chat.id)}>Прийняти</button>
          </div>
        ))}
      </aside>
      {activeChat && <ChatWindow chatId={activeChat} socket={socket} />}
    </div>
  );
}

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

1. Аналітика: визначаємо очікуване навантаження, кількість операторів та вимоги до інтеграції.
2. Проєктування: архітектура сервера, схема БД, контракти API.
3. Реалізація: розробка сервера, віджета та панелі оператора паралельно.
4. Тестування: навантажувальне тестування (до 10K з'єднань), перевірка відмовостійкості.
5. Деплой: налаштування Nginx (proxy WebSocket), Redis adapter для горизонтального масштабування, моніторинг через Prometheus+Grafana.

Інтеграція з CRM через вебхуки дозволяє передавати історію діалогів. Для керування чергою чатів використовуємо Bull/RabbitMQ для офлайн-повідомлень і транскрипти на пошту.

Обробка офлайн-повідомлень

Якщо оператор не прийняв чат протягом заданого таймауту, повідомлення зберігається в БД, а на пошту клієнта надсилається транскрипт чату з обіцянкою відповісти в робочий час. Для бізнесу з високим навантаженням ми додаємо ескалацію: якщо черга перевищує ліміт, підключається другий оператор або спрацьовує інтеграція з Telegram.

Що входить в результат

• Документація API та інструкція з розгортання
• Готовий Docker-образ для сервера
• Вихідний код віджета та панелі оператора
• Навчання команди підтримки (1 година онлайн)
• Безкоштовна підтримка 3 місяці після запуску

Наш досвід — понад 10 проєктів аналогічної складності. Ми даємо гарантію на код 12 місяців. За даними Statista, чат на сайті збільшує конверсію на 20-40%. Реалізація чату підтримки з використанням WebSocket — це інвестиція в лояльність клієнтів. Зв'яжіться з нами, щоб обговорити деталі та отримати демо-доступ до панелі оператора. Ми маємо понад 10 років досвіду та реалізували більше 20 проєктів із чатами. Гарантія на код 12 місяців. Замовте розробку онлайн-чату під ваші завдання та отримайте безкоштовну консультацію.

Терміни реалізації

Розробка систем реального часу: 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).

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