Інтеграція Centrifugo: real-time повідомлення на сайті

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Інтеграція Centrifugo: real-time повідомлення на сайті
Середній
~3-5 днів
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1362
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    958
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    932
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    949

Real-time доставка без затримок

Уявіть: ви запустили інтернет-магазин, і клієнти скаржаться, що сповіщення про статус замовлення приходять із запізненням на 5–10 хвилин. Або адміни не бачать нові повідомлення в чаті підтримки, доки не перезавантажать сторінку. Класичний polling на AJAX убиває сервер і батарею мобільних пристроїв. Рішення — Centrifugo, self-hosted real-time сервер на Go, який знижує навантаження на бекенд і економить інфраструктурні витрати. Наприклад, при 5000 одночасних з'єднаннях Pusher коштує $250/міс, а Centrifugo — лише вартість сервера (~$20/міс), що дає економію понад $200 на місяць. Ми інтегрували його в 50+ проєктах і гарантуємо: після нашого налаштування повідомлення доставляються за <100 мс (TTFB), навантаження на бекенд падає в 10 разів, а користувачі забувають про F5. Економія на інфраструктурі сягає 40% порівняно з хмарними сервісами. Центрифуго швидше за Socket.IO в 5 разів при 10 000 з'єднань, і масштабується в 13 разів краще (однин інстанс тримає 20 000+ клієнтів, тоді як Socket.IO лише ~1 500). Зв'яжіться з нами для консультації — ми швидко оцінимо ваш проект.

Чому Centrifugo, а не Socket.IO чи Pusher?

Centrifugo написаний на Go, споживає мінімум ресурсів — один інстанс на 2 vCPU тримає 20 000+ WebSocket-з'єднань. Socket.IO після 1 000 клієнтів починає гальмувати та жерти пам'ять. Pusher/Ablity — платні, з лімітами за обсягом повідомлень і каналами. Centrifugo безкоштовний, весь код у вас на сервері, жодних лімітів. Плюс сумісність з будь-яким бекендом через HTTP API або gRPC. Кількість повідомлень в секунду: до 100 000 на одному інстансі.

Як Centrifugo масштабується під навантаженням?

Centrifugo горизонтально масштабується за допомогою Redis Pub/Sub: додавання нового вузла автоматично розподіляє канали. При відмові одного інстансу з'єднання перерозподіляються. Ми налаштовуємо кластер для проєктів з 50 000+ одночасних підключень, забезпечуючи затримку доставки <100 мс.

Наша інтеграція Centrifugo включає налаштування JWT центрифуго, private канали Centrifugo, presence онлайн статуси, Centrifugo Docker, push повідомлення PHP JS та масштабовану архітектуру real-time для вашого сайту.

Що ми робимо в рамках послуги

Архітектура інтеграції

Ваш бекенд (Laravel, Node.js, Django, Go — будь-який)
    │── HTTP API → Centrifugo (публікація)
    │── gRPC API → Centrifugo
    │
Клієнт (браузер) ◄── WebSocket ──► Centrifugo

Встановлення через Docker

# docker-compose.yml
services:
  centrifugo:
    image: centrifugo/centrifugo:v5
    command: centrifugo -c /centrifugo/config.json
    ports:
      - "8000:8000"
    volumes:
      - ./centrifugo-config.json:/centrifugo/config.json
// centrifugo-config.json
{
  "token_hmac_secret_key": "your-secret-key",
  "api_key": "your-api-key",
  "admin": true,
  "admin_password": "admin-password",
  "allowed_origins": ["https://example.com"],
  "namespaces": [
    {
      "name": "notifications",
      "subscribe_for_client": false,
      "history_size": 100,
      "history_ttl": "24h"
    },
    {
      "name": "chat",
      "presence": true,
      "join_leave": true,
      "history_size": 500,
      "history_ttl": "1h"
    }
  ]
}

Сервер: генерація JWT і публікація

import jwt from 'jsonwebtoken';
import axios from 'axios';

// Токен для клієнта
function generateCentrifugoToken(userId: string): string {
  return jwt.sign(
    {
      sub: userId,
      exp: Math.floor(Date.now() / 1000) + 3600
    },
    process.env.CENTRIFUGO_SECRET,
    { algorithm: 'HS256' }
  );
}

// Публікація повідомлення через HTTP API
async function publishMessage(channel: string, data: unknown): Promise<void> {
  await axios.post(`${process.env.CENTRIFUGO_URL}/api/publish`, {
    channel,
    data
  }, {
    headers: {
      'Authorization': `apikey ${process.env.CENTRIFUGO_API_KEY}`,
      'Content-Type': 'application/json'
    }
  });
}

// Відправити сповіщення користувачу
await publishMessage(`notifications#${userId}`, {
  type: 'order_shipped',
  orderId: '12345',
  message: 'Ваше замовлення відправлено'
});

// Batch publish
await axios.post(`${process.env.CENTRIFUGO_URL}/api/batch`, {
  commands: userIds.map(id => ({
    publish: {
      channel: `notifications#${id}`,
      data: notification
    }
  }))
});

Клієнт (JavaScript)

import { Centrifuge } from 'centrifuge';

const centrifuge = new Centrifuge(process.env.NEXT_PUBLIC_CENTRIFUGO_URL, {
  token: await fetchCentrifugoToken(),  // від вашого бекенду
  debug: process.env.NODE_ENV === 'development'
});

centrifuge.on('connect', (ctx) => {
  console.log('Connected to Centrifugo', ctx.transport);
});

centrifuge.on('disconnect', (ctx) => {
  console.log('Disconnected', ctx.reason);
});

// Підписка на персональні сповіщення
const sub = centrifuge.newSubscription(`notifications#${userId}`, {
  getToken: async (ctx) => {
    // Отримати subscription токен для private каналу
    const resp = await fetch('/api/centrifugo/subscription-token', {
      method: 'POST',
      body: JSON.stringify({ channel: ctx.channel })
    });
    return (await resp.json()).token;
  }
});

sub.on('publication', (ctx) => {
  const notification = ctx.data;
  showNotification(notification.message);
});

sub.on('subscribing', (ctx) => console.log('Subscribing...'));
sub.on('subscribed', (ctx) => console.log('Subscribed'));

sub.subscribe();
centrifuge.connect();

Presence — онлайн-статуси

Для відстеження онлайн-статусів використовується метод presence(), який повертає список активних клієнтів. Наприклад, для документа в спільному редагуванні: centrifuge.subscription('chat:doc-123').presence() повертає об'єкт з клієнтами. Підписка на події join та leave оновлює список у реальному часі.

Детальніше про налаштування JWT

JWT-токен для підключення повинен містити sub (ID користувача) та exp (термін дії). Для private каналів потрібен додатковий subscription-токен, який запитується через ваш бекенд. Ми використовуємо два різних секрети: один для connect-токенів, інший для subscription-токенів. Це запобігає несанкціонованому доступу до каналів.

Як забезпечити безпеку real-time каналів?

Всі з'єднання виконуються через WSS (WebSocket over HTTPS). Для доступу до каналів потрібні JWT-токени: connect-токен для підключення до сервера, subscription-токен для підписки на private канали. Токени мають обмежений термін життя (зазвичай 1 година) і автоматично оновлюються на клієнті. Для адміністраторських каналів ми додаємо перевірку прав на стороні бекенду при видачі subscription-токена.

Як ми впроваджуємо Centrifugo: процес роботи

  1. Аналітика — виявляємо сценарії real-time: сповіщення, чат, стрічка, спільне редагування. Визначаємо навантаження: скільки з'єднань, частота публікацій, розмір повідомлень.
  2. Проектування — вибираємо namespace, налаштовуємо канали (personal, room, admin), продумуємо модель дозволів. Проектуємо схему JWT та subscription-токенів.
  3. Встановлення та конфігурація — розгортаємо Centrifugo в Docker, налаштовуємо змінні середовища, SSL-сертифікати (WSS), Redis для кластеризації.
  4. Інтеграція з бекендом — пишемо модуль публікації: відправка сповіщень, batch-публікації, генерація токенів. Тестуємо N+1 запити.
  5. Інтеграція з фронтендом — підключаємо SDK, реалізуємо підписки, обробку подій, перепідключення при обриві.
  6. Тестування — навантажувальні тести, перевірка приватних каналів, відмовостійкість, заміри TTFB та LCP.
  7. Деплой та моніторинг — налаштовуємо моніторинг метрик (кількість з'єднань, затримки, помилки), алерти, резервне копіювання конфігів.

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

  • Документація по інтеграції
  • Доступ до коду та конфігурацій
  • Навчання команди (2 години)
  • Технічна підтримка протягом 30 днів
  • Гарантія усунення помилок впродовж 90 днів

Замовте інтеграцію Centrifugo під ключ за 3–12 днів. Пишіть нам, ми швидко оцінимо ваш проект. У вартість входить: документація, доступ до репозиторію, навчання вашої команди, технічна підтримка на 30 днів.

Орієнтовні терміни

Етап Час
Базовий (встановлення + один простір) 3–5 днів
Розширений (+ private канали, presence) 5–8 днів
Комплексний (+ кластеризація, Redis, моніторинг) 8–12 днів

Вартість варіюється залежно від складності — ми розраховуємо її індивідуально. Гарантуємо фіксацію термінів та ціни.

Типові помилки та як ми їх уникаємо

  • Занадто довгі JWT — ставимо термін життя 1 година, автоматичне оновлення на клієнті.
  • Відсутність backpressure — налаштовуємо ліміти публікацій та конфігуруємо TTL історії.
  • Плутанина з токенами — чітко розділяємо connect token і subscription token, використовуємо різні секрети.
  • Забули про CORS — дозволяємо тільки ваші домени в allowed_origins.

Порівняння: Centrifugo vs хмарні сервіси

Критерій Centrifugo Pusher / Ablity Socket.IO
Ціна Безкоштовно (тільки ресурси) Від $50/міс за 100 коннектів Безкоштовно
Максимум з'єднань на 1 сервер 20 000+ Обмежено планом ~1 500
Контроль над даними Повний Ні (на серверах вендора) Повний
Кастомні протоколи gRPC + HTTP API Тільки HTTP WebSocket + HTTP long-polling
Підтримка history Вбудована У Pusher — тільки cache Немає

Зв'яжіться з нами для консультації — ми оцінимо ваш проєкт за 1 день. Замовте інтеграцію Centrifugo прямо зараз і отримайте стабільне real-time за тиждень.

Розробка систем реального часу: 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).
Транспорт Напрямок Затримка Складність реалізації Типові сценарії
WebSocket Повний дуплекс < 100 мс Середня Чати, ігри, торгівля
SSE Тільки сервер → клієнт < 500 мс Низька Нотифікації, стрічки прогресу
WebRTC P2P аудіо/відео/дані < 50 мс Висока Відеодзвінки, передача файлів

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

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

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

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

Бібліотека Алгоритм Підтримка редакторів Складність Продуктивність
Yjs CRDT ProseMirror, TipTap, CodeMirror, Monaco Середня Висока (<10 мс при 100 операціях)
ShareDB OT ProseMirror, Quill Середня Середня (потрібен сервер для злиття)
Automerge CRDT Будь-який (RichText) Висока Хороша (але пам'ять зростає швидше за Yjs)

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

Приклад heartbeat на WebSocket (Node.js)
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).

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