XMPP web chat with ejabberd, Converse.js and Spring MVC

Converse.js is a fine little XMPP web chat client that can easily be used in web applications. It can integrate with various online XMPP services, like Google Talk, MSN etc. In this post I will demonstrate how to use converse.js with ejabberd in a Spring based application. I used Ubuntu linux box to for this demo.

ejabberd is available in main Ubuntu repositories so can be installed by using the following command.

sudo apt-get install ejabberd

The first thing to do is to add an admin user, by adding the following to the /etc/ejabberd/ejabberd.cfg configuration file.

{acl, admin, {user, "admin", "localhost"}}.

Then restart ejabberd

sudo service ejabberd restart

Now register the admin user by entering the following command on the shell prompt.

sudo ejabberdctl register admin localhost password

For more details on ejabberd setup and additional options, follow this tutorial.

[turbo_widget widget-prefix=text&obj-class=WP_Widget_Text&widget-text–title=&widget-text–text=%3C!–+Post+Ad+–%3E%0A%3Cins+class%3D%22adsbygoogle%22%0A+++++style%3D%22display%3Ablock%22%0A+++++data-ad-client%3D%22ca-pub-4433761869744390%22%0A+++++data-ad-slot%3D%229020480262%22%0A+++++data-ad-format%3D%22auto%22%3E%3C%2Fins%3E%0A%3Cscript%3E%0A(adsbygoogle+%3D+window.adsbygoogle+%7C%7C+%5B%5D).push(%7B%7D)%3B%0A%3C%2Fscript%3E&widget-text–filter=false]

Next we enable http binding, which is required because converse.js will communicate with ejabberd using the BOSH protocol. In order to do this look for the 5280 (ejabberd_http) port setup in the configuration file and update it to look like below:

{5280, ejabberd_http, [
         http_bind,
         http_poll,
         web_admin
         ]}

Then add the http_bind module under the modules section, then restart ejabberd.

{mod_http_bind,[]}

Now the XMPP server is setup for this demo. The http binding can be verified by opening the following link in the web browser.

http://localhost:5280/http-bind

Optionally we can also setup Apache/Nginx web server to proxy the http bind requests to ejabberd. If required add something like the following to the web server configuration. This is useful, if ejabberd port 5280 is blocked by the firewall.

    ProxyPass http://localhost:5280/http-bind/
    ProxyPassReverse http://localhost:5280/http-bind/
    Order allow,deny
    Allow from all

Converse.js can now talk to the ejabberd server. The javascript snippet below shows how to use it in the web application.

converse.initialize({
    bosh_service_url: 'http://localhost:5280/http-bind/',
    keepalive: true,
    message_carbons: true,
    play_sounds: true,
    roster_groups: true,
    show_controlbox_by_default: true,
    xhr_user_search: false
 });

This requires login, and also allows registration of new users from the frontend.

ejabberd HTTP Pre-binding

Sometimes it is desirable not to ask the users to login again, if they are already logged on to the parent application. Which means that the parent application should login to ejabberd from the backend, and then attach the ejabberd session to converse.js. This is achieved by something known as “http pre-binding”, which is supported by converse.js. In order to use an existing ejabberd session, created by the parent application, converse.js needs three pieces of information:

JID (ejabberd user id)
SID (ejabberd session id)
RID (request id)

These IDs are obtained by the parent application, after initiating the session, from the backend, by logging on to ejabberd. In the demo, it is done from a custom spring security AuthenticationProvider.

The converse.js javascript snippet below shows how pre-binding is configured on the frontend.

require(['converse'], function (converse) {
    converse.initialize({
        prebind:true,
        prebind_url: 'http://localhost:8080/prebind', // The prebind URL
        bosh_service_url: 'http://localhost:5280/http-bind', // The http bind URL
        jid: 'admin@localhost', // The jabber id of the logged in user
        keepalive: true,
        allow_logout: false,
        allow_registration: false
    });
});

The prebind URL must return the three IDs, mentioned above, in JSON format. More information on prebind_url is available on converse.js homepage.

The complete Spring boot application is available on Github, which covers ejabber authentication and pre-binding.

ejabberd HTTP Pre-binding

1 Comment

Leave a Reply Cancel reply

Related Posts