PHP Code, Setup and Demo of Jaxl boshchat application

Jaxl 2.0 bosh support allow web developers to write real time web applications within minutes, without having any pre-requisite knowledge about the XMPP protocol itself. In this blog post, I will walk you through setup and demo of an XMPP based web chat application using Jaxl library.

Get the code
Follow the following steps to download and install this sample web application on your systems:

  • Clone the development branch of Jaxl library
    root@ubuntu:~/git# git clone git@github.com:abhinavsingh/JAXL.git
    root@ubuntu:~/git# cd JAXL/
    root@ubuntu:~/git/JAXL#

    If you are not familiar with git, simply visit JAXL@github, click Download Source and extract under ~/git/JAXL directory on your system

  • Once inside Jaxl source directory, build the latest development package
    root@ubuntu:~/git/JAXL# ./build.sh
    building...
  • Install Jaxl library (view installation detail and options)
    root@ubuntu:~/git/JAXL# ./build.sh install
    uninstalling old package...
    installing...

Setup web chat application
Jaxl library is default installed under /usr/share/php/jaxl folder. Application code for our web chat application can be found under /usr/share/php/jaxl/app/boshchat folder.

Follow these steps to setup web chat application on your system:

  • I assume you have http://localhost/ configured on your local web server and it runs out of /var/www folder. Create following symlinks:
    root@ubuntu:~/git/JAXL# cd /var/www
    root@ubuntu:/var/www# ln -s /usr/share/php/jaxl/app/boshchat/boshchat.php index.php
    root@ubuntu:/var/www# ln -s /usr/share/php/jaxl/app/boshchat/jaxl.ini jaxl.ini
    root@ubuntu:/var/www# ln -s /usr/share/php/jaxl/env/jaxl.js jaxl.js
    root@ubuntu:/var/www# ln -s /usr/bin/jaxl jaxl.php

    Edit/Remove #!/usr/bin/env php inside jaxl.php if it causes any problem on your system.

  • Open and edit jaxl.ini
    define('JAXL_BOSH_COOKIE_DOMAIN', false);
  • I assume you have access to XMPP over Bosh enabled jabber server. Ejabberd users can verify this by hitting http://localhost:5280/http-bind in the browser
  • Open and edit index.php
    define('BOSHCHAT_ADMIN_JID', 'admin@localhost');

    All messages sent using this web chat application will be routed to BOSHCHAT_ADMIN_JID

Ready for the demo
To run this example web chat application, visit http://localhost in your browser window. Enter a username/password already registered on your jabber server and press connect.

Login as BOSHCHAT_ADMIN_JID using a desktop client, so that you can receive messages sent from the browser on your desktop client.

Below is a screenshot when I logged in as “abhinavsingh” from browser and BOSHCHAT_ADMIN_JID was set to “jaxl@jaxl.im”:

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', 'admin@localhost');

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.