19
Апр

Многопользовательский чат на WebRTC

Написал Максим Крентовский в Деятельность

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

customLogo

Подробнее →

Комментарии к записи Многопользовательский чат на WebRTC отключены
04
Дек

SlideShare + SoundCloud = слайдкаст

Написал Максим Крентовский в Деятельность

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

Тем не менее, это был и остается весьма простой и незатратный (альтернативное видео весит наверняка больше) способ демонстрации выступлений. Поэтому когда на последней встрече я записал свой доклад про Эрланг, захотелось сделать именно слайдкаст. Поиск альтернатив показал, что все плохо — альтернативы предлагали загрузить в них слайды, а потом начитать презентацию еще раз, сопровождая переключениями между страницами. Можно было бы, конечно, попробовать проиграть записанный звук через петлю, но сидеть и выслушивать доклад целиком и стараться попасть в переключение — так себе удовольствие. Да и лениво.

Поэтому я вспомнил старое доброе слово «mashup», зародившееся на дворе Web2.0 и благополучно там же и похороненное. Это слово обозначало систему, построенную из кучи сторонних сервисов и объединенную клеем в виде javascript-кода для совместной работы. Т.е. если разместить слайды на Slideshare, звук — на Soundcloud и синхронизировать плееры между собой при помощи отметок о переключениях слайдов в нужные моменты времени, можно получить вполне себе годный слайдкаст.

Подробнее →

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

В возвращаемом со стороны сервера кортеже (точнее, списке кортежей, но это на данный момент не играет роли) присутствует идентификатор события в виде поля action. Самый простой и незатейливый способ написать обработчик сообщений при помощи switch/case:

1
2
3
4
5
6
7
8
9
10
$.vico.dispatchMessage = function(p) {
        var res = true;    
        switch(p.action) {
            case('noauth') : {
                                ...
                break;
            }
        }              
        return res;    
    }

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

1
2
3
4
5
6
7
8
$.vico.dispatchMessage = function(p) {
        var re = new RegExp('^[a-z0-9]+$', "g");
       
        if(re.test(p.action)) {
            eval("var fn = $.vico.cb_" + p.action + ";");
            if(fn) return fn(p); else return false;        
        } else return false;
    }

В этом случае для написания обработчика нового события потребуется только добавление новой, специально именованной функции. Поскольку eval потенциально ненадежное средство, кодификатор сообщения проверяется при помощи регулярного выражения (никому веры нет).

Тут в твиттере опытные товарищи напомнили про вариант с массивом, когда обработчик берется из таблички соответствия:

1
2
3
4
var m_cb = new Array();
m_cb["noauth"] = $.vico.cbNoAuth;

if(m_cb[p.action]) m_cb[p.action](p);

Этот вариант не использует потенциально опасный eval, однако требует, чтобы в процессе написания кода обработчика изменения производились в двух точках — в массиве и в самой декларации функции.
Чтобы еще больше усложнить эту процедуру, было решено написать небольшой «класс», позволяющий добавлять/убирать из массива произвольное количество обработчиков события, что позволяет в дальнейшем расширять систему не только вглубь, но и в ширь. 🙂

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function($) {
   
    $.AEvents = function() {
        $.AEvents.map = new Array();
    },
   
    $.AEvents.map = null,

    $.AEvents.bind = function(event, fn) {
        if($.isArray($.AEvents.map[event])) {
            if($.inArray(fn, $.AEvents.map[event]) == -1) {
                $.AEvents.map[event].push(fn);
            }
        } else {
            $.AEvents.map[event] = new Array();
            $.AEvents.map[event].push(fn);
        }
    },
   
    $.AEvents.detach = function(event, fn) {
        if($.isArray($.AEvents.map[event])) {
            var t = new Array();
            $($.AEvents.map[event]).each(function(i, v) {
                if(v != fn) t.push(v);
            })
            $.AEvents.map[event] = t;
        }
    },
   
    $.AEvents.pass = function(event, data) {
        var r = new Array();
       
        if($.AEvents.map)
            $($.AEvents.map[event]).each(function(i, v) { r.push(v(data)); });
        return r;
    }
})(jQuery);

Использовать его тоже несложно:

1
2
3
4
5
6
7
8
9
10
11
$.AEvents();
       
$.AEvents.bind("noauth", $.vico.noAuth);
$.AEvents.bind("authok", $.vico.authPassed);

$.vico.dispatchMessage = function(p) {
        var r = $.AEvents.pass(p.action, p);
       
        if(r && r.length > 0) return true;
        else return false;         
    }

Разумеется, следующий шаг — привнесение в этот класс функционала обмена сообщениями с сервером. В итоге получается что-то (не побоюсь громкого слова) отдаленно напоминающее gen_server в Erlang. 🙂

Следующая страница →