Почему AJAX Isn’ т Достаточно

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

Использование AJAX, мы можем назвать конкретные процедуры на сервере и обновить страницу, основанную на возвращаемых значений, давая наши приложения быстро интерактивные .

Что AJAX звонки не покрывают обновлений с сервера, которые необходимы для современного реального времени и совместной Web.Это необходимо для обновления охватывает случаи использования, начиная от нескольких пользователей совместно редактирования документа в уведомлении о потенциально миллионы читателей информационного сайта, который был забит этот гол в матче Кубка мира.Другой образец сообщений, в дополнение к запросу реакцию AJAX, необходимо — тот, который работает в любом масштабе.PubSub (как в “публикации и подписки”) является отработанной схеме обмена сообщениями, которая достигает этой .

В этой статье мы будем смотреть на точно, как PubSub решает проблему обновления, и мы будем смотреть на одно частное решение ( WAMP protocol 1 ), которая объединяет как призваниепроцедуры на сервере и PubSub в единый API .

Что AJAX Solved

Перед AJAX, интерактивность на веб-страницах было ужасно неуклюжим.Любое взаимодействие пользователя не требуется обновленная версия страницы, которые будут созданы на сервере, направляются в браузере и предоставляется здесь.В этой модели, фундаментальная единица взаимодействия была страница.Независимо от браузера отправляется на сервер, независимо от того, насколько мал требуется обновление, результат не всегда был полный новая страница.Это было расточительно как проводной, так трафика и ресурсов сервера, и это было медленным и болезненным для пользователя .

AJAX 2 сломал эту работу, granularizing вещи: теперь Вы можете передавать данные, получить только результат взаимодействия, вызванного его, а затем обновлять соответствующие части страницы, основанные на этой ответ,С помощью AJAX мы пошли от одного обобщенного вызова (“Дайте мне новую страницу”) нескольким взаимодействия конкретных вызовов.С помощью AJAX мы имели удаленная процедура calls 3 (RPC) на сервере .

Рассмотрим следующий простой пример веб-приложения для голосования стало возможным благодаря следующим образом:

Screenshot of votes demo: banana, chocolate and lemon flavors offered as choices to vote for by pressing a button, plus the possibility to trigger a vote reset. 4
Чтоаромат вам больше всего нравится?(Изображение: Tavendo 17 8 5 ) ( Просмотр большой version 6 )

Пользователь может голосовать за любого из трех мороженого вкусов на предложение .

Использование AJAX, нажал голосование может привести к чему-то вроде этого:

var xhr = new XMLHttpRequest();
xhr.open('get', 'send-vote-data.php');

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      if(xhr.status === 200) {

      // Update vote count based on call result
      } else{
         alert('Error: '+xhr.status); // An error occurred during the request
      }
   }
}

Мы бы тогда изменить только подсчет голосов на вкус голосовал за пользователем, в соответствии с возвращения вызова AJAX.Мы перешли от оказания всю страницу, чтобы обновить один элемент DOM .

Это означает, намного меньше для сервера, чтобы сделать, и меньше трафика по проводам.Мы получаем подсчет голосов вместо полного страницы.Самое главное, что позволяет скорейшего обновления интерфейса, что значительно улучшает пользовательский опыт .

Что остается Unsolved

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

Это потому, что AJAX позволяет обновлять страницы только в ответ на действия пользователя на page.Это не решает проблему обновлений, поступающих от сервера.Она не предлагает способ делать то, что нам действительно нужно здесь: для доставки информации от сервера к браузеру.Нам нужен дополнительный шаблон обмена сообщениями, который посылает обновления клиента без пользователь (или код клиента), чтобы постоянно просить их .

7
В многопользовательских приложений, распространение обновлений занимает центральное место в функциональности.(Изображение: Tavendo 17 8 5 ) ( Просмотр большой version 9 )

PubSub: Обновления от одного до Many

Отработанная схема обмена сообщениями для обработки обновления многих клиентов PubSub 10 .Здесь клиент объявит интерес к теме (“подписаться”) с центральной брокера.Когда клиент посылает событие для темы брокеру (“Опубликовать”), брокер распространять это событие для всех подключенных в данный момент и подписанным клиентам .

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

Многочисленные реализации PubSub доступны на выбор, в зависимости от того, что фоновые и интерфейсные рамки, библиотеки и языки, которые вы используете.Например, для Node.js или Ruby, вы можете использовать что-то вроде Faye 11 .Если вы не хотите, чтобы запустить свой собственный брокера, веб-сервисы, такие как Pusher 12 пройдет функциональность для вас .

Два шаблонов сообщений, две технологии

Это не трудно найти технологию PubSub, что отвечает потребностям конкретного приложения или веб-сайт.Но даже для простой как наш голосования демо, мы видели, что вам нужно как RPC и PubSub — нужно отправлять и данные запроса, а также получать автоматические обновления.С любым из чистых растворов PubSub, вы должны использовать две различные технологии для обмена сообщениями вашего приложения: AJAX и PubSub .

Это явно имеет некоторые недостатки:

  • Вы должны создать две высокотехнологичные стеки, включая, возможно двумя серверами, и держать их обновления и запуска .
  • Приложение должно отдельные соединения для двух шаблонов сообщений, требующих больше ресурсов сервера.Эти два соединения также как требовать их аутентификацию и авторизацию, увеличивая сложность реализации и с этим, места для ошибок .
  • На сервере, вам нужно будет объединить две технологии стеки в свой однократного применения, координации между двумя .
  • Для фронтальных разработчиков, проблемы схожи: создание и обработка два соединения и дело с двумя отдельными интерфейсы .

WAMP: RPC И PubSub

Web Application Messaging Protocol 13 (WAMP) решает недостатки выше за счет интеграции как RPC и PubSub в одном протоколе.У вас один: библиотека, одно соединение и один API.Она будет обрабатывать все сообщениями вашего приложения между передней браузеру конца и вернуть приложение назадв конечном .

WAMP является открытым протоколом, и он имеет с открытым исходным кодом реализации JavaScript ( Autobahn | JS 22 14 ), которая работает как в браузере, а в узле.js, что позволяет сделать чисто JavaScript-только приложения.Существуют реализации с открытым исходным кодом для другой languages 15 , так что вы можете использовать PHP, Java, Python или Erlang, а также наличие на сервере (и список языков будет расти).

Diagram of WAMP clients in multiple supported languages connected to a WAMP router. 16
С WAMP, вы можете выкладывать функциональность приложения на нескольких языках.(Изображение: Tavendo 17 8 5 ) ( Просмотр большой version 18 )

Эти другие языки не ограничивается задней части — Вы также можете использовать библиотеки WAMP для родных клиентов, что позволяет веб-и родных клиентов быть смешаны с использованием того же протокола.Библиотека C, например, хорошо подходят для работы компоненты WAMP на ограниченных ресурсов встраиваемых устройств — мозговые датчики в интернет Things 19 приложений .

WAMP соединения устанавливаются не с браузера на заднем конце, но с маршрутизатором WAMP, который делает рассылки сообщений.Он обрабатывает роль брокера для PubSub, так что ваш сервер просто публикует к маршрутизатору, и это обрабатывает распределение события всем подписчикам.Для RPCs, передний конец выдает вызов для удаленной процедуры к маршрутизатору, и это направляет его в задней части, которая не зарегистрировано процедуру.Затем он возвращает результат в задней части для вызывающего абонента.Это отделяет передние концы и обратно заканчивается так же, как с PubSub.Вы можете распределить свою функциональность через несколько экземпляров фоновых без переднего конца нужно знать о существовании какого-либо из них .

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

Мы будем смотреть на то, как решить проблему обновления НАШ ОПРОС приложение, используя WAMP, и мы увидим, как именно WAMP обр …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.