Javascript SSE und JSON parsen - Optimierungsideen gesucht

[Communicate]

Hallo,

ich bekomme von einem Server diverse Nachrichten per SSE geschickt. Das ganze ist dann immer ein JSON-Satz.

Ich habe mir einen funktionierenden Code zusammengebaut - wenn ich ehrlich bin, sieht das aber für mich nicht so aus, als ob das die perfekte Lösung so ist. Daher meine Bitte an Euch, mir Tips zu geben, was / wie ich besser machen könnte.

Die Rohdaten des SSE-JSON sehen so aus:

event: message
data: {"topic":"smarthome/items/GEG_HZ_Ist/state","payload":"{\"type\":\"DecimalType\",\"value\":\"21.30\"}","type":"ItemStateEvent"}

Hier der Code:

<script>

var eventSource = new EventSource("http://192.168.178.52:8080/rest/events");
eventSource.addEventListener('message', function (eventPayload) {
var event = JSON.parse(eventPayload.data);
    
  
if (event.type == 'ItemStateEvent')  
console.log(event.topic)
{  
    
    
switch(event.topic)

{
   
        
    	case "smarthome/items/gFenster/state":
    	var gFenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/KEG_Fenster/state":
    	var KEG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/GEG_Fenster/state":
    	var GEG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_Fenster_V/state":
    	var WEG_Fenster_V = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_Fenster_L/state":
    	var WEG_Fenster_L = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/BOG_Fenster/state":
    	var BOG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/SOG_Fenster/state":
    	var SOG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/LOG_Fenster/state":
    	var LOG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/AOG_Fenster/state":
    	var AOG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/KUG_Fenster/state":
    	var KUG_Fenster = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/FensterO/state":
    	var FensterO = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/FensterG/state":
    	var FensterG = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/GEG_HZ_Ist/state":
    	var GEG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/GEG_HZ_Soll/state":
    	var GEG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/EG_Garderobe_Beleuchtung/state":
    	var EG_Garderobe_Beleuchtung = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/FEG_HZ_Ist/state":
    	var FEG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/FEG_HZ_Soll/state":
    	var FEG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/GEG_Rollo/state":
    	var GEG_Rollo = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/KEG_Beleuchtung/state":
    	var KEG_Beleuchtung = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/KEG_Lueftung/state":
    	var KEG_Lueftung = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/KEG_Rollo/state":
    	var KEG_Rollo = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_Rollo_V/state":
    	var WEG_Rollo_V = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_Rollo_R/state":
    	var WEG_Rollo_R = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_Rollo_L/state":
    	var WEG_Rollo_L = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_HZ_Ist/state":
    	var WEG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_HZ_Soll/state":
    	var WEG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/WEG_HZ_Luft/state":
    	var WEG_HZ_Luft = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/BOG_HZ_Ist/state":
    	var BOG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/BOG_HZ_Soll/state":
    	var BOG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/BOG_HZ_Luft/state":
    	var BOG_HZ_Luft = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/BOG_Rollo/state":
    	var BOG_Rollo = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/SOG_HZ_Ist/state":
    	var SOG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/SOG_HZ_Soll/state":
    	var SOG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/SOG_HZ_Luft/state":
    	var SOG_HZ_Luft = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/SOG_Rollo/state":
    	var SOG_Rollo = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/LOG_HZ_Ist/state":
    	var LOG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/LOG_HZ_Soll/state":
    	var LOG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/LOG_HZ_Luft/state":
    	var LOG_HZ_Luft = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/LOG_Rollo/state":
    	var LOG_Rollo = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/AOG_HZ_Ist/state":
    	var AOG_HZ_Ist = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/AOG_HZ_Soll/state":
    	var AOG_HZ_Soll = JSON.parse(event.payload);
    	break;
    	
    	case "smarthome/items/AOG_Rollo/state":
    	var AOG_Rollo = JSON.parse(event.payload);
    	break;
        
        
  
}

}
    
    
    
    
    
});

Ich würde mich über Feedback sehr freuen :-)

[Dormilich]

Was ist der Zweck der ganzen Variablen?

[Communicate]

Hallo,

Das ganze erfolgt im Rahmen einer Steuerung meiner vernetzten Hauselemente (also z.B. Fensterstatus, aktuelle Position der Rollläden, Soll Temperatur der Heizung, etc.).

Für jedes Element habe ich eine Variable angelegt. Mein Ziel ist es, diese dann in eine HTML Seite einzubauen. Z.B. Um ein Dashboard für alle Fenster zu erstellen. Es wird dann quasi angezeigt:
Fenster Küche: auf
Fenster Bad: geschlossen
Etc.

Auf und geschlossen sind in diesem Fall dann die Inhalte der jeweiligen Variablen.

Ich hoffe es ist klar geworden, was ich vor habe:-)

[Dormilich]

Für sowas ist ein Objekt besser geeignet. Dann hast du auch nicht so viele Variablen rumfliegen.

[Communicate]

Hallo,

Danke für die Rückmeldung. Hast du ein paar ergänzende Worte für mich oder gar ein Beispiel? Verstehe ich dich richtig das ich zuerst den json Stream parse dann den Teilstream (payload in meinem Fall) nehme und in ein Objekt stecke (wie auch immer ich das mache) und dann in HTML Teil immer nur eine Eigenschaft des Objekts aufrufe?

[Dormilich]

Du nimmst eine Variable (das Objekt) anstatt der vielen. Dann vereinfacht sich das ganze ungemein:

let name = event.topic.split('/')[2];
items[name] = JSON.parse(event.payload);

[Communicate]

Du nimmst eine Variable (das Objekt) anstatt der vielen. Dann vereinfacht sich das ganze ungemein:

let name = event.topic.split('/')[2];
items[name] = JSON.parse(event.payload);

Vielen Dank, das klingt logisch :-)

Ein kleines Problem habe ich leider noch:

ein

console.log(items[name])

bringt mir in Firebug nur ein

ReferenceError: items is not defined

Was mache ich falsch?

[miniA4kuser]

ReferenceError: items is not defined sagt dir nur, das die Zuweisung an die Variable items nicht gelungen ist. Zeig doch mal deinen Code wie du ihn jetzt umgeändert hast.

[Communicate]

Hey,

hier mein Code:

<script>

var eventSource = new EventSource("http://192.168.178.52:8080/rest/events");
eventSource.addEventListener('message', function (eventPayload) {
var event = JSON.parse(eventPayload.data);

 
  
if (event.type == 'ItemStateEvent')  

{  
	let name = event.topic.split('/')[2];
	items[name] = JSON.parse(event.payload);

	console.log(items[name])
	
}
    
    
    
    
    
});


</script>

ein console.log (name) bringt mir FEG_HZ_Soll.

:

- - - Aktualisiert - - -

Das sieht ja zunächst einmal gut aus. Die Zuweisung an das Array scheint aber nicht zu klappen. Die Herausforderung ist jetzt das ich nicht an den "value" wert herankommen...

- - - Aktualisiert - - -

Ich bin noch nicht so tief bewandert in JS. Kann ich irgendwie die Objekte bzw. die Elemente ausgeben lassen, damit ich so vielleicht besser raus bekomme, warum die Zuweisung nicht klappt ?

Gruß
Dominic

- - - Aktualisiert - - -

[kkapsner]

Du musst eine Variable items definieren, in der der Inhalt dann gespeichert wird:

var eventSource = new EventSource("http://192.168.178.52:8080/rest/events");
var items = {};
eventSource.addEventListener('message', function(eventPayload){
	var event = JSON.parse(eventPayload.data);
	if (event.type === "ItemStateEvent"){  
		var name = event.topic.split('/')[2];
		items[name] = JSON.parse(event.payload);
		console.log(name, items[name])
	}	
});

[Communicate]

Hallo zusammen,

Das hat mir sehr geholfen.

Eine hoffentlich letzte Frage habe ich noch.

Wenn ich die einzelnen Elemente aus dem items Array in den html Teil eingebunden habe ist die Seite ja noch statisch. Sprich, der html Teil bekommt nicht mit, wenn die Elemente sich aktualisieren. Wie kann ich denn dafür sorgen, dass immer bei Aktualisierung meines Arrays auch der html Teil aktualisiert wird?

Vielen Dank für Eure tolle Unterstützung

[Dormilich]

Wie kann ich denn dafür sorgen, dass immer bei Aktualisierung meines Arrays auch der html Teil aktualisiert wird?

Ruf eine Funktion auf, die das macht.

[Communicate]

Hallo Dormilich,
Der Ansatz klingt gut. Nur wie kann ich denn aus einer js Funktion genau die Teile im html aktualisieren die meine Werte aus dem Array anzeigen?

Ich bin leider in JS noch nicht so bewandert, aber wie "kennzeichne" ich denn die entsprechenden Stellen, so dass ich sie aktualisieren kann? Jeder stelle eine einzelne ID zuweisen, wird ja auch wieder unübersichtlich oder?

[Dormilich]

Nur wie kann ich denn aus einer js Funktion genau die Teile im html aktualisieren die meine Werte aus dem Array anzeigen?

indem du zum Datensatz das entsprechende Element updatest?

[Communicate]

Hi,

Hmmm, dann habe ich im Zweifel den Datensatz falsch eingebunden. Ich habe in html einen script tag eingebunden und dann einfach nur " items[FEG_HZ_SOLL ].value" reingeschrieben.

Hätte ich das anders einbinden müssen?