Как сделать чтобы не отправялись лишние запросы на Backend при разработке приложения с чатами

1️⃣ Как кратко ответить

Используйте WebSocket для двусторонней связи в реальном времени, чтобы избежать лишних HTTP-запросов. Реализуйте клиентскую логику для объединения и минимизации запросов, применяйте дебаунс и троттлинг для контроля частоты отправки данных.

2️⃣ Подробное объяснение темы

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

WebSocket

WebSocket — это протокол, который позволяет устанавливать постоянное соединение между клиентом и сервером. Это особенно полезно для приложений, требующих обмена данными в реальном времени, таких как чаты.

Как это работает:

1. Установка соединения: Клиент инициирует соединение с сервером через WebSocket. Это одноразовый HTTP-запрос, который затем преобразуется в постоянное соединение.

   const socket = new WebSocket('ws://example.com/chat');
   

   Здесь создается новое WebSocket-соединение с сервером по указанному URL.

2. Двусторонняя связь: После установления соединения клиент и сервер могут обмениваться данными в обоих направлениях без необходимости повторных HTTP-запросов.

   socket.onmessage = function(event) {
       console.log('Message from server ', event.data);
   };
   

   Этот код прослушивает сообщения от сервера и выводит их в консоль.

3. Отправка сообщений: Клиент может отправлять сообщения на сервер через открытое соединение.

   socket.send('Hello Server!');
   

   Здесь клиент отправляет сообщение на сервер.

Дебаунс и троттлинг

Эти техники помогают контролировать частоту отправки запросов на сервер.

• Дебаунс (Debounce): Откладывает выполнение функции до тех пор, пока не прекратится поток вызовов. Полезно для обработки событий, которые происходят часто, например, ввод текста.

  function debounce(func, wait) {
      let timeout;
      return function(...args) {
          const context = this;
          clearTimeout(timeout);
          timeout = setTimeout(() => func.apply(context, args), wait);
      };
  }
  ​
  const sendMessage = debounce((message) => {
      socket.send(message);
  }, 300);
  

  Здесь sendMessage будет вызвана только после того, как пользователь прекратит ввод на 300 миллисекунд.

• Троттлинг (Throttling): Ограничивает количество вызовов функции за определенный период времени. Полезно для событий, которые происходят непрерывно, например, прокрутка.

  function throttle(func, limit) {
      let lastFunc;
      let lastRan;
      return function(...args) {
          const context = this;
          if (!lastRan) {
              func.apply(context, args);
              lastRan = Date.now();
          } else {
              clearTimeout(lastFunc);
              lastFunc = setTimeout(function() {
                  if ((Date.now() - lastRan) >= limit) {
                      func.apply(context, args);
                      lastRan = Date.now();
                  }
              }, limit - (Date.now() - lastRan));
          }
      };
  }
  ​
  const sendMessageThrottled = throttle((message) => {
      socket.send(message);
  }, 1000);
  

  Здесь sendMessageThrottled будет вызываться не чаще, чем раз в секунду.

Объединение запросов

Если необходимо отправить несколько сообщений за короткий промежуток времени, их можно объединить в один запрос.

let messageQueue = [];
​
function sendMessages() {
    if (messageQueue.length > 0) {
        socket.send(JSON.stringify(messageQueue));
        messageQueue = [];
    }
}
​
function queueMessage(message) {
    messageQueue.push(message);
    if (messageQueue.length === 1) {
        setTimeout(sendMessages, 500);
    }
}

В этом примере сообщения добавляются в очередь и отправляются на сервер каждые 500 миллисекунд, если в очереди есть сообщения.

Заключение

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