Centrifuge — так просто, как возможно, но не проще этого

Привет!

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

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

Давайте посмотрим, что нам предлагает Центрифуга:

var centrifuge = new Centrifuge({
    url: ‘http://localhost:8000/connection’,
    token: ‘TOKEN’,
    project: ‘PROJECT_ID’,
    user: ‘USER_ID’
});
 
centrifuge.on(‘connect’, function() {
    centrifuge.subscribe(‘public:comments’, function(message) {
        // message from channel received
    });
});

Вполне легко и просто, правда? Но возможно ли сделать еще проще?

В общем случае, пожалуй, нет. Конец статьи!

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

Многие из вас слышали о Knockout, AngularJS. Одно из средств, применяемых этими библиотеками — вынесение описания логики приложения в html страницы. Задавая атрибуты и их значения, вы можете легко менять поведение на желаемое. Что если воспользоваться html и в нашем случае?

Посмотрим на подключение к Центрифуге. Нужно передать адрес, токен, идентификатор пользователя и идентификатор проекта. Клиентская часть узнает нужные значения от бэкенда. Имена нужных каналов для подписки также передает в шаблон бэкенд. Как сообщить эти данные джаваскрипту?

Рассмотрим самые очевидные варианты. Можно передать эти данные в виде JSON на вход инициализирующей функции. А можно отрендерить данные на веб-странице как атрибуты html-элементов, а затем из кода обращаться к нужным элементам, брать значения их свойств и использовать. И этот второй вариант мне представляется наиболее гибким. Настолько гибким, что подобным образом программист, желающий использовать Центрифугу, может поступать на всех страничках с реал-тайм элементами.

Поэтому, чтобы вам не пришлось писать свою обертку, я написал jQuery плагин centrifuge.dom.js:

<script src="raw.github.com/FZambia/centrifuge/master/javascript/centrifuge.dom.js"></script>

Будучи подключенным, он цепляет данные из отрендеренных на страничке html-элементов, сам создает на их основе подключение к Центрифуге, подписывается на каналы. А когда приходит сообщение — триггерит событие на html-элементе с полученными данными.

Всё что остается вам в данном случае — описать, как будет реагировать веб-страница на полученное сообщение, то есть:

$(‘ #html-element’).on(‘centrifuge.message’, function(message) {
    console.log(message.data);
});

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

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

1) В основном шаблоне инициализируем плагин:

$(function(){
    $.centrifuge_dom({});
});

2) Также в основном шаблоне прописываем постоянные html-элементы с токеном, адресом и идентификаторами:

<div id="centrifuge-address" data—centrifuge—value="{{ centrifuge_address }}"></div>
<div id="centrifuge-token" data—centrifuge—value="{{ centrifuge_token }}"></div>
<div id="centrifuge-user" data—centrifuge—value="{{ centrifuge_user }}"></div>
<div id="centrifuge-project" data—centrifuge—value="{{ centrifuge_project }}"></div>

Здесь используется синтаксис django-шаблонов, данные об адресе, токене, ID юзера и проекта предоставляет бэкенд вашего приложения.

3) На странице с комментариями добавляем html-элемент с именем канала:

<div class="centrifuge" id="comments-handler" data—centrifuge—channel="comments" data—centrifuge—namespace=”public”></div>

4) И на этой же страничке c комментариями добавляем javascript:

$(function() {
    $(‘#comments—handler’).on(‘centrifuge.message’, function(message) {
        $(‘body’).append(message.data);
    });
});

Всё!

Более того, теперь, чтобы добавить новый реал-тайм элемент на любую страницу, вам потребуется выполнить только последние 2 пункта.

Вариант не учитывает возможных ошибок, в некоторых случаях вам и не потребуется их отлавливать. Но в любом случае плагин предоставляет возможность повесить дополнительные обработчики событий на html-элемент, такие как centrifuge.error, centrifuge.disconnect, чтобы должным образом среагировать.

Та ли это идеальная простота, о которой говорил Альберт Эйнштейн (его знаменитый афоризм в основе заголовка данной статьи) — покажет время.

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

Центрифуга доросла до версии 0.3.1.

Теперь для PUB/SUB механизма можно использовать Redis вместо ZeroMQ. А в случае если вам достаточно одного инстанса Центрифуги, то можно обойтись вообще без них.

Можно установить Центрифугу без ненужных вам зависимостей, используя флаги setup.py: --without-zmq, --without-redis, --without-postgresql, --without-mongodb

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

Из раздела “менеджмент проекта” можно публиковать JSON в каналы (для этого используется Ace editor), a также запрашивать presence, history данные канала и отписывать пользователя по ID.

Появилось API для структуры проектов и пространств имен — абсолютно все действия теперь можно выполнять не используя веб-интерфейс.

На этом пока всё, до новых встреч, друзья!