Real Time Dashboard with WebSocket & SAP HANA Cloud Platform

I was inspired by this blog to create a real-time dashboard to monitor my laptop Windows 8.1 CPU usage in the SAP HANA Cloud Platform. We will create a simple app in the HANA cloud platform with WebSocket, some Python and VBScript scripts to get the CPU usage and display it in a simple gauge.

Prerequisites

• SAP HANA Cloud Platform: SAP HANA Cloud Platform
• SAP HANA Cloud Platform for Java 6 EE Web Profile: neo-javaee6-wp-sdk-2.39.13.1.zip
• Python: Download Python | Python.org

The app will look like this:

Create a Web Project in Eclipse

• Let’s start to create a project in Eclipse. Select New > Dynamic Web Project
• Give the project name: rtd. Target runtime is SAP HANA Cloud. Rtd is abbreviation of real-time dashboard.
  
• Create a Java package: rtd
  
• Create a java class: RTD
  
• Copy the following code into RTD.java:

  package rtd;
  import java.io.IOException;
  import java.util.Collections;
  import java.util.HashSet;
  import java.util.Set;
  import javax.websocket.OnClose;
  import javax.websocket.OnMessage;
  import javax.websocket.OnOpen;
  import javax.websocket.Session;
  import javax.websocket.server.ServerEndpoint;
  @ServerEndpoint("/rtd")
  public class RTD  {
    private static final Set<Session> peers = Collections
    .synchronizedSet(new HashSet<Session>());
    @OnMessage
    public void onMessage(final String message) {
    for (final Session peer : peers) {
    try {
    peer.getBasicRemote().sendText(message);
    } catch (final IOException e) {
    e.printStackTrace();
    }
    }
    }
    @OnOpen
    public void onOpen(final Session peer) {
    peers.add(peer);
    }
    @OnClose
    public void onClose(final Session peer) {
    peers.remove(peer);
    }
  }
  
  
  
  
  

• And also create the index.html under folder WebContent and copy d3 and gauges folder under the same folder. I have stored the complete source-code in the Github: https://github.com/ferrygun/RTD

  Below is the snippet of the JavaScript in the index.html:

  
  <script>
    //var wsUri = "ws://localhost:8080/rtd/rtd";
    var wsUri = "wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd";
          function init() {
              output = document.getElementById("output");
          }
          function send_message() {
              websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) {
                  onOpen(evt)
              };
              websocket.onmessage = function(evt) {
                  onMessage(evt)
              };
              websocket.onerror = function(evt) {
                  onError(evt)
              };
          }
          function onOpen(evt) {
              console.log("Connected to rtd!");
              doSend(0);
          }
          function onMessage(evt) {
              console.log(evt.data);
              updateGauges(evt.data)
        
          }
          function onError(evt) {
              console.log('Error: ' + evt.data);
          }
          function doSend(message) {
              websocket.send(message);
              //websocket.close();
          }
    
    
          window.addEventListener("load", init, false);
    var gauges = [];
    function createGauge(name, label, min, max)
    {
    var config =
    {
    size: 300,
    label: label,
    min: undefined != min ? min : 0,
    max: undefined != max ? max : 100,
    minorTicks: 5
    }
    var range = config.max - config.min;
    config.greenZones = [{ from: config.min, to: config.min + range*0.75 }];
    config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
    config.redZones = [{ from: config.min + range*0.9, to: config.max }];
    gauges[name] = new Gauge(name + "GaugeContainer", config);
    gauges[name].render();
    }
    function createGauges()
    {
    createGauge("cpu", "CPU Usage Monitoring");
    }
    function updateGauges(value)
    {
    for (var key in gauges)
    {
    console.log(value);
    gauges[key].redraw(value);
    }
    }
    function initialize()
    {
    createGauges();
    send_message();
    }
  </script>
  
  
  
  
  

• The final folder structure would be like this:
  

Deploy to HANA Cloud Platform

After you have created the web project in Eclipse, we will deploy the app in the HANA Cloud Platform.

• Export the war file to the location where you have installed the Java 6 EE Web Profile: <Java_6_EE_Web_Profile>/tools . Name it as rtd.war.

  

• Open your command prompt and cd to the location of <Java_6_EE_Web_Profile>/tools. Execute the following command:
  neo deploy -s rtd.war -b rtd -h hanatrial.ondemand.com –java-version 7 -a <accountname> -u <username>
  
  Where accountname is your HANA account name, for example: p057134trial and username is your account name without ‘trial’ (i.e., p057134) .
  
  We are specifying the java-version 7 as the WebSocket implementation requires JRE 7. Please refer to this.
• Once you have successfully deployed, go the Hana Cloud Platform Cockpit and check the status of the application. Just start the app if it is not started. You will also see the Java EE 6 Web Profile under the Runtime.
  
• Click the link under the Application URLs: https://rtdp057134trial.hanatrial.ondemand.com/rtd/
  
  And you will see the gauge. At the moment we are not sending any data to the WebSocket so you will not see any movement on the gauge.
  

Send Data to WebSocket

We are going to use the VBScript to get the CPU usage and send the information to WebSocket using Python. Since we are deploying the app in the HANA Cloud platform, the WebSocket URI is:

wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd

If you would like to test in the HANA local runtime, change the URI to:

ws://localhost:/8080/rtd/rtd

Below is the snippet Python program to send the information to the WebSocket:

#!/usr/bin/python
import sys
from websocket import create_connection
ws = create_connection("wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd")
#ws = create_connection("ws://localhost:8080/rtd/rtd")
arg1 = str(sys.argv[1])
print (arg1)
ws.send(arg1)
result =  ws.recv()
ws.close()

Open your command prompt and type the following: cscript //nologo getCPUUsage.vbs

If there is no error, you will see the movement of the pointer in the gauge.