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

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

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

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

Что AJAX Solved

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

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

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

⁴

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

Использование 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.Это не решает проблему обновлений поступающих от сервера.Это не предлагают способ сделать то, что нам действительно нужно, здесь: для доставки информации от сервера к браузеру.Нам нужна дополнительная модель обмена сообщениями, посылает обновления клиента без пользователь (или код клиента), имеющих постоянно просить их .

⁷

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

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

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

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

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

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

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

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

WAMP: RPC и PubSub

Веб-приложений сообщений Protocol ¹³ (WAMP) решает недостатки выше за счет интеграции и RPC и PubSub в одном протоколе.Вы должны одинбиблиотека, одно соединение и один API.Она будет обрабатывать все сообщениями вашего приложения между передней браузеру конца и применения задней части .

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

¹⁶

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

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

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

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

Обнов …

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

Главная → Программирование → 13.01.2015 by coding.smashingmagazine.com