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:
- Open Fire – This is really the chat server using XMPP (jabber)
- 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.
- I am running Open Fire behind a firewall so needed to set up a Reverse Proxy in order to configure it.
- 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
- 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.
- 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.
- Luckily Open Fire has HTTP-BIND, that means it can talk HTTP that wraps the XMPP. But HTTP-BIND runs on port 7070.
- 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.
- Eclipse IDE
- 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;
}
