Jabber chat on webpage

After reading the post on Habré about the online chat for the site through Jabber , I wondered how it works and how you can do this yourself, without ready-made applications. As a result, I got a very simple “chat for site through jabber” template. Unfortunately, I do not have a dedicated server with Linux for tests, so a local computer with Win7 (and Apache server) was used.

How it should work at all: the user enters the site, and sees a window where you can talk. After the user has sent a message, it arrives at the specified jabber account. The recipient of this message can write a response and it will come to the site visitor.
What you need for this:

• Jabber server, it is possible public, it is possible local. I chose Openfire and installed it locally. The server should support Bosh - XEP-0124: Bidirectional-streams Over Synchronous HTTP , more on that later.
• JS library that will implement the jabber client on the site. I took Strophe. This is a fairly low-level library, in which there are no functions like "Send a Message (To, Text)". To achieve the necessary actions, you need to manually compile commands to the jabber server (in XML). Convenient tools for creating XML in Strophe is :)

BOSH

JS does not know how to create TCP connections with another server / client, which is necessary to implement a jabber client. JS can only send HTTP requests. Therefore, we need a special mechanism that will allow working with TCP connections via HTTP. This is BOSH.

By default, BOSH is enabled in Openfire and has an address localhost:7070/http-bind localhost:7070/http-bind . But if you specify this address when connecting, nothing comes out. The problem is well described here , what would work is to write a redirect for Apache and uncomment the proxy_module and proxy_http_module modules:
')
httpd.conf:

  ProxyRequests Off
 ProxyPass / http-bind http://127.0.0.1:7070/http-bind/
 ProxyPassReverse / http-bind http://127.0.0.1:7070/http-bind/ 

Chat on site

So, everything is very simple, we install Openfire, create a user, for example, site, and create a test page (I took the stanphic example of echobot as a basis). On the page there is a field where the user writes his message, and a field with a chat history.

We write the page loading handler, which will be logged on to the jabber server:

  $ (function () {
     connection = new Strophe.Connection ('/ http-bind');
     connection.connect ('site @ r1c', 'site', onConnect);
 }); 

In the onConnect handler, we add a “listener” to events related to the arrival of messages (in the case of a successful login):

  function onConnect (status) {
     if (status == Strophe.Status.CONNECTING) {
         log ('Strophe is connecting.');
     }
     else if (status == Strophe.Status.CONNFAIL) {
         log ('Strophe failed to connect.');
     }
     else if (status == Strophe.Status.DISCONNECTING) {
         log ('Strophe is disconnecting.');
     }
     else if (status == Strophe.Status.DISCONNECTED) {
         log ('Strophe is disconnected.');
     }
     else if (status == Strophe.Status.CONNECTED) {
         log ('Strophe is connected,' + connection.jid);
        
         connection.addHandler (onMessage, null, 'message', null, null, null);
         connection.send ($ pres (). tree ());
     }
 } 

The onMessage handler comes with XML data. We analyze them to find out the text of the message, who the sender, etc .:

  function onMessage (msg) {
     var to = msg.getAttribute ('to');
     var from = msg.getAttribute ('from');
     var type = msg.getAttribute ('type');
     var elems = msg.getElementsByTagName ('body');

     if (type == "chat" && elems.length> 0) {
         var body = elems [0];
    
         AddText (Strophe.getText (body), 'in');
     }

     // we have to keep the handler alive.  
     // returning it’s finishes.
     return true;
 } 

The submit button handler generates XML with the necessary data and asks Strophe to send it. The admin user is used as host:

  function Send (message) {
     var msg = $ msg ({to: 'admin @ r1c', from: connection.jid, type: 'chat'}). c ('body'). t (document.URL + '\ n' + message);
     connection.send (msg.tree ());
    
     AddText (message, 'out');
     $ ('input # message'). val ('');
 } 

Total

The result was a very simple sketch that allows you to chat on jabber via a web page. I was interested to know how it works in principle, so I did not dig further. Something tells me there are a lot of pitfalls there :)

You can come up with a lot of improvements. For example:

• Normal chat interface on the site :)
• Automatic registration of new users on the jabber server, if necessary. For this, you can use In-band registration - registration via XML jabber commands, and not via the web interface.
• Saving chat status when switching between different pages of the site
• Saving chat history on server
• etc.