jappel/scoreboard-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Frontend: Reconnect-Sync, Dropdowns ohne String-Interpolation, Fehlerpfad

Browse source 
Alle vier Frontends horchten auf ein Event 'connected', das nie gesendet wurde;
der Server verschickte stattdessen ein Event mit dem Namen "Hello user from
server" und leerem Payload. Beides ist entfernt. An seine Stelle tritt das
Socket.IO-eigene 'connect', das auch nach einem Reconnect feuert: Adminpanel und
Monitor holen sich dort den aktuellen Stand. Da der Pi das WLAN selbst
aufspannt, sind kurze Abbrueche im Betrieb normal — bisher blieb die Anzeige
danach auf einem veralteten Stand stehen, bis das naechste Ereignis eintraf.

Die Teamnamen-Dropdowns bauten ihre Eintraege als HTML-String zusammen und
interpolierten den Namen in einen onclick-Aufruf. Ein Name mit Apostroph, etwa
"SG D'Horn", zerlegte den Handler und machte den Eintrag unbrauchbar. Die
Eintraege entstehen jetzt ueber createTeamDropdownItem() mit textContent und
addEventListener, der Name kommt per Closure statt als String. Die
Schleifenvariable ist zudem korrekt deklariert, vorher war sie global.

fetchJson() kapselt Anfragen und liefert null, wenn der Server nicht erreichbar
ist oder mit einem Fehler antwortet, statt still in der Konsole zu scheitern.
timerStart und timerPause behalten ihre eigene Auswertung des 406-Status.

Das Verbindungs-Handling ist von routes/index.js nach controllers/socketio.js
gewandert, wo der Socket.IO-Server erzeugt wird, und protokolliert jetzt auch
Verbindungsabbrueche.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Julian Appel 2026-08-19 21:06:45 +02:00
parent 6f4c63aa6e
commit cd4877bdd2
6 changed files with 132 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

34
scoreboard/public/javascripts/indexScore.js
View file

@ -5,8 +5,12 @@ const socket = io(wss); // Connect to socketio s
// Websockets event handler
// ######################################################################################################################################################
socket.on('connected', (message) => {
console.log("Connected");
// 'connect' feuert bei jeder Verbindung, auch nach einem Reconnect. Da der Pi das WLAN
// selbst aufspannt, sind kurze Abbrueche normal: danach werden Timer und Spielstand neu
// geholt, damit die Anzeige nicht auf einem veralteten Stand haengen bleibt.
socket.on('connect', () => {
console.log("Verbunden");
initialUpdate();
});
socket.on('timerDurationLeft', (message) => {
@ -35,6 +39,22 @@ socket.on('scoreSideswitch', (message) => {
// General functions
// ######################################################################################################################################################
// Holt JSON von einem Endpunkt. Liefert null statt zu werfen, wenn der Server nicht
// erreichbar ist oder mit einem Fehler antwortet.
async function fetchJson(url) {
try {
const response = await fetch(url);
if(!response.ok) {
console.error("Anfrage fehlgeschlagen:", url, response.status);
return null;
}
return await response.json();
} catch (err) {
console.error("Server nicht erreichbar:", url, err);
return null;
}
}
// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
document.getElementById("durationLeft").innerHTML = values.print; // Display durationLeft as prettyfied string
@ -87,9 +107,8 @@ async function initialUpdate() {
// Request important timer values
async function timerGetValues() {
const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete
updateTimerFrontend(data); // Update admin frontend
const data = await fetchJson("/admin/timerGetValues"); // Call API Endpoint /admin/timerGetValues
if(data) updateTimerFrontend(data); // Update admin frontend
}
// ######################################################################################################################################################
@ -98,8 +117,7 @@ async function timerGetValues() {
// Request important values for score
async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
const data = await response.json(); // Wait for asynchronous transfer to complete and parse json (which got received by backend)
const data = await fetchJson("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues
console.log(data); // Print received data
updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
if(data) updateScoreFrontend(data); // Update admin frontend with received values for scoreboard
}