Instana and MQTT — Revisited

Architecture overview
<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