fullstack.org.ua

Server-Sent Events · fullstack.org.ua

Середній14 хв· Fullstack Team

Server-Sent Events

Передавайте односторонні оновлення від сервера до браузера через Server-Sent Events і відновлення з’єднання.

Що таке Server-Sent Events

Server-Sent Events (SSE) — це механізм одностороннього передавання даних від сервера до браузера через довге HTTP-з’єднання.

Браузер відкриває з’єднання за допомогою EventSource, а сервер залишає HTTP-відповідь відкритою й надсилає події в міру появи:

text

браузер ── HTTP-запит ──> сервер
браузер <── події ─────── сервер

SSE підходить для:

оновлення статусу довгих операцій;
повідомлень про зміни даних;
прогресу завантаження або обробки;
сповіщень;
простих інформаційних стрічок.

На відміну від WebSocket, SSE підтримує лише напрямок

javascript

const http = require('node:http');

const port = 3000;
const clients = new Set();
const history = [];
const historyLimit = 20;

let nextEventId = 1;

const html = `<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <title>Server-Sent Events</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 700px;
      margin: 40px auto;
    }

    #status {
      font-weight: bold;
    }

    li {
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <h1>Оновлення сервера</h1>
  <p>Стан з'єднання: <span id="status">підключення...</span></p>
  <ul id="updates"></ul>

  <script>
    const statusElement = document.querySelector('#status');
    const updatesElement = document.querySelector('#updates');

    const source = new EventSource('/events');

    source.addEventListener('open', () => {
      statusElement.textContent = 'підключено';
    });

    source.addEventListener('error', () => {
      statusElement.textContent = 'з’єднання втрачено, повторна спроба...';
    });

    source.addEventListener('update', (event) => {
      const update = JSON.parse(event.data);

      const item = document.createElement('li');
      item.textContent =
        '#' + event.lastEventId + ': ' + update.message;

      updatesElement.prepend(item);
    });
  </script>
</body>
</html>`;

function createEventMessage(event) {
  const lines = [];

  if (event.id !== undefined) {
    lines.push(`id: ${event.id}`);
  }

  if (event.name) {
    lines.push(`event: ${event.name}`);
  }

  lines.push(`data: ${JSON.stringify(event.data)}`);

  return `${lines.join('\n')}\n\n`;
}

function sendEvent(response, event) {
  response.write(createEventMessage(event));
}

function publish(name, data) {
  const event = {
    id: nextEventId++,
    name,
    data
  };

  history.push(event);

  if (history.length > historyLimit) {
    history.shift();
  }

  const message = createEventMessage(event);

  for (const client of clients) {
    if (!client.destroyed) {
      client.write(message);
    }
  }
}

const server = http.createServer((request, response) => {
  if (request.method === 'GET' && request.url === '/') {
    response.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });

    response.end(html);
    return;
  }

  if (request.method === 'GET' && request.url === '/events') {
    response.writeHead(200, {
      'Content-Type': 'text/event-stream; charset=utf-8',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive'
    });

    response.flushHeaders();

    // Просимо браузер повторити спробу через три секунди.
    response.write('retry: 3000\n\n');

    clients.add(response);

    const lastEventIdHeader = request.headers['last-event-id'];
    const lastEventId = Number.parseInt(lastEventIdHeader, 10);

    if (Number.isInteger(lastEventId)) {
      // Повторно надсилаємо події, яких клієнт ще не отримав.
      for (const event of history) {
        if (event.id > lastEventId) {
          sendEvent(response, event);
        }
      }
    }

    sendEvent(response, {
      name: 'connected',
      data: {
        message: 'З’єднання встановлено'
      }
    });

    request.on('close', () => {
      clients.delete(response);
    });

    return;
  }

  response.writeHead(404, {
    'Content-Type': 'text/plain; charset=utf-8'
  });

  response.end('Not found');
});

server.listen(port, () => {
  console.log(`Сервер запущено: http://localhost:${port}`);
});

// Демонстраційні оновлення від сервера.
setInterval(() => {
  publish('update', {
    message: `Нове оновлення о ${new Date().toLocaleTimeString('uk-UA')}`
  });
}, 5000);

// Коментарі не є подіями та ігноруються браузером.
// Вони потрібні, щоб проміжні проксі не вважали з’єднання неактивним.
setInterval(() => {
  for (const client of clients) {
    if (!client.destroyed) {
      client.write(': heartbeat\n\n');
    }
  }
}, 20000);

javascript

const source = new EventSource('/events');

source.addEventListener('update', (event) => {
  const data = JSON.parse(event.data);
  console.log('Оновлення:', data);
});

source.addEventListener('connected', (event) => {
  console.log('Сервер підтвердив підключення');
});

javascript

const source = new EventSource('/events');

source.onopen = () => {
  console.log('SSE-з’єднання відкрите');
};

source.onerror = () => {
  console.log('З’єднання втрачено або виконується перепідключення');
};