Table of Contents
Just a second...

Develop a subscribing client

Use the Diffusion™ JavaScript® API to develop a client that subscribes to a JSON topic and receives updates published through it.

Skip straight to the example.

  1. Ensure that the diffusion.js file, located in the clients/js directory of your Diffusion installation, is available on your development system.
  2. Create a template HTML page which displays the information.
    For example, create the following index.html in your project's HTML directory.
    <html>
      <head>
        <title>JSON example</title>
      </head>
      <body>
        <span>The value of topic/json is: </span>
        <span id="display">Unknown</span>
      </body>
    </html>
  3. Include the Diffusion JavaScript library in the <head> section of your index.html file.
    <head>
      <title>JSON example</title>
      <script type="text/javascript" src="path_to_library/diffusion.js"></script>
    </head>
  4. Create a connection from the page to the Diffusion server. Add a script element to the body element.
       <body>
        <span>The value of topic/json is: </span>
        <span id="display">Unknown</span>
        <script type="text/javascript">
          diffusion.connect({
              // Edit this line to include the URL of your Diffusion server
              host : 'localhost',
              port : 8080,
              principal : 'client',
              credentials : 'password'
          }).then(function(session) {
                  alert('Connected: ' + session.isConnected());
              }
          );
        </script>
      </body>

    If you run the client now, it displays a dialog box when it successfully connects to the Diffusion server.

  5. Subscribe to a topic and create a stream that receives data from it.
    Add the following function before the diffusion.connect() call:
    function subscribeToJsonTopic(session) {
        session.subscribe('topic/json');
        session.stream('topic/json').asType(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. The stream() method of the session creates a value stream that receives updates from the topic and emits an event on each update. The attached function takes the data from the topic and updates the display element of the web page with the topic data.

  6. Change the function that is called on connection to the subscribeToJsonTopic function you just created.
    .then(subscribeToTopic);

    Now, when the client connects to the Diffusion server it subscribes to topic/json and creates a stream to receive updates from that topic. Those JSON updates are displayed in the browser window as a string.

Full example

The following example code shows a browser JavaScript client that connects to the Diffusion server and subscribes to a JSON topic.

<html>
  <head>
     <title>JSON example</title>
     <script type="text/javascript" src="path_to_library/diffusion.js"></script>
  </head>
  <body>

    <span>The value of topic/json is: </span>
     <span id="display">Unknown</span>
     <script type="text/javascript">
          function subscribeToJsonTopic(session) {
             session.subscribe('topic/json');
             session.stream('topic/json').asType(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());
             });
          }

          diffusion.connect({
              host : 'localhost',
              port : 8080,
              principal : 'client',
              credentials : 'password'
          }).then(subscribeToJsonTopic);
     </script>
  </body>
</html>
To run the example:
  1. Copy the provided code into a file called index.html
  2. Update the connect method to include the URL of your Diffusion server.
  3. If you have changed the default security configuration, change the principal and credentials to those of a user that has the read_topic and select_topic permissions.
  4. Open index.html in a browser.
The JavaScript client opens a connection to the Diffusion server, subscribes to the topic topic/json, and prints the updates it receives to the browser window.
Subscribe using other Diffusion APIs: