Scenario:
...
Table of Contents | ||||
---|---|---|---|---|
|
...
Step 1: Create the publisher gadget
- Create a gadget named
publisher-gadget
...
- Define the following in the publisher
.
Create a file named publisher-gadget.xml
and add the following code. Please see the code comments inline for descriptions.
file:Code Block language xml title publisher-gadget.xml - Import is
pubsub-2
feature. - Define the channel that the publisher will use to publish messages. In this case the channel has been named
my-channel
. <?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>Based on the sample, define the button with the caption Publish a random number in the publisher
gadget.xml
file.Code Block <div> ]]> </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>
The
publish()
function call will get triggered when the latter mentioned button is clicked. This function call needs to be defined in thepublisher-gadget.js
file of the publisher gadget as follows:Code Block function </body> </html> ]]> </Content> </Module>
Create a folder named
js
within thepublisher-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 thejs
folder. Please see the code comments inline for descriptions.
Note that the following line of code defines that a random number needs to be published toCode Block language js title publisher-gadget.js /* 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; }
my-channel,
which has been declared in theModulePrefs
section.gadgets.Hub.publish("my-channel", message);
Set publish="true"
to indicate that the gadget is the publisher gadget.
Step 2: Create the subscriber gadget
- Import the
pubsub-2
feature and declare this gadget as a subscriber gadget in the Create a gadget namedsubscriber-gadget.
Create a file named
subscriber-gadget.xml
and add the following code. Please see the code comments inline for descriptions.
xml file.Code Block language xml title subscriber-gadget.
Set the fetched value from theCode Block <Require feature="pubsub-2"> xml <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Subscriber Gadget" author="WSO2 User Engagement Server" height="230" scrolling="true" <Param name="topics"> <![CDATA[ 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"> <Topic<Param titlename="randomNumber" name="my-channel" 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 subscribetype="truehtml"/> <![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> </Param>head> <body> </Require>
channel, by having a simple <div> in the<!-- Used to set the fetched value from the publisher's
subscriber-gadget.xml
file.Code Block channel --> <div id="output"> </div> </body> </html> ]]> </Content> </Module>
Create a folder named
js
within the Activate the subscription to the respective channel. In this sample the channel issubscriber-gadget
folder.Create a file named
subscriber-gadget.js
with the following code within thejs
folder. Please see the code comments inline for descriptions.Code Block language js title subscriber-gadget.js /* This is used to activate the subscription to the respective channel. In this sample the channel is "my-channel".
Code Block */ gadgets.HubSettings.onConnect = function () { gadgets.Hub.subscribe("my-channel", callback); }; /* Add the function that needs to be invoked at the subscriber's end.
will beIn this sample the message that is published by the publisher gadget
theis written in
function, which is in thethe JavaScript callback
subscriber-gadget.js
file.Code Block function. */ function callback(topic, obj, subscriberData) { document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj; }
Note The pub-sub implementation will be completed when steps 1 and 2 are completed.
...
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 Gadget and 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.