Интеграция 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 дня.