Instana and MQTT — Revisited

Architecture overview
  1. The user loads the Web App from the OpenShift hosted in my house (hence the use of the VPN :-). The Web App starts up and initialises the MQTT client
  2. Once initialised messages are published to a topic
  3. This topic is subscribed to by the “loader” component which when it receives a message will interact with the “backend” component to create a response
  4. The “loader” publishes responses back to the Web App’s “receive” topic
  5. The Web App receives response messages via a subscription to the reponse topic
<html>
<head>
<title>MQTT WSS Tester</title>
</head>
<body>
<h1>Messages Received</h1>
<div id="rec_count"></div>
<div id="received"></div>
<p></p>
<button onclick="doSend('Do Send')">Click</button>
<script>
(function(s,t,a,n){s[t]||(s[t]=a,n=s[a]=function(){n.q.push(arguments)},
n.q=[],n.v=2,n.l=1*new Date)})(window,"InstanaEumObject","ineum");
ineum('reportingUrl', '<Instana Endpoint>');
ineum('key', '<Instana Key>');
ineum('trackSessions');
</script>
<script defer crossorigin="anonymous" src="https://eum.instana.io/eum.min.js"></script>
<script src="./mqtt.js"></script>
<script>
const instana_traceId = '{{payload.x-instana-t}}'
const CID = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
const helloTopic = "verdi/" + CID + "/hello"
const inputTopic = "verdi/" + CID + "/response"
function doSend(event) {
var msgJSON = {
'traceId' : instana_traceId,
'message' : "Hello world"

}
var msg = JSON.stringify(msgJSON);send(msg, client, instana_traceId ,event,helloTopic);
}
function send(msg, client, instana_traceId,event,topic) {
// Report the publish event
ineum('reportEvent', event, {
timestamp: Date.now(),
backendTraceId: instana_traceId,
componentStack: 'MQTT UI App',
meta: {
state: 'running'
}
});

client.publish(topic, msg );
}

const client = mqtt.connect(
"wss://<Message Gateway Host>",
{
port: 443,
username:"<Username>",
password:"<Password>",
clientId: CID,
keepalive: 45
})
var rec_count = 0client.subscribe(inputTopic)client.on("message", function (topic, payload) {
rec_count += 1
document.getElementById("rec_count").
innerHTML = "<p>Recieved count ... "+ rec_count + "</p>";
document.getElementById("received").
innerHTML = "<p>Received ... "+ [topic, payload].join(": ") + "</p>";
//client.end()
})

doSend('Send Hello');

</script>
</body>
</html>
Add Website
Set Website name
Generate Javascript
<html>
<head>
<title>MQTT WSS Tester</title>
</head>
<body>
<h1>Messages Received</h1>
<div id="rec_count"></div>
<div id="received"></div>
<p></p>
<button onclick="doSend('Do Send')">Click</button>
MQTT Client code
handleHello Function
Web App Serving
get function
backend.js
web application
web application view
custom events view
Send Hello custom events details
Analyze custom event
Events list
Web page context
Backend trace
send message
Web page context view

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tony Hickman

Tony Hickman

I‘ve worked for IBM all of my career and am an avid technologist who is keen to get his hands dirty. My role affords me this opportunity and I share what I can