Реалізація Live Updates (оновлення без перезавантаження) на сайті

Реалізація Live Updates (оновлення без перезавантаження) на веб-сайті

Оновлення в реальному часі без перезавантаження сторінки — це не обов'язково WebSocket. Вибір технології залежить від спрямованості даних, частоти оновлень та допустимої складності інфраструктури.

Три підходи та коли застосовувати кожен

Server-Sent Events (SSE) — одностороння потокова передача з сервера, звичайний HTTP. Ідеальний для сповіщень, лент активності, прогресу завдань. Вбудована автоматична переподключення браузером.

WebSocket — двосторонній канал. Потрібен, коли клієнт також надсилає дані в реальному часі (чат, ігри, спільне редагування).

Polling / Long Polling — HTTP-запити з інтервалом або очікуванням відповіді. Найпростіший варіант, підходить для рідких оновлень (раз у 30–60 секунд).

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));
});

// Загальний обробник
evtSource.onmessage = (e) => {
  console.log('Default event:', e.data);
};

// Браузер автоматично переподключається
evtSource.onerror = (e) => {
  console.log('SSE error, will reconnect...');
};

EventSource автоматично переподключається при розриві, надсилаючи Last-Event-ID — сервер може відправити пропущені події.

WebSocket з переподключенням

Нативний WebSocket не переподключується сам. Потрібна обгортка:

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 (з вбудованим polling fallback).

Оновлення UI без мигання

Груба заміна innerHTML при кожному оновленні створює візуальні артефакти. Два підходи:

Morphdom — DOM-diff без Virtual DOM:

import morphdom from 'morphdom';

ws.on('message', ({ type, html }) => {
  if (type === 'update-block') {
    const el = document.getElementById('notifications');
    morphdom(el, `<div id="notifications">${html}</div>`, {
      onBeforeElUpdated: (fromEl, toEl) => {
        // Не оновлюємо елементи під час анімації
        if (fromEl.classList.contains('animating')) return false;
        return true;
      }
    });
  }
});

React / Vue state updates — якщо фронтенд на React, просто оновлюємо стан:

ws.on('message', (data) => {
  switch (data.type) {
    case 'new-order':
      setOrders(prev => [data.order, ...prev]);
      break;
    case 'order-updated':
      setOrders(prev => prev.map(o => o.id === data.order.id ? data.order : o));
      break;
    case 'notification':
      setNotifications(prev => [data.notification, ...prev.slice(0, 49)]);
      break;
  }
});

Broadcasting через Redis Pub/Sub

З кількома інстансами сервера — Redis Pub/Sub для розсилання подій всім підключеним клієнтам:

// publisher.js
const redis = require('redis');
const publisher = redis.createClient();

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

// subscriber.js (у тому ж процесі, що тримає SSE/WS з'єднання)
const subscriber = redis.createClient();
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 та debounce

При високочастотних оновленнях (ціни, метрики) не надсилаємо кожну зміну окремо:

// Сервер: буферизація подій
class UpdateBatcher {
  constructor(flushInterval = 100) {
    this.queue = new Map(); // userId -> события
    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, []);
      }
    });
  }
}

Терміни

SSE-сповіщення (нові замовлення, повідомлення) — 1–2 дні WebSocket з переподключенням та React-інтеграцією — 2–3 дні Broadcasting через Redis Pub/Sub для кількох серверів — плюс 1–2 дні Повноцінна real-time лента (активність, сповіщення, лічильники) — 4–6 днів