First Attempt at writing an AIR (Adobe Integrated Runtime) application. It’s a simple chat “widget” that users install and allow to chat with “Jane”, who can be a “helpdesk” or “expert” or “customer service”. I call it “VJ”.

The environment that I chose to run it after some searching and recommendations is:

  1. Open Fire – This is really the chat server using XMPP (jabber)
  2. StropheJS – This is the XMPP JS library that I choose to use.

Setting up Open Fire

Setting up Open Fire was relatively easy. I basically followed the steps from the documentation and help from Malcom .

However 2 things complicate matters.

  1. I am running Open Fire behind a firewall so needed to set up a Reverse Proxy in order to configure it.
  2. VJ’s maybe running behind a firewall too. So Open Fire needs to be able to communicate on port 80 as well. Luckily Open Fire supports “http-bind” so I just need to set it up.

Reverse Proxy for Open Fire and HTTP-BIND

In order to configure Open Fire, I need to access the port 9090. But I can’t change the firewall. So instead, set up a Virtual Host to (Reverse) proxy it. This is also where I administer my Open Fire server.



ProxyRequests Off
ProxyPass /
ProxyPassReverse /

Now I can configure Open Fire by going to without the 9090 port reversed proxied. example

Important (for HTTP-BIND)

Configure the Server/Domain Name to be Another sub-domain – instead of, use because

  1. openfire.mydomain. com is reverse proxied for administration only and is the server/domain of the XMPP server that clients will connect to.
  2. So needs 5222 open for chat clients talking XMPP. But because I am behind a firewall and chat clients may also be behind a firewall, we cannot use 5222 to communicate.
  3. Luckily Open Fire has HTTP-BIND, that means it can talk HTTP that wraps the XMPP. But HTTP-BIND runs on port 7070.
  4. Since I cannot open 7070 in the firewall. I need to Reverse Proxy this as well so that clients can use a normal looking URL to talk HTTP(XMPP) to.



ProxyRequests Off
ProxyPass /http-bind
ProxyPassReverse /http-bind



I need also a web chat client for JANE, the “helpdesk” agent. so I installed Spark Web. Installing it is straight forward too. download it and put it in the server.

<Directory "/usr/local/sparkweb">
AllowOverride All
Order deny,allow

and edit the index.html

function jive_sparkweb_getConfig()
return {
server: "localhost",
connectionType: "http",
port: "80"

Now Start Coding!!

I use these for development.

  1. Eclipse IDE
  2. Aptana Studio

With the help of the samples from Aptana, I was able to get started with a chrome window for my chat widget. However, the main task for me here is to integrate with the Strophe JS.

Integrate with Strophe.js

Basically I modified echobot.js since it already provides the Login and onMessage Handler.

First include all the necessary Strophe .js files.

<script language='javascript' type='text/javascript' src='lib/strophejs/strophe.js'></script>

BOSH SERVICE (credit to Malcom)

specify the BOSH Service url

var BOSH_SERVICE = "";


The login function is straight forward, except I am fixing the domain so that the client (user) need not remember it.

var DOMAIN = "";


connection.connect($(‘#jid’).get(0).value + “@” + DOMAIN, $(‘#pass’).get(0).value, onConnect);


Send Message

  • This function just sends the message, here I pass in the elemid which is a textarea.
  • and JANE is my “helpdesk” so this widget only can only chat with her.
  • sends a .c(“body”).t(text) instead of cnode(body)
  • clears the textarea

var JANE = "";

function sendMessage(elemid){

if (connection.connected && connection.authenticated) {
var text = $('#' + elemid).get(0).value;
if (text.length > 0) {
var from = Strophe.getNodeFromJid(connection.jid);
var to = JANE;
var reply = $msg({
to: JANE,
from: connection.jid,
type: "chat"

log(text, "from");

$('#' + elemid).get(0).value = "";

else {
log("You have to log in before you can ask Jane");

Receive Message

  • This function is a registered handler when a message arrives

function onMessage(msg){
var to = msg.getAttribute('to');
var from = msg.getAttribute('from');
var type = msg.getAttribute('type');
var elems = msg.getElementsByTagName('body');

if (type == "chat" && elems.length > 0) {

var body = elems[0];
log(Strophe.getText(body), "to");

return true;