Enabling Inter-gadget Communication

Scenario:

The publisher gadget publishes a random number to a channel and that random number will be shown in the subscriber gadget. Each time that publisher gadget publishes a new number, the number will be updated in the subscriber gadget. When the publisher gadget button with the caption Publish a random number is clicked, a random number will be published to the channel named "my-channel".

Follow the instructions below to enable and use inter-gadget communication:

Step 1: Create the publisher gadget

Create a gadget named publisher-gadget.

Create a file named publisher-gadget.xml and add the following code. Please see the code comments inline for descriptions.

publisher-gadget.xml

<?xml version="1.0" encoding="UTF-8" ?>
    <Module>
    <ModulePrefs title="Publisher Gadget"
                 author="WSO2 User Engagement Server"
                 height="230"
                 scrolling="true"
                 tags="pub-sub"
                 description="Demonstrate the basic behaviour of a publisher gadget in pub-sub model">
    <!-- This is used to import the pubsub-2 feature -->
	<Require feature="pubsub-2">
	<!-- This is used to define the channel that the publisher will use to publish messages. In this case the channel has been named my-channel. 		     publish="true" needs to be set to define the gadget as a publisher gadget. -->
            <Param name="topics">
                <![CDATA[
         <Topic title="randomNumber name="my-channel" publish="true"/>
         ]]>
            </Param>
        </Require>
     </ModulePrefs>
     <Content type="html">
    <![CDATA[
 <html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Publisher Gadget</title>
	<script language="javascript" type="text/javascript" src="js/publisher-gadget.js"></script>
 </head>

<body>
	<div>
    <!-- Based on the sample, a button with the caption Publish a random number has been defined -->
           <input type="button" value="Publish a random number" onclick="publish()"/>
        </div>
      <div id="output"> </div>
</body>
</html>

    ]]>
</Content>
</Module>

Create a folder named js within the publisher-gadget folder. As a best practice XML files are maintained at the top-most level, while other files (such as JS, CSS) are maintained within separate sub-folders.

Create a file named publisher-gadget.js with the following code within the js folder. Please see the code comments inline for descriptions.

/* This defines the publish() function call that will get triggered when the latter mentioned button is clicked.  */
function publish() {
		var message = Math.random();
		/* This defines that a random number needs to be published to my-channel, which has been declared in the ModulePrefs section */
       	gadgets.Hub.publish("my-channel", message);
       	document.getElementById("output").innerHTML = "Number that is published to the channel : " + message;
}

Step 2: Create the subscriber gadget

Create a gadget named subscriber-gadget.

Create a file named subscriber-gadget.xml and add the following code. Please see the code comments inline for descriptions.

<?xml version="1.0" encoding="UTF-8" ?>
    <Module>
    <ModulePrefs title="Subscriber Gadget"
                 author="WSO2 User Engagement Server"
                 height="230"
                 scrolling="true"
                 tags="pub-sub"
                 description="Demonstrate the basic behaviour of a publisher gadget in pub-sub model">
	<!-- This is used to import the pubsub-2 feature -->
      <Require feature="pubsub-2">
            <Param name="topics">
				<!-- subscribe="true" needs to be set to define the gadget as a subscriber gadget.-->
                <![CDATA[
				<Topic title="randomNumber" name="my-channel"
				description="Subscribes to random number channel" type="object"
				subscribe="true"/>
				]]>
            </Param>
        </Require>
     </ModulePrefs>
     <Content type="html">
    <![CDATA[
 <html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Subscriber Gadget</title>
	<script language="javascript" type="text/javascript" src="js/subscriber-gadget.js"></script>
 </head>

<body>
	<!-- Used to set the fetched value from the publisher's channel -->
	 <div id="output"> </div>
</body>
</html>

    ]]>
</Content>
</Module>

Create a folder named js within the subscriber-gadget folder.

Create a file named subscriber-gadget.js with the following code within the js folder. Please see the code comments inline for descriptions.

/* This is used to activate the subscription to the respective channel. In this sample the channel is "my-channel". */
gadgets.HubSettings.onConnect = function () {
    gadgets.Hub.subscribe("my-channel", callback);
};
/* Add the function that needs to be invoked at the subscriber's end. In this sample the message that is published by the publisher gadget is written in the JavaScript callback function. */
function callback(topic, obj, subscriberData) {
   document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj;
}

Step 3: Publish the two gadgets.

Publish the publisher gadget and the subscriber gadget. For more information, see Creating and Publishing a Gadget.

Step 4: Add the two gadgets in a UES dashboard

Create a dashboard named pub-sub and add the publisher gadget and the subscriber gadget. For more information, see Creating and Publishing a Dashboard.

Step 5: Access the UES dashboard

UES dashboards can be accessed using the following URL format:
https://localhost:9443/<DASHBORAD_NAME>/

Access this sample dashboard via the following URL:
https://localhost:9443/pub-sub/
This sample dashboard will appear as follows:

Step 5: Use the inter-gadget communication enabled gadgets to verify the inter-gadget communication

Click on Publish a random number button in the publisher gadget and observe that the same number gets printed in the subscriber gadget as well.
Click on the Publish a random number button several times and observe that the content that appears in the subscriber gadget gets updated accordingly.