Creating WebSocket Enabled Gadgets

Jaggery WebSockets are enabled in UES gadgets, as they allow bi-directional real-time communication between servers and clients.

Follow the instructions below to create a WebSocket enabled gadget. Steps 1 to 3 explains the WebSocket client implementation. The sample client application provides a text field and button to send messages, and provides a place where messages from the server are printed. Steps 4  explains the server implementation. The dummy server acknowledges all messages and prints the same message with some dummy text.  

Step 1: Create a gadget

You can either create a gadget via the UI or programmatically as follows:

1. Create a directory for your gadget named  dummy-chat.

2. Create your gadget XML file named  dummy-chat.xml and save it in your gadget directory, which is namely  dummy-chat.
   

   dummy-chat.xml

   <?xml version="1.0" encoding="UTF-8" ?>
   <!--Gadget definition start-->
   <Module>
   <!--Gadget name, description, tags etc.. goes here-->
   	<ModulePrefs title="WS Dummy chat application"
                	height="350"
                	description="This is a dummy sample gadget to showcase Websocket capability"
                	tags="chat">
       	<Require feature="dynamic-height"/>
   	</ModulePrefs>
   <!--HTML to render chat UI -->
   	<Content type="html">
       	<![CDATA[
      	 <script src="/portal/gadgets/dummy-chat/js/dummy-chat.js" type="text/javascript"></script>
      	 <div id="gadget-wrapper">
      			 <div id="msg-content"></div>
      			 <div id="gadget-area-div">
      			 <textarea rows="4" cols="50" id="msg"></textarea><br/>
      			 <button type="button" onclick="send()">Send Me!</button>
      			 </div>
      	 </div>
      	 ]]>
   	</Content>
   </Module>
   <!--Gadget definition end-->

    

Step 2: Define the gadget front-end functionality

The front-end functionality of the gadget is defined in a .js file. Create a directory named js and save the  dummy-chat.js file with the following content in the js directory.

var url,ws;
 
window.onload = function WindowLoad(event) {
    url = 'wss://localhost:9443/ws-chat/server.jag';
    ws = new WebSocket(url);
 
    //event handler for the message event in the case of text frames
    ws.onopen = function() {
    console.log("web Socket onopen. ");
    };
    ws.onmessage = function(event) {
    console.log("web Socket Onmessage from Server. " + event.data);
    var reply = document.getElementById('msg-content');
    reply.innerHTML = reply.innerHTML + '<br/>' + event.data;
    };
    ws.onclose = function() {
    console.log("web Socket onclose. ");
    };
}
 
//send msg to the server
function send(){
    var msg = document.getElementById('msg');
    ws.send(msg.value);
    console.log("Client message "+msg.value);
    msg.value = '';
}

Step 3: Add the gadget banner and thumbnail

 Optionally, save an eye catching thumbnail and banner for the gadget in the gadget directory, which is namely  dummy-chat. The directory structure is as follows:

Step 4: Define the server configuration

1. Create a new jaggery app and name it ws-chat.

2. Create the server.jag file with following content inside ws-chat directory.

   server.jag

   <%
   var log = new Log();
   webSocket.ontext = function (data) {
   	log.info('Client Sent : ' + data);
   	var ws = this;
   	setTimeout(function () {
      	 var currentDate = new Date();
      	 ws.send("message received !!");
      	 ws.send(currentDate+" : "+data);
   	}, 1000);
   };
   	 
   webSocket.onbinary = function (stream) {
   	log.info('Client Streamed : ' + stream.toString());
   };
   %>

    The server will send the client the following message together with the received message and the timestamp.
    “message received !!” 

Step 5: Deploy the gadget client and server jaggery app

1. Copy the ws-chat jaggery application and host it inside the <UES_HOME>/repository/deployment/server/jaggeryapps/ directory.
2. Move the dummy-chat gadget to the <UES_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets/ directory.
3. Start an UES instance by running ./wso2server.sh from the <UES_HOME>/bin/ directory.
   You can verify availability of the new gadget by browsing the  following  URL: 
   http://localhost:9763/store/assets/gadget/

Step 6: Create a dashboard with the gadget

1. Bookmark the dummy-chat gadget.
2. Sign into the portal using the following URL:
   http://localhost:9763/portal  
3. Create a dashboard that uses the dummy-chat gadget.

4. While logged into UES, browse the dashboard using the following URL. You will be able to use the dummy-chat gadget.
   https://localhost:9443/<DASHBOARD_NAME>/