Какие способы асинхронного взаимодействия между Backend и Frontend ты знаешь?

Асинхронное взаимодействие позволяет фронтенду получать данные или уведомления от бэкенда без блокировки интерфейса пользователя и без необходимости постоянного опроса (polling).

Основные технологии:

1. Long Polling (Длинные запросы)

   • Принцип: Фронтенд отправляет запрос. Бэкенд держит его открытым, пока не появится новое событие или не истечет таймаут. Получив ответ, фронтенд сразу отправляет новый запрос.
   • Плюсы: Простая реализация, работает везде.
   • Минусы: Высокая нагрузка на сервер при многих подключениях, задержки из-за таймаутов.
   • Когда использовать: Для простых задач, где WebSockets избыточны или недоступны.

2. Server-Sent Events (SSE)

   • Принцип: Протокол поверх HTTP, позволяющий серверу односторонне отправлять поток событий фронтенду. Фронтенд использует интерфейс EventSource.
   • Плюсы: Стандартный протокол, автоматическое переподключение, эффективнее Long Polling.
   • Минусы: Только от сервера к клиенту (односторонние). Ограничения по количе одновременных соединений в браузере.
   • Пример (бэкенд на Node.js/Express):

     app.get('/stream', (req, res) => {
       res.setHeader('Content-Type', 'text/event-stream');
       res.setHeader('Cache-Control', 'no-cache');
       res.setHeader('Connection', 'keep-alive');
       // Отправляем событие каждые 2 секунды
       const intervalId = setInterval(() => {
         res.write(`data: ${JSON.stringify({ time: new Date().toISOString() })}nn`);
       }, 2000);
       req.on('close', () => clearInterval(intervalId));
     });

   • Пример (фронтенд):

     const eventSource = new EventSource('/stream');
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
       console.log('Получено событие:', data);
     };

3. WebSockets

   • Принцип: Протокол полнодуплексной связи поверх TCP. После установки соединения (handshake) клиент и сервер могут обмениваться сообщениями в реальном времени с минимальными накладными расходами.
   • Плюсы: Двусторонняя связь, низкая задержка, минимальный оверхед после установки соединения.
   • Минусы: Сложнее в реализации и отладке, требует поддержки на сервере и клиенте.
   • Идеально для: Чат-приложений, совместного редактирования, онлайн-игр, биржевых тикеров.

4. GraphQL Subscriptions

   • Принцип: Расширение GraphQL для работы с реальным временем. Использует, как правило, WebSockets или SSE в качестве транспорта для доставки событий от сервера подписанному клиенту.
   • Плюсы: Интеграция с экосистемой GraphQL (типизация, один эндпоинт).
   • Минусы: Специфичен для стека GraphQL.

*Long Polling эмулирует двустороннюю связь через серию запросов.