PricingLoginStart free
Frontend Academy · Урок

Server-Sent Events для однонаправленной потоковой передачи

Используйте EventSource для получения потока событий, отправленных сервером, разбирайте типы событий и данные и автоматически переподключайтесь при перебоях сети

Урок 3 из 415 шагов

«Server-Sent Events для однонаправленной потоковой передачи» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое события, отправляемые сервером?

SSE — стандартный протокол на основе HTTP, с помощью которого сервер отправляет события браузеру через одно долгоживущее соединение. Односторонняя связь: только от сервера к клиенту. Это проще, чем WebSockets, когда отправлять данные обратно не требуется.

API EventSource

Встроенный в браузер EventSource подключается к URL-адресу и прослушивает события. Это стандартный API, для которого не нужна библиотека.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Формат ответа сервера

Сервер отправляет текстовый поток с заголовком Content-Type: text/event-stream. Каждое сообщение начинается с data: и заканчивается пустой строкой.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Именованные события

Сервер может задавать имена событий с помощью event:. Браузер вызывает обработчики с этим именем.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Автоматическое переподключение

EventSource автоматически переподключается после отключения (примерно через 3 секунды). Сервер может предложить задержку с помощью retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

Идентификаторы событий и возобновление

Сервер отправляет id: вместе с каждым событием. После переподключения браузер отправляет последний полученный ID в заголовке Last-Event-ID — сервер может продолжить отправку с этого места.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Разбор JSON

event.data всегда является строкой. Разберите JSON самостоятельно.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Закрытие соединения

Вызовите es.close(), чтобы остановить соединение. При закрытии вкладки браузеры также закрывают его.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Варианты использования

Оперативные панели (метрики, мониторинг). Уведомления (новые письма, оповещения). Биржевые котировки. Потоковая выдача ответов AI (каждый токен — отдельное событие). Счёт спортивных матчей в реальном времени. Обновления состояния длительных задач.

Реальный пример: потоковая выдача AI

Потоковая выдача ответов OpenAI/Anthropic передаётся через SSE. Каждый токен поступает как событие с данными — отображайте их постепенно, создавая эффект печати.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE, WebSocket и опрос

SSE: работает на основе HTTP, только от сервера к клиенту, с автоматическим переподключением и простой реализацией. WebSocket: полнодуплексная связь, меньшие накладные расходы на сообщение, но более сложная реализация. Опрос: самый простой вариант, но с наибольшими задержкой и нагрузкой. Выбирайте SSE для односторонней потоковой передачи, а WS — для двусторонней связи наподобие чата.

Ограничения браузеров и прокси

Браузеры ограничивают количество одновременных SSE-соединений для одного источника (примерно 6). Некоторые корпоративные прокси и старые балансировщики нагрузки буферизуют ответы, из-за чего SSE перестаёт работать — проверьте приложение в целевых средах. Используйте HTTPS, чтобы обойти большую часть буферизации прокси.

CORS для SSE

EventSource соблюдает правила CORS. Сервер должен отправлять заголовок Access-Control-Allow-Origin. Для учётных данных передайте { withCredentials: true } конструктору EventSource и установите на сервере Access-Control-Allow-Credentials: true.

Быстрая проверка

В чём заключается ключевое различие между событиями, отправляемыми сервером, и WebSockets?

Ответь в интерактивном уроке

Повторение: события, отправляемые сервером

EventSource открывает HTTP-поток событий text/event-stream. Сервер отправляет сообщения 'data:' с необязательными именем event: и идентификатором id:. Автоматическое переподключение позволяет возобновить передачу с помощью Last-Event-ID. Связь односторонняя (от сервера к клиенту). Такой подход отлично подходит для оперативных панелей, потоковой выдачи AI и уведомлений. Он проще WebSocket, когда двусторонняя связь не нужна. Учитывайте ограничения на количество одновременных соединений и буферизацию прокси.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
41
Уроки
163
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Server-Sent Events для однонаправленной потоковой передачи» бесплатный?

Да — полный текст урока «Server-Sent Events для однонаправленной потоковой передачи» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Server-Sent Events для однонаправленной потоковой передачи»?

Используйте EventSource для получения потока событий, отправленных сервером, разбирайте типы событий и данные и автоматически переподключайтесь при перебоях сети Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Server-Sent Events для однонаправленной потоковой передачи»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. API WebSocket: открытие, сообщение, закрытие и ошибка
  2. Интеграция клиента Socket.io
  3. Server-Sent Events для однонаправленной потоковой передачи
  4. Шаблоны интерфейсов реального времени
← Назад к Frontend Academy