Въведение

В областта на уеб разработката комуникацията в реално време и динамичните актуализации са основни компоненти за създаване на интерактивни и ангажиращи потребителски изживявания. Техниките за асинхронна комуникация играят основна роля за постигането на това, позволявайки извличането на данни от сървърите, без да блокира потребителския интерфейс. В JavaScript три общи подхода за асинхронна комуникация са дълго анкетиране, кратко анкетиране и редовно анкетиране. Всеки метод има своите предимства и съображения, отговарящи на различни случаи на употреба и изисквания.

Дълго гласуване. В очакване на подходящия момент

Дългото анкетиране е метод, който улеснява актуализациите в реално време чрез поддържане на отворена връзка между клиента и сървъра. За разлика от традиционните механизми за заявка-отговор, при които клиентът периодично отправя запитване към сървъра за нови данни, дългото запитване поддържа връзката отворена, докато не е налична нова информация или изтече време. Сървърът отговаря веднага щом новите данни са готови, а клиентът незабавно изпраща друга заявка, като по този начин създава цикъл на непрекъсната комуникация.

При тази техника сървърът държи заявката на клиента отворена, по същество „изчаквайки“ подходящия момент за отговор. Този подход минимизира забавянето между възникването на събитие и получаването на актуализацията от клиента. Това обаче може също да натовари ресурсите на сървъра поради големия брой отворени връзки.

Пример за код:

function longPolling() {
    fetch('/long-polling-endpoint')
        .then(response => response.json())
        .then(data => {
            // Process the received data
            console.log('Received:', data);

            // Initiate the next long polling request
            longPolling();
        })
        .catch(error => {
            console.error('Error:', error);

            // Retry the long polling request after a delay
            setTimeout(longPolling, 1000); // Retry after 1 second
        });
}

// Start the long polling process
longPolling();

Кратко гласуване. Чести настаняване

Краткото запитване е по-проста форма на асинхронна комуникация, при която клиентът изпраща периодични заявки към сървъра на фиксирани интервали, като проверява за актуализации. Този метод е по-малко ефективен в сравнение с дългото запитване, тъй като често води до чести ненужни заявки. Дори ако няма налични нови данни, клиентът продължава да изпраща заявки, потенциално причинявайки увеличаване на мрежовия трафик и натоварването на сървъра.

Краткото анкетиране може да е подходящо за сценарии, при които актуализациите почти в реално време не са критични и компромисът между ефективност и простота е приемлив.

Пример за код:

function shortPolling() {
    setInterval(() => {
        fetch('/short-polling-endpoint')
            .then(response => response.json())
            .then(data => {
                // Process the received data
                console.log('Received:', data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }, 5000); // Poll every 5 seconds
}

// Start the short polling process
shortPolling();

Редовно гласуване. Балансиран подход

Редовното анкетиране, понякога наричано „обичайно изтегляне“, постига баланс между дълго и кратко анкетиране. Това включва изпращане на заявки до сървъра на предварително определени интервали, подобно на кратко запитване, но без прекомерната честота. Този подход признава значението на поддържането на актуализация, като същевременно намалява напрежението както върху клиентските, така и върху сървърните ресурси.

Редовното анкетиране може да бъде подходящ избор, когато са желани актуализации в реално време, но постоянната комуникация напред-назад при кратко анкетиране не е ефективна.

Пример за код:

function regularPolling() {
    setInterval(() => {
        fetch('/regular-polling-endpoint')
            .then(response => response.json())
            .then(data => {
                // Process the received data
                console.log('Received:', data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }, 10000); // Poll every 10 seconds
}

// Start the regular polling process
regularPolling();

Изследване на изходния код

За да получите цялостно разбиране, разгледайте пълния изходен код, наличен в GitHub. Потопете се в внедряването на модела на съставен компонент и го персонализирайте за вашите проекти.

Посетете хранилището на GitHub: Хранилище на GitHub

Заключение

Техниките за асинхронна комуникация като дълго анкетиране, кратко анкетиране и редовно анкетиране дават възможност на уеб разработчиците да създават динамични изживявания в реално време за потребителите. Всеки подход идва със собствен набор от предимства и съображения, отговарящи на изискванията на различните приложения. Дългото анкетиране предлага минимално забавяне, но потенциално натоварва ресурсите на сървъра, краткото анкетиране осигурява чести актуализации за сметка на ефективността, докато редовното анкетиране балансира необходимостта от навременни актуализации и управление на ресурсите. Като разбират тези техники и техните нюанси, разработчиците могат да вземат информирани решения за подобряване на потребителското изживяване и ефективността на своите уеб приложения.

Благодаря за четенето

  • 👏 Моля, пляскайте за историята и ме последвайте 👉
  • 📰 Вижте още решения и съвети за практическа употреба в работата тук
  • 🔔 Последвайте ме: LinkedIn | GitHub

Благодарим ви, че прочетохте до края. Моля, обмислете следването на писателя и тази публикация. Посетете Stackademic, за да разберете повече за това как демократизираме безплатното обучение по програмиране по света.