Web chat using Strophe and Openfire
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 get around cross-origin errors, by using it as a proxy to access the http binding service provided by Openfire. Openfire should soon implement CORS support so we won’t need to proxy HTTP requests in the future.
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 - at version 3.7.0 at the time of writing, and Apache httpd. Openfire provides a web browser based administration console at
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
Obtain trophyim - version 0.3 used here, provide access to it through Apache httpd so 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.js file to
http://localhost:7070/http-bind/. Direct access to that URL from the chat client will result in a cross-origin request error 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.
TROPHYIM_BOSH_SERVICE variable to
http://localhost/bosh. We’ll now configure Apache httpd to proxy that URL to
Configure Apache httpd as a proxy
conf/httpd.conf located in the Apache httpd installation folder.
Enable the following lines by removing the comment character
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`
conf/extra/httpd-vhosts.conf to 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.