Just a second...

Start subscribing with JavaScript

Create a JavaScript® browser client within minutes that connects to the Diffusion™ server. This example creates a web page that automatically updates and displays the value of a topic.

To complete this example, you need a Diffusion server and a web server where you can host your client application. Get the diffusion.js file from the clients/js directory of your Diffusion

You also require either a named user that has a role with the select_topic and read_topic permissions or that anonymous client connections are assigned a role with the select_topic and read_topic permissions. For example, the "CLIENT" role. For more information about roles and permissions, see Role-based authorization.

This example steps through the lines of code required to subscribe to a topic. There are several different topic types which provide data in different formats. This example shows you how to subscribe to a JSON topic. The full code example is provided after the steps.
  1. Create a template HTML page which displays the information.
    For example, create the following index.html file.
    <html>
                <head>
                <title>JavaScript example</title>
                </head>
                <body>
                <span>The value of foo/counter is: </span>
                <span id="update">Unknown</span>
                </body>
                </html>
    If you open the page in a web browser, it looks like the following screenshot:
    Screenshot of the example client before it makes a connection.
  2. Include the Diffusion JavaScript library in the <head> section of your index.html file.
    <head>
                <title>JavaScript example</title>
                <script type="text/javascript" src="path_to_library/diffusion.js"></script>
                </head>
  3. Create a connection from the page to the Diffusion server. Add a script element to the body element.
       <body>
                <span>The value of foo/counter is: </span>
                <span id="update">Unknown</span>
                <script type="text/javascript">
                diffusion.connect({
                // Edit these lines to include the host and port of your Diffusion server
                host : 'hostname',
                port : 'port',
                // To connect anonymously you can leave out the following parameters
                principal : 'user',
                credentials : 'password'
                }).then(function(session) {
                alert('Connected: ' + session.isConnected());
                }
                );
                </script>
                </body>
    Where hostname is the name of the system hosting your Diffusion server, user is the name of a user with the permissions required to subscribe to a topic, and password is the user's password.
    If you open the page in a web browser it looks like the following screenshot:
    Screenshot of the example client as it makes a connection.
  4. Subscribe to a topic and receive data from it.
    Add the following function before the diffusion.connect() call:
    function subscribeToJsonTopic(session) {
                session.select('foo/counter');
                session.addStream('foo/counter', diffusion.datatypes.json()).on('value', function(topic, specification, newValue, oldValue) {
                console.log("Update for " + topic, newValue.get());
                document.getElementById('display').innerHTML = JSON.stringify(newValue.get());
                });
                }

    The subscribe() method of the session object takes the name of the topic to subscribe to and emits an update event. The attached function takes the data from the topic and updates the update element of the web page with the topic data.

  5. Change the function that is called on connection to the subscribeToJsonTopic function you just created.
    .then(subscribeToJsonTopic);
    If you open the page in a web browser it looks like the following screenshot:
    Screenshot of the example client showing the data it receives from a topic.

The web page is updated every time the value of the foo/counter topic is updated. You can update the value of the foo/counter topic by creating a publishing client to update the topic. To create and publish to the foo/counter topic, you require a user with the modify_topic and update_topic permissions. For more information, see Start publishing with JavaScript.

The completed index.html file contains the following code:
      <html>
    <head>
        <title>JavaScript example</title>
        <script type="text/javascript" src="path_to_library/diffusion.js"/>></script>

    </head>
  <body>
    <p>The value of foo/counter is: <span id="display"></span></p>
        <script type="text/javascript">

        diffusion.connect({
            // Edit these lines to include the host and port of your Diffusion server
            host : 'hostname',
            port : 'port',
            // To connect anonymously you can leave out the following parameters
            principal : 'user',
            credentials : 'password'
        }).then(function(session) {
            // Add a value stream that matches the topic path and wire it to log the received values
            session
                .addStream('foo/counter', diffusion.datatypes.double())
                .on('value', function(topic, specification, newValue, oldValue) {
                    console.log("Update for " + topic, newValue);

                    document.getElementById('display').innerHTML = newValue;
                });

            // Subscribe to the topic
            session.select('foo/counter');
        });

        </script>
  </body>
</html>