ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add WebSocket support for real-time status updates

Browse source
This commit is contained in:
RaffaelW 2025-04-17 22:35:26 +02:00
parent c0da3a6af1
commit e256d16f8d
8 changed files with 112 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
data/index.html
View file

@ -13,6 +13,7 @@
<script type="module" src="/reset.js" defer></script> <script type="module" src="/reset.js" defer></script>
<script type="module" src="/range-input.js" defer></script> <script type="module" src="/range-input.js" defer></script>
<script type="module" src="/status.js" defer></script> <script type="module" src="/status.js" defer></script>
<script type="module" src="/websocket.js" defer></script>
</head> </head>
<body> <body>
<main> <main>

24
data/status.js
View file

@ -1,4 +1,5 @@
import { data } from "./load-data.js"; import { data } from "./load-data.js";
import { initWebSocket, registerCallback } from "./websocket.js";
const statusDialog = document.querySelector(".dialog-status"); const statusDialog = document.querySelector(".dialog-status");
const expandButton = document.querySelector(".expand-status"); const expandButton = document.querySelector(".expand-status");
@ -7,24 +8,8 @@ expandButton.addEventListener("click", () => {
statusDialog.showModal(); statusDialog.showModal();
}); });
async function loadStatus() { registerCallback("status", setStatus);
try { initWebSocket();
const res = await fetch("/status");
if (!res.ok) {
throw new Error(
`Response status: ${res.status}\n${await res.text()}`
);
}
const data = await res.json();
console.log(data);
return data;
} catch (e) {
console.error(e);
return null;
}
}
function setStatus(status) { function setStatus(status) {
setValue("model", status.chip.model); setValue("model", status.chip.model);
@ -70,7 +55,6 @@ function setValue(className, value) {
function parseDuration(ms) { function parseDuration(ms) {
const date = new Date(ms); const date = new Date(ms);
console.log(date);
const time = const time =
date.getUTCHours().toString().padStart(2, "0") + date.getUTCHours().toString().padStart(2, "0") +
":" + ":" +
@ -126,5 +110,3 @@ function selectConnectionIcon(signalStrength) {
} }
return "signal1.svg"; return "signal1.svg";
} }
setStatus(await loadStatus());

37
data/websocket.js Normal file
View file

@ -0,0 +1,37 @@
const gateway = `ws://${window.location.hostname}/ws`;
let ws;
let callbacks = {};
export function initWebSocket() {
if (ws) return;
ws = new WebSocket(gateway);
ws.onopen = () => {
console.info("WebSocket connection opened");
};
ws.onclose = (event) => {
console.info("WebSocket connection closed, reason:", event.reason);
ws = null;
};
ws.onerror = (event) => {
console.warn("WebSocket encountered error, closing socket.", event);
ws.close();
ws = null;
};
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
console.log("received websocket data", message);
if (message.type in callbacks) {
callbacks[message.type](message.data);
}
};
}
export function registerCallback(type, callback) {
callbacks[type] = callback;
}

9
src/main.cpp
View file

@ -21,6 +21,7 @@
#include <esp_dmx.h> #include <esp_dmx.h>
#include <LittleFS.h> #include <LittleFS.h>
#include "websocket.h"
#include "routes/config.h" #include "routes/config.h"
#include "routes/networks.h" #include "routes/networks.h"
#include "routes/status.h" #include "routes/status.h"
@ -418,9 +419,6 @@ void setup()
server.on("/networks", HTTP_GET, [](AsyncWebServerRequest *request) server.on("/networks", HTTP_GET, [](AsyncWebServerRequest *request)
{ onGetNetworks(request); }); { onGetNetworks(request); });
server.on("/status", HTTP_GET, [](AsyncWebServerRequest *request)
{ onGetStatus(request); });
server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total) server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total)
{ {
if (request->url() == "/config" && request->method() == HTTP_PUT) { if (request->url() == "/config" && request->method() == HTTP_PUT) {
@ -429,7 +427,8 @@ void setup()
ESP.restart(); ESP.restart();
} }); } });
delay(1000); initWebSocket(&server);
server.begin(); server.begin();
Serial.println("Server started!"); Serial.println("Server started!");
@ -501,4 +500,6 @@ void loop()
{ {
transmitDmxToArtnet(dmx2, dmx2_data, universe2); transmitDmxToArtnet(dmx2, dmx2_data, universe2);
} }
webSocketLoop();
} }

6
src/routes/status.cpp
View file

@ -19,7 +19,7 @@ int8_t getWiFiStrength()
} }
} }
void onGetStatus(AsyncWebServerRequest *request) JsonDocument buildStatusJson()
{ {
JsonDocument doc; JsonDocument doc;
@ -39,7 +39,5 @@ void onGetStatus(AsyncWebServerRequest *request)
doc["psram"]["total"] = ESP.getPsramSize(); doc["psram"]["total"] = ESP.getPsramSize();
doc["connection"]["signalStrength"] = getWiFiStrength(); doc["connection"]["signalStrength"] = getWiFiStrength();
String jsonString; return doc;
serializeJson(doc, jsonString);
request->send(200, "application/json", jsonString);
} }

2
src/routes/status.h
View file

@ -2,4 +2,4 @@
#include <ArduinoJson.h> #include <ArduinoJson.h>
#include <driver/temp_sensor.h> #include <driver/temp_sensor.h>
void onGetStatus(AsyncWebServerRequest *request); JsonDocument buildStatusJson();

52
src/websocket.cpp Normal file
View file

@ -0,0 +1,52 @@
#include "websocket.h"
AsyncWebSocket ws("/ws");
long webSocketLastUpdate = 0;
const int WS_UPDATE_INTERVAL = 10 * 1000; // 10 seconds
String buildStatusString()
{
JsonDocument doc;
doc["type"] = "status";
doc["data"] = buildStatusJson();
String jsonString = "";
serializeJson(doc, jsonString);
return jsonString;
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len)
{
switch (type)
{
case WS_EVT_CONNECT:
Serial.printf("[WS] Client %u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
// directly send status to client
ws.text(client->id(), buildStatusString());
break;
case WS_EVT_DISCONNECT:
Serial.printf("[WS] Client %u disconnected\n", client->id());
break;
case WS_EVT_DATA:
Serial.printf("[WS] Data received from client %u: %s\n", client->id(), (char *)data);
break;
default:
break;
}
}
void webSocketLoop()
{
if (millis() - webSocketLastUpdate > WS_UPDATE_INTERVAL)
{
ws.textAll(buildStatusString());
webSocketLastUpdate = millis();
}
}
void initWebSocket(AsyncWebServer *server)
{
ws.onEvent(onEvent);
server->addHandler(&ws);
}

11
src/websocket.h Normal file
View file

@ -0,0 +1,11 @@
#include <AsyncWebServer_ESP32_W5500.h>
#include "routes/status.h"
#ifndef WEBSOCKET_H
#define WEBSOCKET_H
void initWebSocket(AsyncWebServer *server);
void webSocketLoop();
#endif