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

Да ты посмотри, какие технологии понапридумывали, чтобы без этой долбанной перезагрузки страницы всё работало! Раньше, блядь, кликнул — ждёшь, как лох, пока сервер ответит, а теперь — красота, всё летает. Ну, слушай сюда, разжую.

Вот основные способы, как фронт с бэком по-пацански общаются:

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

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

2. Server-Sent Events (SSE)

   • Суть: Тут сервер может в режиме нон-стоп слать данные фронту, а фронт их слушает, ушами хлопает. Но отвечать обратно по этому же каналу — нихуя. Только получать. Используется EventSource.
   • Плюсы: Протокол нормальный, стандартный. Если соединение отвалилось — само переподключится. Эффективнее, чем тот Long Polling.
   • Минусы: Только в одну сторону работает, от сервера к тебе. И браузеры обычно держат не больше 6 таких соединений одновременно на один домен.
   • Вот, смотри, как на бэкенде (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

   • Суть: Это уже серьёзно, полнодуплексная связь. Сначала рукопожатие (handshake), а потом — вайб! — канал открыт, и можно туда-сюда слать сообщения мгновенно, без этих ебучих HTTP-заголовков каждый раз.
   • Плюсы: Общаться можно в обе стороны, задержка — минимальная, после установки соединения оверхед — почти нулевой.
   • Минусы: Реализация и отладка посложнее, нужна поддержка и на сервере, и на клиенте.
   • Идеально для: Чатов, онлайн-игр, биржевых графиков, всего, где нужна скорость и интерактивность.

4. GraphQL Subscriptions

   • Суть: Это такая приблуда для GraphQL, чтобы и в реальном времени данные получать. Под капотом обычно использует те же WebSockets или SSE, чтобы подписанному клиенту события доставлять.
   • Плюсы: Всё в единой стилистике GraphQL — типы, один эндпоинт, красота.
   • Минусы: Только если вся твоя банда сидит на GraphQL, иначе не стоит и начинать.

Короче, табличка для наглядности, а то запомнить эту хуйню:

Выбирай по потребностям, не ошибёшься. Главное — не изобретай велосипед, где можно простым способом обойтись.