JAXL BOSH Demo: IM chat client for all WordPress blogs

Have you ever wished of a wordpress plugin capable of providing a facebook style chat bar on your blog post. In this blog post, I will lay down the details of how Jaxl‘s bosh support comes in handy for building such browser based real time application. Specifically, I will explain how I achieved building a plugin for my wordpress blog. If everything goes perfect over next few weeks, this plugin might be submitted in wordpress plugin’s directory.

Jaxl BOSH Support Framework
Jaxl BOSH support comprise of three main parts:

  • jaxl.jquery.js: JQuery extension written for Jaxl bosh support
  • jaxl4bosh.class.php: Connection manager in PHP
  • jaxl UI: Integrated UI framework for changing your application skin on the fly. Your application skin can be a simple facebook style chat bar (as on this page) or chesspark style whole html page

jaxl.jquery.js is responsible for initiating and maintaining a connection between the browser and the PHP connection manager. While jaxl4bosh.class.php implements the BOSH protocol and maintain a persistent connection with the jabber server.

jaxl.jquery.js provide a few basic methods like:

  • jaxl.connect: Call for initiating the connection
  • jaxl.sendMessage: Call for sending a message to other jid’s
  • jaxl.ping: Call to maintain the connection and gather any incoming data
  • jaxl.disconnect: Call for disconnecting

jaxl4bosh.class.php provide wordpress style filter/hooks which can be used to modify every incoming and outgoing messages.

  • jaxl_pre_connect: Call to perform initialization before jaxl connects to jabber server
  • jaxl_post_connect: Call to perform shutdown after jaxl is connected to jabber server
  • jaxl_send_message: Call to perform actions on outgoing messages from jaxl
  • jaxl_recv_message: Call to perform actions on incoming messages to jaxl
  • jaxl_send_presence: Call to perform actions on outgoing presence from jaxl
  • jaxl_recv_presence: Call to perform actions on incoming presence from jaxl
  • jaxl_pre_disconnect: Call to perform initialization before jaxl disconnects to jabber server
  • jaxl_post_disconnect: Call to perform shutdown after jaxl is disconnected to jabber server

Jaxl and WordPress
Using Jaxl bosh support require you to only edit the configuration file. Here are the config variables:

        // JAXL config
        define('JAXL_BOSH_HOST', 'localhost');
        define('JAXL_BOSH_SERVER', 'localhost');
        define('JAXL_BOSH_URL', 'http://localhost:7070/http-bind/');
        define('JAXL_ADMIN_JID', [email protected]');

You can configure Jaxl to use any of the available public xmpp services. However, I choose to host my own jabber server for my blog.

JAXL_ADMIN_JID is the admin jid to which Jaxl should route all incoming messages, added specifically for wordpress related requirement. PHP connection manager can be extended to route different chat sessions to different admins.

jaxl_recv_message handler is used to embed smiley’s and youtube videos by parsing the incoming chat messages.
jaxl-bosh-support-hook-demo-youtube-smiley

A few other hooks like jaxl_post_connect are used to notify JAXL_ADMIN_JID about the newly connected user.

Admin Screen
Below is a screen shot of how an admin desktop will look like while chatting with his site visitors:
Admin-screenshot-jaxl-bosh-support

Let me know if you are having any issues chatting using the chat bar at the bottom of the page. Code and installation might be buggy at times, and would appreciate any help from you on it.

  • A few users reported of some UI bugs (unable to type in a message after connecting). If you happen to experience the same, kindly post your browser version. Thanks.

    (This is tested only on mozilla, chrome and flock)

  • Gulli Baer

    Hi Abhinav,

    i would like to test this wordpress plugin on my own installation. Would it be possible to get it ?

    How can i login to your installation, what information I need to enter into your site to test it ?

    It is a wonderful great idea to develope such a thing, i’ve tried it as well, but no success, each time i reload the page i get the login screen again 🙁

    Thanks
    Gulli

    • Hi Gulli,

      This is just a raw version i must say, where i just focused on getting the basic things right. Yes you loose your session on closing the chat window or on page refresh.

      On server side too, currently openfire throws 403 forbidden error at times, resulting in disconnect of the user. However, seems like it’s a bug somewhere at my end.

      Throwing out this plugin right now, will only end up users complaining about these bugs. So i would rather wait for it to become stable.
      There is no admin panel as of now. Most of the admin commands are issued through IM itself using secret keys.

    • Gulli Baer

      OK thanks a lot for your answer,so it looks like you run into the same problems 😀

      I’ve tried it without wordpress and same fault.

      Maybe i need to think about it again. I’ve not tried the ones on facebook or chesspark. So i do not know if they’ve got the same problems with the refresh page or closing the window.

      I would like to login to the chat session, if you login to wordpress,so that the session is all the time active.

      Cheers
      Gulli

    • I guess you got me a bit wrong. Current version works as intended. I have set action for new session on re-opening the window or page refresh. (don’t want to get on this side of developement).

      Also current installation works only on non-IE browsers (i don’t have one to test with).

      You can use the current installation by entering your basic details. No registration/confirmation required for you to use the chat bar at the bottom.

  • Pingback: uberVU - social comments()

  • arnab

    Hi abhinav,

    i’ve been trying to make use of the ‘BOSH’ class given in the xmpphp framework, but it seems that the code is buggy. Can you just provide me with with your bosh class and the relevant code files, so that I can test it with the jaxl framework. I need to use bosh in one of my projects in php.
    thanks

    • Hi Arnab,

      Yup i tried xmpphp bosh support about a year back and didn’t worked for me back then. But after completing bosh support in Jaxl I realized, xmpphp bosh support might not be buggy as well. Just that it doesn’t provide end to end solution for bosh i.e. javascript and php binding. And more often than not we give up after a few failures.

      Bosh support in Jaxl is still a little buggy as described in my reply to Gulli above. Purpose of demonstration here is mainly debugging the same in a live environment 🙂

    • arnab

      Yes, I agree with you, but can i have access to jaxl.jquery.js and jaxl4bosh.class.php so that we can have a look at it as in how you have designed the classes and the logic beneath it.
      regards.

  • Pingback: Tweets that mention JAXL BOSH Demo: IM chat client for all Wordpress blogs | Abhi's Weblog -- Topsy.com()

  • Henrik

    Hi Abinav,

    I’m also trying to connect my webpage with my Gtalk account however it isn’t as easy as i first thougth.

    You mention that you use your own Jabber server, is it ejabberd? I might switch to using a “private server” instead.

    And how do you handle the anonymous accounts?

    • Hi Henrik,

      Yes there were a few challenges which i had to over come before this finally worked. (Though i need to add my online/offline info in the chat bar below, because i myself might not be online always and it’s still a one to one chat).

      Yes, i login the new user anonymously who is then allowed to chat with a registered user (in this case me).

    • Henrik

      Do you use ejabberd or another server?

    • I tested this with ejabberd before and now testing with openfire servers.

  • Pingback: JAXL BOSH Demo: IM chat client for all Wordpress blogs | Abhi's Weblog()

  • Rahi

    Hi Abhinav,

    I am using your library for xmpp support.

    One query – Is there any way remain connected to jabber server from mobile site where javascript is not an option?

    Needed your comments on this?

    • If you have any browser side component enabled either in form of js, flash etc you can achieve what you want to. Otherwise probably not.

      I have little experience working with mobile sites.

    • Rahi

      usually there is no component of js, flash enabled. probably go for sort of proxy or threading to keep the client alive.

      Thanks for your quick reply.

    • Also I am not sure if core xmpp can run on mobile (again, I have little experience).

      Generally you require to run xmpp over bosh, similar to the implementation done for the chat bar you see on my blog.

  • Hi there. I would love to see this go in the direction where we can install the plugin into several different blogs and they all communicate with the same admin id.

    Will there be support for blog members to chat with each other?

    Thanks,
    Richard

    • Hi Richard,

      Yup that’s what I am currently working on. A wordpress plugin enabling a chat similar to fb toolbar.

      I reply to all chat mssges using a single admin ID and through Adium. I guess that what you are looking for. 😀

  • I will lay down the details of how Jaxl’s bosh support comes in handy for building such browser based real time application. Specifically, I will explain how I achieved building a plugin for my wordpress blog. If everything goes perfect over next few weeks, this plugin might be submitted in wordpress plugin’s director

  • Mike

    Are the bosh files available for download? and Where? if it’s obvious. I apologize.

    BTW, good stuff

    • Thanks Mike,

      With no new post in past 1 month, you can predict the time restrictions at my end. I am too tied up at office currently.

      Shall start working on it in a week or so. Currently this post was more for demonstration. Code is still not released.

  • Sorry to bug…. but would really like to see the code. This is awesome stuff!

  • Hi Tarique,

    I am onto this project and will be released as wordpress plugin within this month.

    Thanks for your patience. 😀

  • Will you release jaxl4bosh.class.php with the WP plugin? Meanwhile, can’t you put it on the google code project?

    Thank you

  • Hi Davide,

    I am working on the plugin and yes, Bosh support for Jaxl will be released along with the plugin.

    Had to made a few changes to the library itself, which is now more modular and pluggable. Working on it, thanks for your patience.

  • hey, A friend of mine referred me here as I have been looking hard for an Instant message plugin for my blog per say.

    do you know when the plugin might be complete? and how you plan on having us incorporate it into our website?

    via widgets? does the chat pop up on the bottom just like on facebook?

    thx, Looking really forward to this, and I will so donate as soon as its out.

  • A-Lex

    Hi.
    I have a task to make xmpp client on php for a site. I have familiarised with your library. You could not send source codes for operation through http-bind in that sort in which they for you are.

  • I am noticing that even when the chat window is minimized, you cannot click on any link located on area where the chat window would have been. Even on the demo here on this page, this is happening for me. This is happening on Firefox 3.6.15. On IE 8, the place where the chat window is supposed to be is completely white. Regardless of whether the chat window is minimized or not.

    • Hi Ben,

      We are working towards solving this issue.
      Thanks for pointing out bug on IE8 browsers.

  • Dear Abhinav,

    First of thanks for creating an amazing XMPP application for us.

    I am using JAXL to create a customer support application for a client, it’s almost finished however after the development has been done, I found out the following issues communicating with several IM clients already available:

    1) PSi:
    JAXL to PSi communication works however when you send a message in reverse i.e. from PSi to JAXL, no messages are received. Let me know why?

    2) PidGin:
    To start a chat if we send a message from JAXL to Pidgin then no messages are being received, but after that if we send a message from Pidgin to JAXL then it works well and all chat starts to respond normally.

    Let me know why this happens please, any idea?

    • Hi Muhammad,

      Jaxl have no way to distinguish or segregate or reject messages from a particular client.
      If you have successfully connected, authenticated and set your status then your client should receive a message without any problem

  • review center

    Hi,

    I just want to say thank you for this im chat client. I find this very helpful to my sites.

  • Announcing Jaxl v3.x – asynchronous, non-blocking I/O, event based PHP client/server library – http://abhinavsingh.com/blog/2012/07/announcing-jaxl-v3-x-asynchronous-non-blocking-io-event-based-php-clientserver-library/

  • Pingback: Best XMPP Client PHP/Javascript - PHP Solutions - Developers Q & A()