Over a million developers have joined DZone.

Reappt on Bluemix: Subscribe to a JSON Topic in Five Steps

Learn how to use the Reappt JavaScript API to subscribe to a JSON topic and interact with the topic value as a native JavaScript object.

· Mobile Zone

Read our latest eBook to learn the features of JSON and why it's become dominant for web-based integration. Brought to you in partnership with Reappt.

JSON (JavaScript Object Notation) is an incredibly versatile, simple to understand, and lightweight data format. Though it has JavaScript in the name, as a text-based format, it is language independent and provides a perfect way to transmit data that has an inherent structure.

In my first post, I showed how you can publish to a JSON topic in 5 steps. Today I’ll show how to use the Reappt JavaScript API to subscribe to a JSON topic and interact with the topic value as a native JavaScript object.

To try this demo, you need a Reappt service. You can get a Free edition of Reappt from Bluemix.

1. Create an HTML File That Imports diffusion.js

The Reappt JavaScript API is hosted on developer.reappt.io. You can link to this version from your JavaScript browser clients.

     <title>JSON example</title>
     <script type="text/javascript" src="http://developer.reappt.io/clients/js/diffusion.js"></script>
     <span>The value of topic/json is: </span>
     <span id="display">Unknown</span>

Create a span inside the body of your HTML file that you can use to display the JSON values the client receives from the topic. In this example it has id="display".

2. Connect to Your Reappt Service

Connect to your Reappt service using the URL shown on your Reappt Dashboard.

From Bluemix, click on Reappt in your list of services, then click the “OPEN REAPPT FROM PUSH TECHNOLOGY DASHBOARD” button to get to the Dashboard. Here you’ll find your service name and URL.


On the Dashboard, you’ll also find the System Users table. To connect to your Reappt service and subscribe to topics, you’ll need a user who has permission to subscribe to topics. You can create that user here. Click on the plus sign (+) to open the ‘Add Users’ wizard. In it, add a user called ‘client’ and give the user the ‘CLIENT’ role.


OK – you’re ready to connect. Add a script to the body of the HTML file that calls diffusion.connect():

     <span>The value of topic/json is: </span>
     <span id="display">Unknown</span>
     <script type="text/javascript">
              host : 'demo.reappt.io',
              principal : 'client',
              credentials : 'password'
          }).then(function(session) {
                  alert('Connected: ' + session.isConnected());

Replace ‘demo.reappt.io’ with the URL of your Reappt service and ‘password’ with the password you defined for your user ‘client’. At the moment, the HTML page will pop up a dialogue box to let you know that the JavaScript client within connected successfully to Reappt.

3. Subscribe to a JSON Topic

Now to replace the notification box code with code that subscribes to a JSON topic when the client connects.

Before the diffusion.connect() call, add a new function called subscribeToJsonTopic():

function subscribeToJsonTopic(session) {

And call this function when the client successfully connects to Reappt, by replacing what was in the then () call with this:


Now, when the client connects to Reappt, instead of popping up a dialogue box it subscribes to the topic ‘topic/json’.

4. Use a Value Stream to Receive the JSON Value

At this point the example is subscribing to a topic, but not doing anything with the updates from it.

To receive updates from the JSON topic, create a stream and register it against the topic.

With JSON topics you can use streams known as value streams. Value streams are typed, and only receive updates from topics that have a matching type. Using value streams has the advantage that they cache the value of the last update. This means they can receive a diff from Reappt, which describes only the difference between the new update and the cached value, and apply that diff to the cached value to get the new value. This reduces the amount of bytes sent across the network.

To register a value stream and receive updates from your JSON topic, ensure that you register it against the topic or against a topic in its path.

Back in the subscribeToJsonTopic() function, add the following code after the topic subscription:

                            .on('value', function(topic, specification, newValue, oldValue) {
    console.log("Update for " + topic, newValue.get());

This causes the client to print the JSON value of the topic to the browser console whenever the value is updated.

5. Access the Data in the JSON Value Using Native JavaScript Addressing

Just printing out all the JSON sent through the topic on the console is not very pretty (or useful). Maybe you want to access just one field in the JSON. JavaScript makes it easy to refer directly to these fields by their keys.

Say JSON published topic has the following format:

   "timestamp": 1461575476465,
        {"id": "0115", "pulse" : 81, "bp" : "127/87" },
        {"id": "0121", "pulse" : 68, "bp" : "124/83" }, 
        {"id": "0766", "pulse" : 73, "bp" : "133/89" }, 
        {"id": "1243", "pulse" : 92, "bp" : "138/90" }, 
        {"id": "1244", "pulse" : 62, "bp" : "119/77" } 

To get the value of the pulse field for the first patient in the list, you would use the following JavaScript:


Combine this with code to output to the area of the web page with the id ‘display’ to show that piece of data in the browser. Add the following line after or instead of the call to console.log:

document.getElementById('display').innerHTML = 

You can use the steps in this example to receive data from any JSON topic. To see it working though, you need a JSON topic that is being updated. Check out the companion post: “Reappt on Bluemix: Publish to a JSON topic in 5 steps” to create and update a JSON topic from a Java client.

Watch a short video demo on how to publish and subscribe to Reappt.

Read our latest eBook to learn the features of JSON and why it's become dominant for web-based integration. Brought to you in partnership with Reappt.

mobile,reappt,json,ibm bluemix

Published at DZone with permission of Katherine Shann, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}