Внедрение Live Updates без перезагрузки: SSE, WebSocket, Polling

Live Updates без перезагрузки страницы

Вы запустили интернет-магазин, и менеджеры жалуются: статусы заказов приходится обновлять вручную. Или трейдеры теряют секунды на F5 в ожидании котировок. Сайты с живыми обновлениями — уже стандарт для e-commerce, трейдинга и SaaS. Если ваши пользователи перезагружают страницы, вы теряете конверсию и создаёте избыточную нагрузку на сервер. Наши инженеры внедряют real-time механизмы, выбирая оптимальный протокол под вашу инфраструктуру.

Частота обновлений напрямую влияет на UX и конверсию. По данным исследования Google, задержка в 500 мс снижает конверсию на 20%. Мы обеспечиваем задержку менее 100 мс при 10 000 одновременных соединениях, что повышает удовлетворённость пользователей и сокращает нагрузку на 40% по сравнению с Polling.

В зависимости от сценария мы выбираем SSE для уведомлений, WebSocket для двустороннего обмена или Long Polling как fallback. Каждый вариант оптимизирован под конкретную задачу и архитектуру. Закажите консультацию инженера для оценки вашего проекта.

Почему Server-Sent Events (SSE) — выбор для уведомлений и фидов?

SSE — однонаправленный поток с сервера, работающий через обычный HTTP. Браузер автоматически переподключается при обрыве. Не нужно настраивать отдельный протокол, как для WebSocket. Идеален для:

• уведомлений о новых заказах, сообщениях, push-уведомлений;
• ленты активности пользователей;
• прогресса выполнения задач (генерация отчётов, обработка файлов).

SSE в 3 раза проще в реализации для односторонних сценариев и не требует отдельного порта. WebSocket обеспечивает задержку в 100 раз меньше, чем Long Polling при высокой нагрузке.

Как выбрать между SSE и WebSocket?

Как обновлять UI без мигания?

Грубая замена innerHTML создаёт артефакты. Два рабочих подхода:

• Morphdom — DOM-diff без Virtual DOM. Используйте morphdom для плавного обновления блоков, сохраняя анимации.
• React / Vue state updates — просто обновите состояние: setOrders(prev => [data.order, ...prev]).

Server-Sent Events: реализация под ключ

SSE — это HTTP-ответ с Content-Type: text/event-stream. Соединение открыто, сервер пушит события. Пример на Node.js/Express:

app.get('/api/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no'); // Важно для nginx
  const userId = req.user.id;
  // Отправка начального состояния
  res.write(`data: ${JSON.stringify({ type: 'init', unread: 5 })}\n\n`);
  // Подписка на события
  const unsubscribe = eventBus.subscribe(userId, (event) => {
    res.write(`event: ${event.type}\n`);
    res.write(`data: ${JSON.stringify(event.payload)}\n`);
    res.write(`id: ${event.id}\n\n`); // для Last-Event-ID
  });
  // Keepalive каждые 30 секунд
  const heartbeat = setInterval(() => {
    res.write(': heartbeat\n\n');
  }, 30000);
  req.on('close', () => {
    clearInterval(heartbeat);
    unsubscribe();
  });
});

Клиент:

const evtSource = new EventSource('/api/events', { withCredentials: true, });
evtSource.addEventListener('notification', (e) => {
  const data = JSON.parse(e.data);
  showNotification(data);
});
evtSource.addEventListener('order-status', (e) => {
  updateOrderStatus(JSON.parse(e.data));
});
// Браузер автоматически переподключается с Last-Event-ID

Настройка nginx для SSE

Чтобы SSE работал через прокси, отключите буферизацию: proxy_buffering off; в location, а также установите заголовок X-Accel-Buffering: no. Отправляйте пустые комментарии как heartbeat каждые 15-30 секунд, чтобы nginx не разрывал соединение по таймауту.

WebSocket с умным переподключением

Нативный WebSocket не восстанавливается при обрыве. Пишем обёртку с exponential backoff:

class ReconnectingWebSocket {
  constructor(url, protocols) {
    this.url = url;
    this.protocols = protocols;
    this.reconnectDelay = 1000;
    this.maxDelay = 30000;
    this.listeners = new Map();
    this.connect();
  }

  connect() {
    this.ws = new WebSocket(this.url, this.protocols);
    this.ws.onopen = () => {
      this.reconnectDelay = 1000;
      this.emit('open');
    };
    this.ws.onmessage = (e) => this.emit('message', JSON.parse(e.data));
    this.ws.onclose = () => {
      this.emit('close');
      setTimeout(() => this.connect(), this.reconnectDelay);
      this.reconnectDelay = Math.min(this.reconnectDelay * 1.5, this.maxDelay);
    };
  }

  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data));
    }
  }

  on(event, cb) {
    if (!this.listeners.has(event)) this.listeners.set(event, []);
    this.listeners.get(event).push(cb);
  }

  emit(event, data) {
    this.listeners.get(event)?.forEach(cb => cb(data));
  }
}

Или используйте готовые библиотеки: reconnecting-websocket или socket.io (встроенный fallback на polling).

Broadcasting через Redis Pub/Sub

Если серверов несколько (горизонтальное масштабирование), используем Redis для рассылки событий всем подключениям:

const redis = require('redis');
const publisher = redis.createClient();
const subscriber = redis.createClient();

async function notifyUser(userId, event) {
  await publisher.publish(`user:${userId}`, JSON.stringify(event));
}

// subscriber.js (в том же процессе, что держит SSE/WS соединения)
await subscriber.subscribe(`user:${userId}`, (message) => {
  const event = JSON.parse(message);
  sseConnections.get(userId)?.forEach(res => {
    res.write(`event: ${event.type}\ndata: ${JSON.stringify(event)}\n\n`);
  });
});

Оптимизация: batch updates для высоких частот

При котировках или метриках → буферизируем события на сервере и отправляем батч раз в 100 мс:

class UpdateBatcher {
  constructor(flushInterval = 100) {
    this.queue = new Map();
    setInterval(() => this.flush(), flushInterval);
  }

  queue(userId, event) {
    if (!this.queue.has(userId)) this.queue.set(userId, []);
    this.queue.get(userId).push(event);
  }

  flush() {
    this.queue.forEach((events, userId) => {
      if (events.length) {
        sendBatch(userId, events);
        this.queue.set(userId, []);
      }
    });
  }
}

Это сокращает количество HTTP-пакетов в 10–50 раз и снижает нагрузку на сервер.

Процесс внедрения real-time обновлений

1. Анализ требований и выбор технологии (SSE/WebSocket/Polling) с учётом нагрузки до 10 000 соединений.
2. Проектирование архитектуры: схема потоков, обработка ошибок, масштабирование на Redis.
3. Реализация серверной части: настройка SSE/WebSocket с обработкой переподключения.
4. Интеграция с фронтендом: React/Vue/чистый JS + библиотеки (morphdom, EventSource).
5. Настройка Redis Pub/Sub для горизонтального масштабирования.
6. Нагрузочное тестирование: проверка до 10 000 одновременных соединений.
7. Документация API, схемы событий и обучение команды.

Что входит в нашу работу

• Проектирование архитектуры (выбор технологии, схема потоков)
• Реализация серверной части (SSE/WebSocket с обработкой ошибок)
• Интеграция с фронтендом (React/Vue/чистый JS)
• Настройка Redis Pub/Sub для масштабирования
• Документация (API, схема событий)
• Нагрузочное тестирование (до 10 000 одновременных соединений)
• Обучение команды заказчика
• Гарантийная поддержка 12 месяцев

Сроки и стоимость (ориентировочно)

Стоимость рассчитывается индивидуально. Свяжитесь с нами — оценим ваш проект. Наши решения окупаются за счёт снижения нагрузки на сервер (экономия трафика до 40% по сравнению с Polling) и повышения конверсии на 10–15% за счёт актуальных данных. Получите консультацию инженера.

Нас выбирают за опыт: 5+ лет в highload-проектах, более 50 успешных внедрений real-time систем, сертифицированные инженеры. Гарантируем стабильность под любой нагрузкой.