Skip to main content

[FLaNK] Smart Weather Websocket Application - Kafka Consumer

 [FLaNK] Smart Weather Websocket Application - Kafka Consumer

Part 2 of 2

This is based on Koji Kawamura's excellent GIST:

As part of my Smart Weather Application, I wanted to display weather information as it arrives in a webpage using web sockets.   Koji has an excellent NiFi flow that does it.   I tweaked it and add some things since I am not using Zeppelin.   I am hosting my webpage with NiFi as well.

We simply supply a webpage that makes a websocket connection to NiFi and NiFi keeps a cache in HBase to know what the client is doing.  This cache is updated by consuming from Kafka.   We can then feed events as they happen to the page.

Here is the JavaScript for the web page interface to websockets:

function sendMessage(type, payload) {
websocket.send(makeMessage(type, payload));

function makeMessage(type, payload) {
return JSON.stringify({
'type': type,
'payload': payload

var wsUri = "ws://edge2ai-1.dim.local:9091/test";

websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {

sendMessage('publish', {
"message": document.getElementById("kafkamessage")

websocket.onerror = function(evt) {console.log('ERR', evt)};
websocket.onmessage = function(evt) {
var dataPoints = JSON.parse(;

var output = document.getElementById("results");
var dataBuffer = "<p>";
for(var i=0;i<dataPoints.length;i++)
dataBuffer += " <img src=\"" + dataPoints[i].icon_url_base + dataPoints[i].icon_url_name + "\"> &nbsp;" + dataPoints[i].location +
dataPoints[i].station_id + "@" + dataPoints[i].latitude + ":" +
dataPoints[i].longitude + "@" + dataPoints[i].observation_time +
dataPoints[i].temperature_string + "," + dataPoints[i].relative_humidity + "," +
dataPoints[i].wind_string +"<br>";

output.innerHTML = output.innerHTML + dataBuffer + "</p><br>";


Video Walkthrough:

Source Code:

Kafka Topic

weathernj Schema

The schema registry has a live Swagger interface to it's REST API

NiFi Flow Overview

Ingest Via REST All US Weather Data from Zipped XML

As Data Streamings In, We Can Govern It

Ingested Data is Validated Against It's Schema Then Pushed to Kafka as Avro

We consume that Kafka data in store it in Kudu for analytics

We host a web page for our Websockets Application in NiFi with 4 simple processors.

Listen and Put Web Socket Messages Between NiFi Server and Web Application

Kafka Data is Cached for Websocket Applications

Set the Port for WebSockets via Jetty Web Server

Use HBase As Our Cache

We can monitor our Flink SQL application from the Global Flink Dashboard

We can query our Weather data store in Apache Kudu via Apache Impala through Apache Hue 

Kudu Visualizations of Our Weather Data in Cloudera Visual Applications

Popular posts from this blog

Ingesting Drone Data From DJII Ryze Tello Drones Part 1 - Setup and Practice

Ingesting Drone Data From DJII Ryze Tello Drones Part 1 - Setup and Practice In Part 1, we will setup our drone, our communication environment, capture the data and do initial analysis. We will eventually grab live video stream for object detection, real-time flight control and real-time data ingest of photos, videos and sensor readings. We will have Apache NiFi react to live situations facing the drone and have it issue flight commands via UDP. In this initial section, we will control the drone with Python which can be triggered by NiFi. Apache NiFi will ingest log data that is stored as CSV files on a NiFi node connected to the drone's WiFi. This will eventually move to a dedicated embedded device running MiniFi. This is a small personal drone with less than 13 minutes of flight time per battery. This is not a commercial drone, but gives you an idea of the what you can do with drones. Drone Live Communications for Sensor Readings and Drone Control You must connect t

NiFi on Cloudera Data Platform Upgrade - April 2021

CFM 2.1.1 on CDP 7.1.6 There is a new Cloudera release of Apache NiFi now with SAML support. Apache NiFi Apache NiFi Registry See:   For changes: Get your download on: To start researching for the future, take a look at some of the technical preview features around Easy Rules engine and handlers. Make sure you use the latest possible JDK 8 as there are some bugs out there.   Use a recent v

Using Apache NiFi in OpenShift and Anywhere Else to Act as Your Global Integration Gateway

Using Apache NiFi in OpenShift and Anywhere Else to Act as Your Global Integration Gateway What does it look like? Where Can I Run This Magic Engine: Private Cloud, Public Cloud, Hybrid Cloud, VM, Bare Metal, Single Node, Laptop, Raspberry Pi or anywhere you have a 1GB of RAM and some CPU is a good place to run a powerful graphical integration and dataflow engine.   You can also run MiNiFi C++ or Java agents if you want it even smaller. Sounds Too Powerful and Expensive: Apache NiFi is Open Source and can be run freely anywhere. For What Use Cases: Microservices, Images, Deep Learning and Machine Learning Models, Structured Data, Unstructured Data, NLP, Sentiment Analysis, Semistructured Data, Hive, Hadoop, MongoDB, ElasticSearch, SOLR, ETL/ELT, MySQL CDC, MySQL Insert/Update/Delete/Query, Hosting Unlimited REST Services, Interactive with Websockets, Ingesting Any REST API, Natively Converting JSON/XML/CSV/TSV/Logs/Avro/Parquet, Excel, PDF, Word Documents, Syslog, Kafka, JMS, MQTT, TCP