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

Introduction

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:

Background

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.

Preparations

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:

an administrative account is created using the username 'admin' and password 'admin'
two users are automatically created: 'jane' and 'john' (both using the value 'secret' as their password)
the XMPP domain name is configured to be 'example.org' (for ease of use, configure 'example.org' to be an alias of '127.0.0.1' in your hosts file!)

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/openfire.sh -demoboot

That should be everything that you need to get Openfire running. Background information on the 'demoboot' mode can be found in Openfire's Demoboot Guide.

Code

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>
<html>
  <head>
    <title>Strophe.js Basic Example</title>
  </head>
  <body>
    <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'>
      </form>
    </div>
    <hr>
    <table id='log'></table>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
    <script src='../dist/strophe.umd.js'></script>
    <script src='https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/vkbeautify/vkbeautify.0.99.00.beta.js'></script>
    <script>
      var BOSH_SERVICE = 'http://example.org:7070/http-bind';
      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;");
              td.appendChild(pre);
              pre.appendChild( document.createTextNode( vkbeautify.xml(data) ) );
              tr.appendChild(td);
          } else {
              th.setAttribute('colspan', '2');
          }

          $('#log').append(tr);
      }

      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.');
        connection.disconnect();
          }
      }

      $(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';

            connection.connect($('#jid').get(0).value,
                   $('#pass').get(0).value,
                   onConnect);
        } else {
            button.value = 'connect';
            connection.disconnect();
        }
          });
      });
    </script>
  </body>
</html>

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!

Introduction

Background

Preparations

Code

Further Reading