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.

/etc/httpd.conf


<VirtualHost openfire.mydomain.com>
ServerName openfire.mydomain.com

ServerAlias openfire.mydomain.com
ProxyRequests Off
ProxyPass / http://127.0.0.1:9090
ProxyPassReverse / http://127.0.0.1:9090
</VirtualHost>

Now I can configure Open Fire by going to http://openfire.mydomain.com/ without the 9090 port reversed proxied. example

Important (for HTTP-BIND)

Configure the Server/Domain Name to be Another sub-domain – instead of openfire.mydomain.com, use chat.mydomain.com because

  1. openfire.mydomain. com is reverse proxied for administration only and chat.mydomain.com is the server/domain of the XMPP server that clients will connect to.
  2. So chat.mydomain.com 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.

/etc/httpd.conf

<VirtualHost chat.mydomain.com>
ServerName chat.mydomain.com
ServerAlias chat.mydomain.com

ProxyRequests Off
ProxyPass /http-bind http://127.0.0.1:7070/http-bind/
ProxyPassReverse /http-bind http://127.0.0.1:7070/http-bind/

</VirtualHost>

SparkWeb

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.

<VirtualHost chat.mydomain.com>
...
<Directory "/usr/local/sparkweb">
AllowOverride All
Order deny,allow
</Directory>
</VirtualHost>

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 = "http://chat.mydomain.com/http-bind";

Login

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

var DOMAIN = "chat.mydomain.com";

….

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 = "Jane@chat.mydomain.com";

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"
}).c("body").t(text);

connection.send(reply.tree());
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;
}


Advertisements