Openfire Logo

Strophe.js: A Minimal Working Example (in Javascript)


This document provides a minimal working example of a client implementation using the Strophe.js library, making it connect to a running Openfire server.

Topics that are covered in this document:


Strophe.js is an XMPP library for JavaScript. Its primary purpose is to enable web-based, real-time XMPP applications that run in any browser.

This guide describes how to use Strophe.js to connect to Openfire. It provides nothing more than a minimal working example, intended as a stepping stone to for client developers that get started with a new project.


In this example, a client connection will be made against a running Openfire server. For ease of configuration, the 'demoboot' setup of Openfire is used.

The 'demoboot' setup of Openfire allows one to start a fresh installation of Openfire into a certain provisioned state, without running any of the setup steps. When running in 'demoboot' mode:

To start Openfire in 'demoboot' mode, you can invoke the Openfire executable using the -demoboot argument, as shown below.

Starting Openfire in 'demoboot' mode.
$ ./bin/ -demoboot


Download and build the Strophe.js distribution. Assuming that you have a compatible version of Nodejs installed, this can be as simple as executing the 'dist' make target, as shown below, in the directory in which the Strophe.js release archive was extracted.

Build Strope.js distribution
$ make dist

If the build is successful, several files will have been created in a directory called dist. In this example, the file dist/strophe.umd.js will be used.

Find (or create) the directory examples in the directory in which the Strophe.js release archive was extracted (it should be a sibling to the dist directory that was created). In the exmples directory, create a file called openfire.html and copy the code shown below.

Stroph.js client example
<!DOCTYPE html>
    <title>Strophe.js Basic Example</title>
    <div id='login' style='text-align: center'>
      <form name='cred'>
        <label for='jid'>JID:</label>
        <input type='text' id='jid' value='john'>
        <label for='pass'>Password:</label>
        <input type='password' id='pass'>
        <input type='button' id='connect' value='connect'>
    <table id='log'></table>
    <script src=''></script>
    <script src='../dist/strophe.umd.js'></script>
    <script src=''></script>
      var BOSH_SERVICE = '';
      var connection = null;

      function log(msg, data) {
          var tr = document.createElement('tr');
          var th = document.createElement('th');
          th.setAttribute( "style", "text-align: left; vertical-align: top;" );
          var td;

          th.appendChild( document.createTextNode(msg) );
          tr.appendChild( th );

          if (data) {
              td = document.createElement('td');
              pre = document.createElement('code');
              pre.setAttribute("style", "white-space: pre-wrap;");
              pre.appendChild( document.createTextNode( vkbeautify.xml(data) ) );
          } else {
              th.setAttribute('colspan', '2');


      function rawInput(data)
          log('RECV', data);

      function rawOutput(data)
          log('SENT', data);

      function onConnect(status)
          if (status == Strophe.Status.CONNECTING) {
        log('Strophe is connecting.');
          } else if (status == Strophe.Status.CONNFAIL) {
        log('Strophe failed to connect.');
        $('#connect').get(0).value = 'connect';
          } else if (status == Strophe.Status.DISCONNECTING) {
        log('Strophe is disconnecting.');
          } else if (status == Strophe.Status.DISCONNECTED) {
        log('Strophe is disconnected.');
        $('#connect').get(0).value = 'connect';
          } else if (status == Strophe.Status.CONNECTED) {
        log('Strophe is connected.');

      $(document).ready(function () {
          connection = new Strophe.Connection(BOSH_SERVICE);
          connection.rawInput = rawInput;
          connection.rawOutput = rawOutput;

          $('#connect').bind('click', function () {
        var button = $('#connect').get(0);
        if (button.value == 'connect') {
            button.value = 'disconnect';

        } else {
            button.value = 'connect';

Save the file, and open it in a browser. You should be presented with two input fields. Fill out the password for the username john (it's: secret) and press the 'connect' button. You will immediately see all raw XMPP that is being exchanged with the server!

Note that this example disables important security features. You should not use this for anything important!

Further Reading

Please use the links below to find more information.