1st version / Websockets via node.js

This commit is contained in:
2024-03-07 04:56:06 +01:00
commit c56d158521
5 changed files with 122 additions and 0 deletions

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
node_modules/
config.js
yarn.lock

7
config.js.sample Normal file
View File

@@ -0,0 +1,7 @@
const config = {
mqttserver: {
host: "mqtt://[your mqtt-server hiere]"
}
};
module.exports = config;

44
index.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style type="text/css" rel="stylesheet">
#mqtt{ border: 1px solid #444; overflow-x:hidden; overflow-y:auto; background-color:#333; color: #EEE; text-shadow:#000 0 0 2px; height: 400px; padding: 10px; font-size:12px; line-height:20px;}
.monospace{font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;}
.selection::selection , .selection *::selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
.selection::-moz-selection , .selection *::-moz-selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
</style>
</head>
<body>
Topic: <input type="text" id="i_topic" name="n_topic"></br>
<div id="mqtt" class="monospace selection"></div>
<script type="text/javascript">
(function() {
var lines = 0;
var buffer = $('#mqtt');
var socket = io.connect("/"); // http://localhost:8000");
socket.on('connect', function() {
console.log('Connected to:', socket.host);
});
socket.on('mqtt', function(message) {
if (message.topic) {
try {
message.content=JSON.stringify(message.content);
} catch {};
buffer.append( message.timestamp.toString() +':&nbsp;<b>'+message.topic.toString() + '</b>&nbsp;&nbsp;' + message.content.toString() + '<br/>' );
buffer.scrollTop(lines*100);
lines++;
}
});
$( "#i_topic" ).change(function() {
socket.emit("wishtopic",this.value);
$('#mqtt').empty();
});
})();
</script>
</body>
</html>

49
mqtt.js Executable file
View File

@@ -0,0 +1,49 @@
#!/usr/bin/env -S node
const config = require("./config.js"); // Configfile einbinden
var mqttserver=config.mqttserver.host; // mqtt-host aus json im configfile holen (ginge auch direkt)
var mqtt = require('mqtt'); // mqtt-module einbinden
var dateFormat = require('dateformat'); // date-format-module einbinden
var topica='#'; // variable in der das topic gehalten wird
const app = require('express')(); // http-express framework laden (macht routing, etc.)
const http = require('http').Server(app); // http-server module laden
const io = require('socket.io')(http); // socket.io einbinden
var client=new Array(); // Haelt die einzelnen mqtt-clients je (browser-)client
app.get('/', (req, res) => { // Routing fuer index.html
res.sendFile(__dirname + '/index.html'); // index.html rauspusten
});
io.on('connection', (socket) => { // Neue socket.io Connection?
console.log(socket.id + " connected"); // Debug
client[socket.id] = mqtt.connect(mqttserver); // Dann neue MQTT-Verbindung aufmachen (je sock.io CLient eine, indiziert ueber die socket.id)
socket.on('wishtopic', (msg) => { // Von der Website kommt ein neuer Topic-Wunsch
client[socket.id].unsubscribe(topica); // Vom alten topic "unscubriben"
client[socket.id].subscribe(msg); // Neues Subscriben
topica=msg; // Neues merken
console.log('message: ' + msg); // Debug-Log
});
socket.on("disconnect", (reason) => { // Socket.io Client gone? Dann mqtt fuer diesen Client wieder schliessen
client[socket.id].end();
console.log(socket.id + " disconnected");
});
client[socket.id].on('message', function (topic, message) { // Handler, wenn mqtt-message kommt
date=new Date(); // Timestamp in date merken
msg={}; // msg-object initialisieren
if (message.toString().substring(0,1)=='{') { // JSON-String? Dann aufbereiten
try {
messagex=JSON.parse(message); // Versuchen mqtt-nachricht durch den jsonparser zu parsen
msg.content=messagex; // ergebnis in content haemmern
} catch(e) {}
} else {
msg.content=message.toString(); // Ist nix json? dann ab in "content" damit
}
msg.timestamp=dateFormat(date, "yyyy-mm-dd hh:MM:ss"); // timestamp formatieren
msg.topic=topic.toString(); // topic in das nachrichtenobject packen
socket.emit("mqtt",msg); // und raus an den Browser (nur fuer DIESES Socket, nicht fuer alle Clients) damit
});
});
http.listen(8000, () => { // Webserver starten
console.log(`Socket.IO server running at http://localhost:8000/`); // debug
});

19
package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"dependencies": {
"dateformat": "",
"express": "",
"http": "",
"mqtt": "",
"socket.io": ""
},
"name": "mqttstream",
"version": "1.0.0",
"description": "stream mqtt to browser",
"main": "mqtt.js",
"devDependencies": {},
"scripts": {
"test": "mqtt.js #"
},
"author": "int2k",
"license": "ISC"
}