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

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

Pusher — managed WebSocket-сервіс. Клієнт підписується на канали, сервер публікує події через HTTP API. Без управління WebSocket-інфраструктурою — тільки логіка повідомлень.

Встановлення

npm install pusher        # серверна бібліотека
npm install pusher-js     # клієнтська

Сервер

import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID,
  key: process.env.PUSHER_KEY,
  secret: process.env.PUSHER_SECRET,
  cluster: process.env.PUSHER_CLUSTER,
  useTLS: true
});

// Публікація події при зміні статусу замовлення
async function notifyOrderUpdate(orderId: string, status: string, userId: string) {
  await pusher.trigger(`private-user-${userId}`, 'order-updated', {
    orderId,
    status,
    timestamp: new Date().toISOString()
  });
}

// Авторизація private-каналів
app.post('/pusher/auth', authenticate, (req, res) => {
  const { socket_id, channel_name } = req.body;
  const userId = req.user.id;

  // Перевіряємо, що користувач може підписатися на цей канал
  if (channel_name !== `private-user-${userId}`) {
    return res.status(403).json({ error: 'Forbidden' });
  }

  const auth = pusher.authorizeChannel(socket_id, channel_name);
  res.json(auth);
});

Клієнт (React)

import Pusher from 'pusher-js';
import { useEffect, useState } from 'react';

function useOrderNotifications(userId: string) {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
      authEndpoint: '/pusher/auth',
      auth: {
        headers: { Authorization: `Bearer ${getToken()}` }
      }
    });

    const channel = pusher.subscribe(`private-user-${userId}`);

    channel.bind('order-updated', (data) => {
      setNotifications(prev => [data, ...prev]);
      showToast(`Замовлення #${data.orderId}: ${data.status}`);
    });

    return () => {
      channel.unbind_all();
      pusher.unsubscribe(`private-user-${userId}`);
      pusher.disconnect();
    };
  }, [userId]);

  return notifications;
}

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

// Хто сейчас онлайн в кімнаті
const channel = pusher.subscribe(`presence-room-${roomId}`, {
  userAuthentication: {
    params: { userId, userName: user.name }
  }
});

channel.bind('pusher:member_added', (member) => {
  console.log(`${member.info.userName} вошел`);
});

channel.bind('pusher:member_removed', (member) => {
  console.log(`${member.info.userName} вышел`);
});

// Поточні учасники
const members = channel.members;

Обмеження та ліміти

Pusher Channels: безплатний план — 100 одночасних підключень, 200k сообщень/день. Платні плани починаються від $49/місяць.

Альтернативи для self-hosted: Soketi (open-source сумісний з Pusher API).

Часові рамки

Базова інтеграція повідомлень через Pusher: 1–2 дні.