/
kafkaupdate4.html
129 lines (106 loc) · 3.08 KB
/
kafkaupdate4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<style>
#results {
height: 100ex;
overflow: auto;
border: 1px solid gray;
}
</style>
<title>NiFi Web Page For Kafka</title>
</head>
<body bgcolor="white" text="black">
<B>Kafka to Websockets Demo</b>
<br><br>
<br><b>Receiving Updated Kafka Data:</b>
<br><br>
Your Name: <input type="text" id="user_name" size="50">
Your Message: <input type="text" id="kafkamessage" size="200">
<input type="hidden" name="lng" id="lng" value="NA"/>
<input type="hidden" name="lat" id="lat" value="NA"/>
<input type="button" id="send" value="Send" onclick="sendKafkaMessage()"> <div id="msgout"> </div>
<p></p>
<br><br>
<div id="results"> </div>
<br><br>
<script>
var lat2 = 0;
var long2 = 1;
////////////
function geoFindMe() {
if (!navigator.geolocation){
return;
}
function success(position) {
lat2 = position.coords.latitude;
long2 = position.coords.longitude;
}
function error() {
return;
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
}
}
function sendKafkaMessage(){
geoFindMe();
sendMessage('publish', {
"message": document.getElementById("kafkamessage").value,
"latitude": lat2,
"longitude": long2
});
var msgout = document.getElementById("msgout");
msgout.innerHTML = "<b>Sent..." + document.getElementById("kafkamessage").value + ".</b><br>";
document.getElementById("kafkamessage").value = "";
}
function sendMessage(type, payload) {
ws.send(makeMessage(type, payload));
}
function makeMessage(type, payload) {
return JSON.stringify({
'type': type,
'payload': payload
});
}
var wsUri = "ws://edge2ai-1.dim.local:9091/test";
var ws = new WebSocket(wsUri);
function connect() {
geoFindMe();
var ws = new WebSocket(wsUri);
ws.onopen = function() {
sendMessage('publish', {
"message": document.getElementById("kafkamessage").value,
"latitude": lat2,
"longitude": long2
});
};
ws.onmessage = function(e) {
var dataPoints = JSON.parse(e.data);
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 + "\"> " + 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>";
};
ws.onclose = function(e) {
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
setTimeout(function() {
connect();
}, 1000);
};
ws.onerror = function(err) {
console.error('Socket encountered error: ', err.message, 'Closing socket');
ws.close();
};
}
connect();
</script>
© 2020 Tim Spann
</body>
</html>