Web chat using Strophe and Openfire

XMPP is now widely used to implement messaging and presence services. Popular applications and services such as Google Voice, Google Talk, Jabber etc are based on it. Openfire is one really popular cross-platform Java server infrastructure for XMPP. On the client side there is an increasing trend towards applications done in HTML and JavaScript. There now exist some pure JavaScript client libraries such as Strophe that support this trend. These work with the HTTP binding provided by Openfire based on BOSH.

In this post I explain how I setup a simple chat application called trophyim to run with Openfire. I’ll use Apache httpd along the way to proxy access to the http binding service provided by Openfire, to get around cross-origin errors. Openfire should soon implement W3C CORS support so we don’t need to proxy HTTP requests.

Obtain and build Strophe

Download Strophe from github. Build it using make (I usually have a Linux VM around for such occasions).

Setup Openfire and Apache httpd

Download and setup Openfire (version 3.7.0 used here) and Apache httpd. Openfire provides a web browser based administration console at port 9090 (e.g. http://localhost:9090) that you can use to add users. The BOSH based http binding service runs at port 7070. A Strophe connection needs to be opened to url http://localhost:7070/http-bind/.

Setup trophyim

Obtain trophyim (version 0.3 used here) provide access to it through Apache httpd, I’ll assume that accessing http://localhost/trophyim.0.3/index.html from the browser runs the chat client. Copy strophe.js to a folder called strophejs within trophyim. You’ll need to change the variable TROPHYIM_BOSH_SERVICE in the trophyim.js file to http://localhost:7070/http-bind/.

Direct access to that URL from the chat client will result in a cross-origin request, this fails in most browsers. In Chrome you should see a message such as:

XMLHttpRequest cannot load http://localhost:7070/http-bind/.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Change the TROPHYIM_BOSH_SERVICE variable to http://localhost/bosh. We’ll now configure Apache httpd to proxy that URL to http://localhost:7070/http-bind/.

Configure Apache httpd as a proxy

Edit conf/httpd.conf located in the Apache httpd installation folder. Uncomment the following lines (remove #):

LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_connect_module modules/mod_proxy_connect.so

LoadModule proxy_http_module modules/mod_proxy_http.so

Include conf/extra/httpd-vhosts.conf

Next, edit conf/extra/httpd-vhosts.conf. Remove any stray VirtualHost directives there and add:

    ProxyPass /bosh http://localhost:7070/http-bind/
    ProxyPassReverse /bosh http://localhost:7070/http-bind/

Restart Apache httpd and reload page http://localhost/trophyim.0.3/index.html. You should now have a running chat client. Log in. Run another instance of the chat client and log in with a different user. If both users are buddies you should be able to chat.

Happy chatting!


28 thoughts on “Web chat using Strophe and Openfire

  1. We need someone who can help to integrate & write a thin client similar to Facebook or Gmail with Openfire & JSJAC libarary. Front end should be JAVASCRIPT based ( No POPUP BLOCKER ). Curently the Openfie & JSJAC libary is connecting however messages are not flowing & Online status & multiple session needs to be enabled. It should be quite quick similar like Facebook or Gmail

  2. Thanks Devendra.

    This is working. especially i am facing cross browser issue. server redirection suggested by you worked for me. this saved my time and energy.

    Great work.

    1. Hi Ranjit, What do you see at the Javascript console of the browser? If you use Chrome you can use the Ctrl+Shift+I key combination to invoke the developer tools. Then head over to the Console tab…

        1. Hi Ranjit, enable logging and see what appears in the log. It may be as simple as failure to authenticate the specified JID. It works with Chrome 14 without any hitch.

    1. Not showing any list could mean the buddy list is empty. You can add users and contacts using the admin console of Openfire.

      What do you observe when you say http://localhost:7070/http-bind/ does not work? Does the JavaScript console of your browser show any messages? You can also enable logging when you log in using trophyim.

      Kind Regards

      1. I have created some users at the admin console of openfire but still it does not show any users on the chat window. But chatwindow is able to open with no users.
        As suggested by you I have Changed the TROPHYIM_BOSH_SERVICE variable to http://localhost/bosh and configure to proxy url http://localhost:7070/http-bind/.

        when I do TROPHYIM_BOSH_SERVICE = ‘http://localhost/bosh’ it is not working but
        when I do TROPHYIM_BOSH_SERVICE = ‘http://bosh.metajack.im:5280/xmpp-httpbind’ it is working fine.

        Also I am getting the below error when hit this on browser http://localhost:7070/http-bind/
        HTTP ERROR 400

        Problem accessing /http-bind/. Reason:

        Bad Request

        Powered by Jetty://

        1. http://localhost:7070/http-bind/ is not meant to be accessed directly from the browser. If the proxy is setup correctly the chat client should work. Do you see any errors in the JavaScript console of the browser? Have you tried enabling logging when you log in with trophyim?

  3. It is now working fine but I do not why it is taking time to show his name on the chat window list when a users try to login first time

  4. Hi Devendra,

    I am facing an issue while doing one to one chat using xmpp. xmpp is not always updated with new incoming messages.


  5. hey,
    can you please advise on below – unable to log in into web portal?
    logs –

    Strophe is connecting.
    _connect_cb was called
    SASL authentication succeeded.
    Strophe is connected.
    no requests during idle cycle, sending blank request
    request id 7.1 error 502 happened
    request errored, status: 502, number of errors: 1
    Request 7 timed out, over 70 seconds since last activity
    Strophe failed to connect.
    JSONStore open failed.
    Strophe is disconnecting.
    Disconnect was called because: undefined
    _sendTerminate was called
    request errored, status: 404, number of errors: 1
    _onDisconnectTimeout was called
    _doDisconnect was called
    Strophe is disconnected.
    JSONStore open failed.

  6. Hii awesome tutorial. love it. can you please give me more tutorial link of chatting functionality like image sharing, smiley and other stuff

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s