Geekly Articles each Day
📜 ⬆️ ⬇️

XMPP operation using jquery



Good day!
I would like to dedicate this small review to the problem of working with a jabber server, urgent for some developers, through a long polling connection using the BOSH protocol.

At first there was only a server

We have:


Let's start by configuring our nginx server. To do this, open the configuration and for the address example.local / http-bind we write the following rules:
') 
location /http-bind/ { proxy_pass http://openfire.jabber.server:7070; #    7070; proxy_buffering off; # ; proxy_read_timeout 100s; #   ; tcp_nodelay on; }

It is possible that this configuration is not entirely correct, but it works.

Thus, we will broadcast all streams from our project to any available jabber server.

Instruments

Considering the existing proposals for working with XMPP, my gaze fell on a plugin with the necessary characteristics for me:


On the developer page, there is a wonderful and illustrative example that demonstrates the creation of a standard chat dialogue.
 <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>


Next is your imagination. Successes!

Source: https://habr.com/ru/post/147469/

More articles:


All Articles