Just a second...

Start subscribing with JavaScript

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

To complete this example, you need a Diffusion Cloud service and a web server where you can host your client application. For more information about getting a Diffusion Cloud service, see Getting started with Diffusion Cloud.

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="display"></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 Cloud JavaScript library in the <head> section of your index.html file.
    <head>
      <title>JavaScript example</title>
      <script type="text/javascript" src="http://download.pushtechnology.com/clients/6.3.0/js/diffusion.js"></script>
    </head>
  3. Create a connection from the page to Diffusion Cloud. Add a script element to the body element.
       <body>
      <span>The value of foo/counter is: </span>
      <span id="update"></span>
      <script type="text/javascript">
                diffusion.connect({
                  // Edit this line to include the URL of your Diffusion Cloud service
                  host : 'service-name.diffusion.cloud',
                  // To connect anonymously you can leave out the following parameters
                  principal : 'user',
                  credentials : 'password'
                  }).then(function(session) {
                    alert('Connected: ' + session.isConnected());
                  }
                );
      </script>
    </body>
    Where service-name is the name of your Diffusion Cloud service, 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. Add a value stream that matches the topic path and wire it to log the received values, then subscribe to the topic.
    Add the following after the diffusion.connect() call:
      .then(function(session) {
      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;
                });
    
      session.select('foo/counter');
    });

    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 using the Diffusion Cloud Dashboard's test client or 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>