In this post I’ll introduce you to XMPP4MOZ, a Firefox add-on that adds XMPP protocol capabilities to the Firefox browser.

Since I’m new to this technology I’ll start from the very beginning of every good learning process: the “hello world” application, that in this case means a very simple 1 to 1 chat application.

Before you continue with this tutorial you need to install the XMPP4MOZ add-on, but I suggest that you install the complete SamplePlace suite that includes the XMPP4MOZ extension and some other nice add-ons (it has actually a very small footprint so don’t fear to install it).

Now we can create the HTML page that will be the main container of our Chat application.

Standard headers and title:

Then we need a place to put the username we’re talking to:

A place to visualize the messages:

And an input box that we use to write our own messages:

Then we need these special DIVs that will be used as a comunication gateway between XMPP4MOZ and the Javascript application, we’ll see later how:

And last, we’ll close the page:

Now we’re ready to write the Javascript code that will glue this page with the XMPP4MOZ extension, we can start by inserting a SCRIPT tag inside the page’s HEAD:

Our application will be defined as a single Javascript function that is called just after the BODY of the page is loaded, to do that we need to add this code between our SCRIPT tags:

And update the BODY tag to call the main function on the “load” event:

Now that we have our basic application we can add the real functionality.
As I anticipated above, we will use the xmpp-incoming and xmpp-outgoing DIVs to communicate with the XMPP4MOZ extension.
To let our application react on the incoming XMPP messages we need to attach to the DOMNodeInserted event of the xmpp-incoming DIV:

We also need a variable to store our current user data:

Our function will get an XML message passed trough the event object:

After we have parsed the XML we can react to the message:

First we want to grab the presence messages that will notify our application when a new peer connection is available.
The format of the message is

:

Then we need to grab the message messages that will notify our application when a new message is available.
The format of the message is

.

We will use the from attribute and the text inside the content tag to create the string that will be appended to the message log:

Then we can close the function that deals with incoming messages:

Now we can define the code that sends the messages. The logic is pretty much the same, when we want to send a message we will set the textContent property of the xmpp-outgoing DIV. XMPP4MOZ will send that text message to our peer application.

We will attach our message sending function to the click event of the Send button. This function will be much simpler since it just have to create the message XML and set the DIV content:

And finally we close the main chatInit() function:

And that’s all! If you want to see it work you need to login both you and your friend via Sameplace with your Jabber account, load the application and click on the Sameplace connect icon and you can chat!
If you need help on how to use the Samplace suite check on the Samplace suite page.
If you’re too lazy to cut&paste the code, you can look here.

Enjoy!