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

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

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

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

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

Пропоновані послуги
Показано 1 з 1 послугУсі 2065 послуг
Інтеграція Centrifugo для real-time повідомлень на сайті
Середня
~3-5 робочих днів
Часті питання

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

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

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

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

Інтеграція Centrifugo для real-time сообщень на сайті

Centrifugo — self-hosted real-time сервер, сумісний з будь-яким backend через HTTP API. Написаний на Go, мінімальні ресурси, підтримує WebSocket, SSE, HTTP streaming та SockJS.

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

Ваш backend (будь-яка мова)
    │── 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(),  // від вашого backend
  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 — статуси онлайну

// Хто сейчас читає документ (collaborative editing)
const docSub = centrifuge.newSubscription(`chat:doc-${documentId}`);

docSub.presence().then((presence) => {
  const onlineUsers = Object.values(presence.clients);
  setOnlineUsers(onlineUsers);
});

docSub.on('join', ({ info }) => {
  console.log(`${info.user} joined`);
});

docSub.on('leave', ({ info }) => {
  console.log(`${info.user} left`);
});

Часові рамки

Centrifugo + Node.js SDK + клієнт з private каналами: 3–5 днів.