Monitoring sensor data in Oracle JET Mobile App over WebSocket (Part 1)

I was prototyping on how to display DHT22 sensor data to my JET mobile application and would like to share my findings.

In part 1, we will show WebSocket server sending sensor values to the client. In final part, i.e. part 2 we will develop a JET Mobile App from scratch showcasing sensor data.

DHT22 is a low-cost sensor, made up of humidity and temperature sensor. The data can be read over GPIO pin, so I connected it with ESP8266 NodeMCU.

Then, ran WebSocket server on the NodeMCU chip to send DHT22 sensor data and finally developed Oracle JET Mobile app that used WebSocket client Javascript API’s to monitor temperature data.

Below figure shows a visual representation how Oracle JET Mobile application interacts with NodeMCU via WebSocket.

JET Mobile App communicating to ESP8266 NodeMCU

The mobile app here, acting as websocket client establishes handshake with the NodeMCU, having websocket server installed in it. Once connection is established , the client requests for temperature values and the changed temperature values are displayed in Dial gauge — ojgauge, oracle jet component. User can optionally stop measuring and can disconnect the connection.

Getting started with setting hardware — ESP8266 NodeMCU and DHT22 sensor

In this section we will connect DHT22 to ESP8266 NodeMCU

1. Three jump wires
2. DHT22
3. ESP8266 NodeMCU
4. Micro-USB Cable

Wiring

We then wire DHT22 with NodeMCU as shown below:

Setup and Installation

I used Arduino IDE to program the NodeMCU, it is the easiest way to getup and running with DHT22.

Software installation steps to upload WebSocket server in NodeMCU:

1. Open the Preferences window and type in the “Additional Board Manager URLs” the following address: http://arduino.esp8266.com/stable/package_esp8266com_index.json
2. Go to Tools menu, configure your board according to the model you are using.
   Board: NodeMCU
   CPU Frequency: 80 MHz
   Upload Speed: 115200

1. Connect the NodeMCU to computer and configure the Port. Use Tools-Port to select the port your device is connected to.
2. Install Additional libraries , Sketch -> Include Library -> Manage Libraries Add libraries for DHT22 sensor and WebSocket server

Code

Once your machine is setup and device is configured, next step is to upload the server code into NodeMCU, below is the code

i) The code sets up serial connection to send debug information to the computer

ii) Connects to the WIFI router as per given SSID and password

iii) Once Wifi is connected, starts WebSocket Connection and connects to the assigned IP

iV) Once a channel is established, on each request from client, the server sends back the temperature value read from DHT22 sensor

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <WebSocketsServer.h>
#include <Hash.h>
#include "DHT.h"
#define DHTPIN D2     // what digital pin the DHT22 is conected to
#define DHTTYPE DHT22   // there are multiple kinds of DHT sensors
DHT dht(DHTPIN, DHTTYPE);
const char* SSID     = "YOUR_WIFI_SSID";
const char* PASSWORD = "YOUR_WIFI_PASSWORD";
ESP8266WiFiMulti WiFiMulti;
WebSocketsServer webSocket = WebSocketsServer(81);
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
    String t = String(dht.readTemperature());    
    
    switch(type) {
        case WStype_DISCONNECTED:
            break;
        case WStype_CONNECTED:
            {
                IPAddress ip = webSocket.remoteIP(num);
                Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
            }
            break;
        case WStype_TEXT:
         
              t = String(dht.readTemperature());
              webSocket.sendTXT(num, t);
            
            break;
        case WStype_ERROR:
            break;
default:
            break;
    }
}
void setup() {
    Serial.begin(115200);
for(uint8_t t = 4; t > 0; t--) {
        delay(1000);
    }
WiFiMulti.addAP(SSID, PASSWORD);
while(WiFiMulti.run() != WL_CONNECTED) {
        delay(100);
        Serial.println(".");
    }
  Serial.println("");
  Serial.println("WiFi connected");  
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
webSocket.begin();
    webSocket.onEvent(webSocketEvent);
}
void loop() {
    
    webSocket.loop();
}

Upload and test

Once code is successfully compiled, we upload the same and start testing.Go to Tools-Serial Monitor and we can view the logs here

Please note the IP address assigned to WebSocketserver. We can now test this server with any simple WebSocket client, like websocket client chrome extension

Enter WebSocket IP address , and port (81) and send a request packet , and if everything is setup correctly, you will start getting the room temperature in Celsius format!

So, with this step, our WebSocket server is ready to send temperature data. In next blog we will develop a JET Mobile temperature sensor application.

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