Работа по протоколу XMPP используя jquery



    Доброго времени суток!
    Этот небольшой обзор, я бы хотел посвятить насущной для некоторых разработчиков проблеме по работе с jabber сервером через long polling соединение по протоколу BOSH.

    Сначала был лишь сервер

    Мы имеем:
    • Настроенный и сконфигурированный jabber сервер, работающий на OpenFire.
    • nginx сервер, с модулем proxy
    • Последний релиз фреймворка jQuery


    Начнем с конфигурирования нашего nginx сервера. Для этого откроем конфигурацию и для адреса example.local/http-bind пропишем следующие правила:

    location /http-bind/ {
    		    proxy_pass http://openfire.jabber.server:7070; #Проксировать будем на порт 7070;
    		    proxy_buffering off; #Отключим буфферизацию;
    		    proxy_read_timeout 100s; #Установим таймаут для ожидания;
    		    tcp_nodelay on; 
    }
    

    Вполне возможно, что данная конфигурация не совсем корректна, но она работает.

    Таким образом, мы будем транслировать все потоки с нашего проекта на любой доступный jabber сервер.

    Инструменты

    Рассматривая уже существующие предложения по работе с XMPP, взгляд пал на плагин обладающий необходимыми для меня характеристиками:
    • Соединение с сервером;
    • Отправление сообщения;
    • Получение статуса (typing);
    • Установка статуса клиента;
    • Работа с групповыми чатами;


    На страничке разработчика, есть замечательный и к тому же показательный пример, который демонстрирует создание стандартного диалога чата.
    <html>
    	<head>
    		<title>Basic connection</title>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    		<script type="text/javascript" src="https://raw.github.com/Marko-M/jQuery-XMPP-plugin/master/jquery.xmpp.js"></script>		
    		<script type="text/javascript" >
    		$(document).ready(function(){
    			$("#connectBut").click(function(){
    				var jid = $("#jid").val();
    				var password = $("#pass").val();
    				var logContainer = $("#log");
    				var contactList = $("#contacts");
    
    				//An example of bosh server. This site is working but it can change or go down.
    				//If you are going to have a production site, you must install your own BOSH server
    				var url ="http://bosh.metajack.im:5280/xmpp-httpbind";
    				$.xmpp.connect({url:url, jid: jid, password: password,
    					onConnect: function(){
    						logContainer.html("Connected");
    						$.xmpp.setPresence(null);
    					},
    					onPresence: function(presence){
    
    						var contact = $("<li>");
    						contact.append("<a href='javascript:void(0)'>"+ presence.from +"</a>");
    						contact.find("a").click(function(){
    								var id = MD5.hexdigest(presence.from);
    								var conversation = $("#"+id);
    								if(conversation.length == 0)
    									openChat({to:presence.from});
    						});
    						contactList.append(contact);
    					},
    					onDisconnect: function(){
    						logContainer.html("Disconnected");
    					},
    					onMessage: function(message){
    
    						var jid = message.from.split("/");
    						var id = MD5.hexdigest(message.from);
    						var conversation = $("#"+id);
    						if(conversation.length == 0){
    							openChat({to:message.from});
    						}
    						conversation = $("#"+id);
    						conversation.find(".conversation").append("<div>"+ jid[0] +": "+ message.body +"</div>");
    					},onError:function(error){
    						alert(error.error);
    					}
    				});		
    			});
    
    			$("#disconnectBut").click(function(){
    				$.xmpp.disconnect();
    			});
    
    		});
    
    
    		function openChat(options){
    			var id = MD5.hexdigest(options.to);
    
    			var chat = $("<div style='border: 1px solid #000000; float:left' id='"+id+"'><div style='border: 1px solid #000000;'>Chat with "+options.to+"</div><div style='height:150px;overflow: auto;' class='conversation'></div><div><input type='text' /><button>Send</button></div></div>");
    			var input = chat.find("input");
    			var sendBut = chat.find("button");
    			var conversation = chat.find(".conversation");
    			sendBut.click(function(){
    				$.xmpp.sendMessage({to:options.to, body: input.val()});
    				conversation.append("<div>"+ $.xmpp.jid +": "+ input.val() +"</div>");
    				input.val("");
    			});
    			$("body").append(chat);
    		}
    
    		</script>		
    	</head>
    	<body>
    		This example just connect notify when connected and show the connected contacts.
    		<br>
    		Jid <input type="text" id="jid"> (ej: maxpowel@gmail.com, alvaro.maxpowel@chat.facebook.com)
    		<br>
    		Password <input type="password" id="pass">
    		<br>
    		<button id="connectBut">Connect</button>
    		<button id="disconnectBut">Disconnect</button>
    		<br>
    		<div id="log">
    		</div>
    		<ul id="contacts">
    		</ul>
    	</body>
    </html>
    


    Далее дело вашей фантазии. Успехов!
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 16

      +2
      Странно было увидеть Openfire ибо сейчас очень популярны xmpp-серверы написанные на NodeJS, или знаменитый Ejabberd и догоняющий его Prosody. Про данный jquery-плагин в курсе. Хотелось бы еще посоветовать Candy.
        0
        Подскажите, пожалуйста, популярные xmpp серверы на node.js. Что-то не смог нагуглить.
          0
          Их на github очень много, поищите. Да и вконтакте как-то обещались выложить в опенсорс исходники своего xmpp-сервера на NodeJS. Вообще я имел ввиду не какие-то конкретные серверы. А что на разных библиоткех типа node-xmpp много написано всего.
            0
            Про вконтактовский XMPP сервер, это действительно так?
              0
              Да, его писал Олег Илларионов, в конкурсе на разработку десктопного мессенджера они упоминали что их сервер написан на NodeJS и они его собираются выложить в опенсорс.
              Позже я списывался с Илларионовым и он сообщил что ему некогда привести его в порядок, куча других дел итд… Вобщем так и замялось это все.
                0
            0
            У нас на сервере тоже Openfire. Просто мы джаву любим. Приятной неожиданностью оказалось, что в нём совсем несложно подменить систему аутентификации на свою.
              0
              Я тоже люблю в некоторых случаях, особенно если это касается lucene/solr, jenkins итд.

              >Приятной неожиданностью оказалось, что в нём совсем несложно подменить систему аутентификации на свою.
              Вы где-нибудь уже писали статью/заметку на эту тему?
                0
                Нет, не писал. В принципе, кому надо, легко разберётся. Главное преодолеть барьер «а-а-а, придётся в чужом коде копаться!» Там местами непоследовательные интерфейсы, но всё равно с ними легко работать. Единственным подводным камнем было по сути аккуратно использовать JID.escapeNode/unescapeNode.
                0
                У нас он как-то прикручен к AD. да и родной его жаббер клиент, на удивление неплох.
              0
              Мы используем JSJaC, хорошая штука.
                0
                Пару лет назад использовал Strophe для общения js<->xmpp, вдруг кому альтернативы интересны.
                  0
                  Тоже им пользовался, да и Candy чат по ссылке из моего первого коммента именно Strophe и использует.
                  Я пользовался Strophe вместе с django (есть опенсорсный speeqe.com) но я еще пользовал HTTP-Prebind для авторизации. Кстати в самом репозитории Strophe и лежит код для django.
                  0
                  спасибо за статью, но думаю весь html код не обязательно было выкладывать таким большим блоком, достаточно было дать ссылку на песочницу и откомментировать основные моменты
                    0
                    Да вы правы, спасибо за замечание. При написании следующей статьи я обязательно это учту. Первый блин всегда комом.
                      0
                      А я считаю что статья должна быть самодостаточной. По причине того, что ссылки иногда помирают.

                  Only users with full accounts can post comments. Log in, please.