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.
- Ensure that the diffusion.js file, located in the clients/js directory of your Diffusion installation, is available on your development system.
- 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>
- 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>
- 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.
- 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.
- 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>
- Copy the provided code into a file called index.html
- Update the connect method to include the URL of your Diffusion server.
- If you have changed the default security configuration, change the principal and credentials to those of a user that has the and permissions.
- Open index.html in a browser.