Большое объявление!
Я начал свой ежедневный путь обучения проектированию интерфейсных систем. И я буду делиться идеями из каждого модуля в блогах. Итак, вот начало, и впереди еще много всего!

В этом блоге мы рассмотрим различные механизмы получения данных, необходимые для проектирования интерфейсной системы, включая короткий опрос, длинный опрос, WebSockets, события, отправленные сервером (SSE) и веб-перехватчики. Каждый метод направлен на конкретные потребности в доставке данных на клиент и сервер и обратно, и их понимание имеет решающее значение для разработки масштабируемых веб-приложений, работающих в режиме реального времени.

1. Короткий опрос

Короткий опрос — это метод, при котором клиент повторно через регулярные промежутки времени отправляет запросы на сервер для проверки наличия обновлений.

setInterval(async () => {
  const response = await fetch('/api/get-posts');
  const data = await response.json();
  // Update UI with new data
}, 5000); // Poll every 5 seconds

• Короткое живое общение
• Данные не сохраняются
• Меньше полезности ресурсов
• Нагрузка сервера из-за повторных запросов
• Повышение использования полосы пропускания

Например, тикер фондового рынка, ленты социальных сетей

2. Длинный опрос

Длинный опрос — это усовершенствование короткого опроса, при котором клиент отправляет запрос, а сервер удерживает соединение открытым до тех пор, пока не появятся новые данные для возврата.

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

Клиентская сторона

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error, let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

• Одно долговременное соединение
• Предоставляет обновления в режиме реального времени с меньшим количеством запросов, чем при коротком опросе.
• Уменьшает ненужную передачу данных при отсутствии обновлений.
• Соединение может оставаться открытым в течение длительного времени, что увеличивает нагрузку на сервер.

Например, чаты поддержки клиентов

3. Веб-сокеты

WebSockets обеспечивают полнодуплексную связь между клиентом и сервером, что делает его наиболее эффективным методом передачи данных в реальном времени.

Клиент открывает соединение WebSocket с сервером, и клиент и сервер могут отправлять сообщения друг другу через это единственное соединение.

webSocket = new WebSocket(url, protocols);

// Send message
webSocket.send("Here's some text that the server is urgently awaiting!");

// Receive message
webSocket.onmessage = (event) => {
  console.log(event.data);
};

• Непрерывная двусторонняя связь
• Несколько библиотек для реализации — ws, socket.io и т. д.
• Эффективно для частого обновления с низкими накладными расходами
• Задачи - поддерживать связь с 1 сервером, обрабатывать сбои и масштабирование, занимает ресурсы.

Например, приложения для живого чата, многопользовательские онлайн-игры

4. События, отправленные сервером (SSE)

SSE обеспечивает однонаправленный поток обновлений от сервера к клиенту через HTTP-соединение.

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};

• Да здравствует однонаправленное общение
• Одно HTTP-соединение
• Проблемы — использование ресурсов, совместимость браузера и поведение на неактивных вкладках

Например – ленты, уведомления

5. Вебхуки

Вебхуки — это механизм связи между серверами, при котором сервер отправляет данные на заранее определенный URL-адрес при возникновении события. Клиенту не нужно постоянно проверять сервер на наличие обновлений.

Популярно используется для запуска действий между системами, таких как уведомления о платежах, события GitHub или интеграция сторонних сервисов.

Заключение

Выбор правильного метода связи зависит от требований вашего приложения. WebSockets и SSE идеально подходят для передачи данных в режиме реального времени и потоковой передачи, а длительный опрос обеспечивает баланс между производительностью и простотой использования. Короткий опрос — это простое решение для нечастых обновлений, но оно может быть ресурсоемким, а веб-перехватчики идеально подходят для межсерверных уведомлений.

Каждая техника имеет свои преимущества и ограничения. Понимание этого может помочь вам принимать обоснованные решения для создания эффективных и адаптивных веб-приложений.

Этот блог открыт для предложений и обсуждений!