Ergebnis 1 bis 15 von 27
-
03-02-2017, 05:37 #1
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
Javascript SSE und JSON parsen - Optimierungsideen gesucht
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:
Code:event: message data: {"topic":"smarthome/items/GEG_HZ_Ist/state","payload":"{\"type\":\"DecimalType\",\"value\":\"21.30\"}","type":"ItemStateEvent"}
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; } } });
Geändert von mikdoe (10-02-2017 um 07:30 Uhr) Grund: Gelöst gesetzt
-
03-02-2017, 09:59 #2
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
Was ist der Zweck der ganzen Variablen?
-
03-02-2017, 12:36 #3
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
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:-)
-
03-02-2017, 13:08 #4
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
Für sowas ist ein Objekt besser geeignet. Dann hast du auch nicht so viele Variablen rumfliegen.
-
03-02-2017, 13:15 #5
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
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?
-
03-02-2017, 15:24 #6
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
Du nimmst eine Variable (das Objekt) anstatt der vielen. Dann vereinfacht sich das ganze ungemein:
Code:let name = event.topic.split('/')[2]; items[name] = JSON.parse(event.payload);
-
03-02-2017, 16:33 #7
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
-
03-02-2017, 16:48 #8
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
ReferenceError: items is not defined
sagt dir nur, das die Zuweisung an die Variableitems
nicht gelungen ist. Zeig doch mal deinen Code wie du ihn jetzt umgeändert hast.Hoffe ich konnte helfen
-
04-02-2017, 14:40 #9
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
Hey,
hier mein Code:
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>
:
- - - 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 - - -Geändert von Communicate (04-02-2017 um 16:43 Uhr)
-
04-02-2017, 23:43 #10
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
Du musst eine Variable items definieren, in der der Inhalt dann gespeichert wird:
Code: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]) } });
-
07-02-2017, 07:30 #11
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
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
-
07-02-2017, 09:15 #12
-
07-02-2017, 09:36 #13
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
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?
-
07-02-2017, 10:00 #14
-
07-02-2017, 12:02 #15
Jungspund
- registriert
- 03-02-2017
- Beiträge
- 12
AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht
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?
Ähnliche Themen
-
[ADDON] HTML Quellcode mit Javascript anzeigen und parsen?
Von Computerfreak im Forum JavaScriptAntworten: 1Letzter Beitrag: 27-04-2015, 09:25 -
Komplexe XML-Datei mit javascript(jquery) parsen
Von Mrtwomoon im Forum JavaScriptAntworten: 1Letzter Beitrag: 18-06-2012, 07:47 -
Javascript lokal ausführen und xml File parsen
Von tbla im Forum JavaScriptAntworten: 34Letzter Beitrag: 03-02-2011, 19:55 -
JSON parsen mit JQuery
Von solirocks im Forum JavaScriptAntworten: 3Letzter Beitrag: 16-07-2010, 13:58 -
Javascript XML parsen
Von philippd im Forum JavaScriptAntworten: 1Letzter Beitrag: 17-09-2008, 07:38
Lesezeichen