Monitoring sensor data in an Oracle JET Mobile App over WebSocket (Part 2 of 2)

In the first part of this blog series, we developed and tested WebSocket server running on NodeMCU and sending temperature sensor data. Now we will develop an Oracle JET Mobile Temperature sensor app using WebSocket Javascript APIs.

Here is the screen shot of the app that we will be covering in this blog:

JET Hybrid Mobile app monitoring live room temperature

Developing client-side Oracle JET Hybrid application

We will start implementing from scratch to implement receiving sensor values in oracle jet hybrid application.

Project Setup using Yeoman
Yeoman generator for Oracle JET lets you quickly set up a project for use as a Web application or mobile-hybrid application for Android and iOS. Use following command to generate hybrid application for Android:

yo oraclejet:hybrid tempsensor — template=navbar — platforms=android

The navbar template based native hybrid application code will be placed in “tempsensor” folder. For more scaffolding options, refer here

Implementation Steps

Once above command is successful, this signifies that your app is ready. Change to your new app directory app and update the following:

Note: For easy implementations, we will update dashboard view and viewmodel

Add the additional modules in dashboard.js file:

define([‘ojs/ojcore’, ‘knockout’, ‘jquery’, ‘ojs/ojgauge’, ‘ojs/ojbutton’, ‘ojs/ojinputtext’],

Add observable variables for gaugeValue, urlvalue and currentstatus:

self.gaugeValue = ko.observable(30);
self.urlvalue = ko.observable(“ws://192.168.43.29:81”);
self.currentStatus = ko.observable(“CLOSED”);

Add websocket client implementation:

WebSocket is protocol used to establish a continuous connection stream between a client and server. WebSocket reduces latency, makes real-time communication much more efficient since it makes single request to open a connection and reuses the same connection for subsequent calls from client to server and vice-versa.

Creating WebSocket Object and Register for events

Create a webSocket object to communicate using WebSocket protocol and register for the various events.

function getWSUri() {
  return self.urlvalue();
}
function connectSocket() {
  if (‘WebSocket’ in window) {
     websocket = new WebSocket(getWSUri());
     websocket.onmessage = onMessage;
     websocket.onerror = onError;
     websocket.onclose = onClose;
     websocket.onopen = onOpen;
     console.log(‘socket opened !’);
     self.currentStatus(‘WS Opened!’);
  } else {
     console.log(‘websocket not supported…!’);
     self.currentStatus(‘WS not supported’);
  }
}
self.ConnectToWS = function (data, event) {
  connectSocket();
  return true;
};

Open Connection

The socket is opened once connection is established successfully:

function onOpen() {
  console.log(“in onOpen method”);
  self.currentStatus(‘WS Open’);
};

Sending data to the server

After opening the connection, begin transmitting data to server using send() method

self.StartMeasuring = function (data, event) {
  self.handle = setInterval(function (){websocket.send(“temp”);}, 2000);
  return true;
};

Receiving messages from the server

WebSocket is an event-driven API; when messages are received, a “message” event is delivered to the onmessage function

function onMessage(evt) {
  self.gaugeValue(evt.data);
  console.log(self.gaugeValue());
}

Closing the connection

When you have finished the WebSocket connection, call close() method

// on close event
function onClose(evt) {
  console.log(‘websocket closed :’ + evt.code + “:” + evt.reason);
  self.currentStatus(‘WS closed, status:’ + evt.code);
}
self.DisconnectToWS = function (data, event) {
  websocket.close();
  return true;
};

Receive Error

// on error event
function onError(evt) {
  console.log(‘error :’ + evt);
  self.currentStatus(‘error :’ + evt);
}

Add functionality to stop data receiving from the server

self.StopMeasuring = function (data, event) {
clearInterval(self.handle);
 self.handle = 0;
 return true;
 };

Finally, update dashboard.html code for rendering UI:

Build and Run the application on Android device
In your command prompt, please change directory to project folder

Build the application using following command:
grunt build — platform=android

Once build is success, then run the application using following command:
grunt serve — platform=android — disableLiveReload=true

Demo Output:

Please note that both NodeMCU and mobile device should be behind same network, so that they should be able to connect to each other

WebSocket Server

Please run web-socket server as shown in previous blog on your NodeMCU hardware:

Serial Monitor

Open the serial Monitor to view IP address assigned to the WebSocket server.

JET Hybrid Mobile Temperature Sensor app

Connect to the WebSocket server address in the format ws://IP_ADDRESS_ASSIGNED:PORT and start monitoring the temperature data! Here is a small video demonstration of the application:

Temperature Sensor App (WebSocket client)

The views expressed in this post are my own and do not necessarily reflect the views of Oracle.