dj7nt/mqtsream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now in viewable

Browse Source
This commit is contained in:
Dorgeist
2025-04-02 12:19:38 +00:00
parent 2a9640081b
commit a596567204
2 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
index.html
View File

@@ -9,35 +9,95 @@
.monospace{font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;} .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::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;} .selection::-moz-selection , .selection *::-moz-selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
</style> </style>
</head> </head>
<body> <body>
<div id="mqtt" class="monospace selection"></div> <h1>Live QSOs</h1>
<table id="messagesTable">
<thead>
<tr>
<th>Wann</th>
<th>Von</th>
<th>Von Grid</th>
<th>Nach</th>
<th>Nach Grid</th>
<th>Band</th>
<th>Mode</th>
<th>RSTR</th>
<th>RSTS</th>
</tr>
</thead>
<tbody>
<!-- Rows will be dynamically added here -->
</tbody>
</table>
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
var lines = 0; const tableBody = document.getElementById('messagesTable').querySelector('tbody');
var buffer = $('#mqtt'); var lines = 0;
var socket = io.connect("/"); // http://localhost:8000"); var buffer = $('#mqtt');
socket.on('connect', function() { var socket = io.connect("/"); // http://localhost:8000");
console.log('Connected to:', socket.host); socket.on('connect', function() {
}); console.log('Connected to:', socket.host);
socket.on('mqtt', function(message) { });
try { socket.on('mqtt', function(message) {
showit=JSON.stringify(message); try {
} catch {}; showit=JSON.stringify(message);
buffer.append( showit.toString() + '<br/>' ); } catch {};
buffer.scrollTop(lines*100); const row = document.createElement('tr');
lines++; const timestampCell = document.createElement('td');
}); const CellCall = document.createElement('td');
const CellGrid = document.createElement('td');
const CellStationCall = document.createElement('td');
const CellStationGrid = document.createElement('td');
const CellBand = document.createElement('td');
const CellMode = document.createElement('td');
const CellRSTR = document.createElement('td');
const CellRSTS = document.createElement('td');
/* CellCall.textContent = message.call;
$( "#i_topic" ).change(function() { CellGrid.textContent = message.grid;
socket.emit("wishtopic",this.value); CellStationCall.textContent = message.station_call;
$('#mqtt').empty(); CellStationGrid.textContent = message.station_grid;
}); CellBand.textContent = message.band;
*/ CellMode.textContent = message.mode;
CellRSTR.textContent = message.RST_RCVD;
CellRSTS.textContent = message.RST_SENT;
timestampCell.textContent = message.qso_time;;
})(); row.appendChild(timestampCell);
row.appendChild(CellStationCall);
row.appendChild(CellStationGrid);
row.appendChild(CellCall);
row.appendChild(CellGrid);
row.appendChild(CellBand);
row.appendChild(CellMode);
row.appendChild(CellRSTR);
row.appendChild(CellRSTS);
tableBody.insertBefore(row, tableBody.firstChild);
});
/*
$( "#i_topic" ).change(function() {
socket.emit("wishtopic",this.value);
$('#mqtt').empty();
});
*/
})();
</script> </script>
</body> </body>
</html> </html>

9
mqtt.js
View File

@@ -36,7 +36,6 @@ io.on('connection', (socket) => { // Neue socket.io Connection?
try { try {
messagex=JSON.parse(message); // Versuchen mqtt-nachricht durch den jsonparser zu parsen messagex=JSON.parse(message); // Versuchen mqtt-nachricht durch den jsonparser zu parsen
msg.content=messagex; // ergebnis in content haemmern msg.content=messagex; // ergebnis in content haemmern
console.log("JSON");
} catch(e) { } catch(e) {
console.log("No JSON"); console.log("No JSON");
} }
@@ -45,6 +44,7 @@ io.on('connection', (socket) => { // Neue socket.io Connection?
} }
tobrowser=parse_msg(msg.content); tobrowser=parse_msg(msg.content);
socket.emit("mqtt",tobrowser); // und raus an den Browser (nur fuer DIESES Socket, nicht fuer alle Clients) damit socket.emit("mqtt",tobrowser); // und raus an den Browser (nur fuer DIESES Socket, nicht fuer alle Clients) damit
console.log('QSO from: '+tobrowser.station_call+' with '+tobrowser.call+' in Mode: '+tobrowser.mode+' at '+tobrowser.qso_time);
// socket.emit("mqtt",parse_msg(msg)); // und raus an den Browser (nur fuer DIESES Socket, nicht fuer alle Clients) damit // socket.emit("mqtt",parse_msg(msg)); // und raus an den Browser (nur fuer DIESES Socket, nicht fuer alle Clients) damit
}); });
@@ -53,14 +53,17 @@ io.on('connection', (socket) => { // Neue socket.io Connection?
function parse_msg(msg) { function parse_msg(msg) {
let retmsg={}; let retmsg={};
retmsg.call=msg.COL_CALL; retmsg.call=msg.COL_CALL;
retmsg.station_call=msg.STATION_CALLSIGN; retmsg.station_call=msg.COL_STATION_CALLSIGN;
retmsg.station_grid=msg.COL_MY_GRIDSQUARE; retmsg.station_grid=msg.COL_MY_GRIDSQUARE;
retmsg.grid=msg.COL_GRIDSQUARE; retmsg.grid=msg.COL_GRIDSQUARE;
retmsg.band=msg.COL_BAND; retmsg.band=msg.COL_BAND;
retmsg.mode=msg.COL_MODE retmsg.mode=msg.COL_MODE
retmsg.RST_RCVD=msg.COL_RST_RCVD;
retmsg.RST_SENT=msg.COL_RST_SENT;
retmsg.qso_time=msg.COL_TIME_ON;
return retmsg; return retmsg;
} }
http.listen(8000, () => { // Webserver starten http.listen(8000,'127.0.0.1', () => { // Webserver starten
console.log(`Socket.IO server running at http://localhost:8000/`); // debug console.log(`Socket.IO server running at http://localhost:8000/`); // debug
}); });