jqueryを使用したXMPPプロトコル





良い一日!

この短いレビューでは、 BOSHプロトコル使用した長いポーリング接続を介してjabberサーバーで作業する一部の開発者に緊急の問題を捧げたいと思います。



最初はサーバーしかありませんでした


私たちが持っています:





まず、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を使用するための既存の提案を考慮すると、私にとって必要な特性を備えたプラグインに視点が落ちました。





開発者のページには、標準のチャットダイアログの作成を示す素晴らしい説明用の例があります。

 <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>
      
      







次はあなたの想像力です。 頑張って!



All Articles