Timothy Spann. 🇺🇦[FLaNK] Smart Weather Websocket Application - Kafka Consumer
Part 2 of 2
This is based on Koji Kawamura's excellent GIST:
https://gist.github.com/ijokarumawak/60b9ab2038ef906731ebf4c0eee97176
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.
https://www.datainmotion.dev/2020/11/flank-smart-weather-applications-with.html
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(evt.data); |
| |
|
| | var output = document.getElementById("results"); |
| | var dataBuffer = "
"; |
| | |
| | for(var i=0;i
| | { |
| | dataBuffer += " 
| | 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 +"
"; |
| |
|
| | } |
| | output.innerHTML = output.innerHTML + dataBuffer + "
"; |
| | }; |
| |
|
| |
Video Walkthrough: https://www.twitch.tv/videos/797412192?es_id=bbacb7cb39
*Source Code: * https://github.com/tspannhw/SmartWeather/tree/main
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
|
