Bringing chat to the browser with JWChat

JWChat is a Jabber instant messaging client that is written using only HTML and JavaScript. This means that you need not install a Jabber instant messaging client in order to use Jabber, assuming you already have a Web browser installed. A Jabber client that runs in a Web browser could be just the ticket for such uses as providing instant messaging to visitors to your Web site.

If you just want to use JWChat to connect to Jabber without downloading any software or performing any server setup, you can visit jwchat.org. I tested jwchat.org with a connection to jabber.se from a browser and using Pidgin to verify communication, and it worked fine, but connecting through that site does have drawbacks. Installing JWChat on your own server lets you control the security and availability of the server, integrate JWChat with your site, and establish your own Jabber server on your LAN.

Given that AJAX allows a Web page to issue requests from a
Web browser in the background, you might at first think that JWChat would just use AJAX to directly connect to your Jabber server of choice. But the JavaScript XMLHttpRequest function that forms the core of an AJAX application is subject to a security restriction such that it can contact only the same site that served up the HTML page from which it was called. To get around this, on the server that you load JWChat from you have to either (a) use Apache RewriteRules, (b) install a Jabber server that handles HTTP polling or binding, or (c) install an application proxy on the machine that serves up JWChat, such as PunJab. So while the actual Jabber client itself, JWChat, is running inside your Web browser, you need something on the server from which you loaded JWChat that is either a Jabber server or that acts as an intermediary between JWChat and other Jabber servers.

I’ll use option (b) and install a Jabber server — specifically, ejabberd 2.0.0 — to get around the restrictions on XMLHttpRequest. The ejabberd daemon supports clients using both the http_bind and http_poll methods. There are packages for ejabberd for Ubuntu Gutsy and Fedora 8 and a one-click install for OpenSUSE 10.3 on the Open Build System.

For the option (b) setup, once you’ve installed ejabberd, you have to enable mod_http_fileserver to get it to work with JWChat. I derived the configuration shown here from the documentation on the ejabberd.im Web site. I was unable to get JWChat to connect using the http_bind method so I fell back to using http_poll. While both methods allow communication, http_bind should be more efficient. If you are loading JWChat on your own server then you can disable http_bind in the options presented to the user to avoid their trying a method that you know does not work.

The commands shown below install ejabberd and set it up to serve JWChat on a Fedora 8 machine.
The final for command will create a copy of all files with the .en extension, removing that extension. This means that a file called index.html.en gets copied to index.html, which ejabberd can serve because it has the correct MIME type for an HTML file. Trying to access index.html.en directly with your browser will not work correctly, as the browser will not interpret the file as an HTML document. You also have to change the ejabberd configuration file, typically located at /etc/ejabberd/ejabberd.cfg,
as shown in the documentation to enable the ejabberd file server and set its DocumentRoot directory. This lets ejabberd serve up the HTML and other Web files that comprise JWChat.

I used identical changes to those shown in the documentation, with the addition of also setting the IP addresses of the Jabber server.

# yum install ejabberd

...

# cd /var/lib/ejabberd

# mkdir www

# cd www

# tar xzvf /.../jwchat-1.0beta3.tar.gz

# ln -s jwchat-1.0beta3 jwchat

# cd ..

# chown -R  ejabberd:ejabberd www

# vi /var/lib/ejabberd/www/jwchat/config.js

...

var SITENAME = "localhost";

# cd www/jwchat

# for if in *.en

do 

cp -av $if $(basename $if .en)

done

I found that you have to specify the IP address(es) of the server machine in the configuration files or things don’t work correctly, though perhaps my network setup is strange enough to have tricked things. If I didn’t specify the IP addresses in the ejabberd configuration file, I just got a blank page when I tried to load JWChat from the server, and I had no idea why. Change the JWChat configuration file, located at /var/lib/ejabberd/www/jwchat/config.js,
to specify the SITENAME variable as shown above.

Taking it for a spin

JWChat maintains your roster, otherwise known as your buddy list, between logins. When you log in you will notice that JWChat wants the browser’s Flash plugin installed. I ran a second Firefox client that had Flash installed to see why, but didn’t notice any changes in functionality. For some reason JWChat was asking for Flash, but it still ran identically without it.

JWChat uses separate browser windows for things that a normal desktop IM client would place in separate windows. One downside of this design is that when you click on a chat window you are likely to hit the conversation list box, because it is that largest area on the window, and starting to type in this area does not work. You must explicitly click on the text input field before typing.

I didn’t find it particularly easy to build my roster with JWChat. When you are in a chat room you cannot just right-click on a user and invite them to your roster. There is a custom context menu for users, but the menu includes only options to start a chat or kick or ban the user. The small plus icon sign in the bottom left of the roster window was the main means I used to add to my roster with JWChat. While this is not a task you perform all the time, making it easier to add to your roster would be a great enhancement. There is a remove entry in the context menu for users who are already on your roster.

Final thoughts

Getting JWChat installed on a server isn’t that messy when you serve it from the ejabberd daemon. Of course, its always easy to use JWChat from a client machine — just direct any Web browser at the server page and away you go. If you can use Apache RewriteRules, then setting up Apache to serve JWChat seems to have a similar level of complexity to the setup used in this article. Having a server setup with JWChat using RewriteRules or an application proxy would allow you to remain in contact via instant messaging from an Internet café or any other machine with an Internet connection and a Web browser.