INT 21h

• 🏠 ДОМОЙ
• Админство
• Програмство
• Электронство
• Микроскопство
• Мой софт
• 3D печать
• Авто
• Музей
• Часы

Подключаем Jabber клиент converse.js к сайту

№ 7052 В разделах: Programming Sysadmin от April 6th, 2015,
В подшивках: Jabber, Javascript

Допустим у вас небольшой сайт вашего местного сообщества и ваш домен привязан к Яндексу и возможно даже настроили общий список пользователей домена для Jabber пользователей. Вы хотите прикрутить небольшой Jabber клиент к сайту чтобы стимулировать общение и регистрации. Для этого отлично подходит веб клиент Converse.JS.

Установите из репозитория пакеты git, python и python-twisted. Далее переходим в /usr/local/bin (или куда вам удобней) и клонируем репозиторий punjab

git clone https://github.com/twonds/punjab.git
cd punjab
python setup.py install

Там же есть файл punjab.tac. В нем при необходимости можно заменить порт на другой.

internet.TCPServer(5280, site).setServiceParent(application)

В конфиге nginx необходимо добавить новый location

        location ~ ^/http-bind/ {
            proxy_pass http://localhost:5280;
        }

Если у вас apache замените его уже на nginx 🙂 Ладно, ладно, вот конфиг для него:

<IfModule proxy_module>
    ProxyRequests Off
    ProxyPass /http-bind http://localhost:5280/http-bind
    ProxyPassReverse /http-bind http://localhost:5280/http-bind
</IfModule>

Запуск BOSH и рестарт nginx:

twistd -y ./punjab.tac
/etc/init.d/nginx reload

Очень полезно добавить запуск punjab в init скрипт и стартовать при запуске системы, а не руками.

Теперь нужно забрать непосредственно сам Jabber клиент в директорию с сайтом
git clone https://github.com/jcbrand/converse.js.git

Чтобы чудо случилось нужно в заголовок страницы добавить несколько строк, подключающих скрипты:

<link type="text/css" rel="stylesheet" media="screen" href="/converse.js/css/converse.min.css" />
<![if gte IE 9]>
    <script src="/converse.js/builds/converse.website.min.js"></script>
<![endif]>
<!--[if lt IE 9]>
    <script src="/converse.js/builds/converse.website-no-otr.min.js"></script>
<![endif]-->

И чуть чуть в конце конфигурацию и инициализацию где-нибудь между </body> и </html>:

<script>
    require(['converse'], function (converse) {
        (function () {
            var $ = converse.env.jQuery;
            $(window).scroll(function() {
                if ($(".navbar").offset().top > 50) {
                    $(".navbar-fixed-top").addClass("top-nav-collapse");
                } else {
                    $(".navbar-fixed-top").removeClass("top-nav-collapse");
                }
            });
            $('.page-scroll a').bind('click', function(event) {
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 700, 'easeInOutExpo');
                event.preventDefault();
            });
        })();
        converse.initialize({
            bosh_service_url: 'http://myserver.com/http-bind/',
            i18n: locales['ru'], 
            keepalive: true,
            message_carbons: true,
            play_sounds: true,
            roster_groups: true,
            show_controlbox_by_default: true,
            xhr_user_search: false
        });
    });
</script>

Шрифт также можно изменить на любимый. Например, подгрузив из Google Fonts и положив его в стиль converse.js:

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

<style>

#conversejs {font-family: "Roboto Condensed"; }

Вот и все 🙂

Нет комментариев »