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.
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:
Include the Diffusion CloudJavaScript library in the <head> section
of your index.html file.
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:
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:
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.
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:
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>