Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 27
Like Tree1Likes

Thema: Javascript SSE und JSON parsen - Optimierungsideen gesucht

  1. #1
    Communicate ist offline 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"}
    Hier der 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')  
    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 :-)
    Geändert von mikdoe (10-02-2017 um 07:30 Uhr) Grund: Gelöst gesetzt

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht

    Was ist der Zweck der ganzen Variablen?

  3. #3
    Communicate ist offline 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:-)

  4. #4
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    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.

  5. #5
    Communicate ist offline 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?

  6. #6
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    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);

  7. #7
    Communicate ist offline Jungspund
    registriert
    03-02-2017
    Beiträge
    12

    AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht

    Zitat Zitat von Dormilich Beitrag anzeigen
    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);
    Vielen Dank, das klingt logisch :-)

    Ein kleines Problem habe ich leider noch:

    ein
    Code:
    console.log(items[name])
    bringt mir in Firebug nur ein

    ReferenceError: items is not defined

    Was mache ich falsch?

  8. #8
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht

    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.
    Hoffe ich konnte helfen

  9. #9
    Communicate ist offline 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>
    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 - - -
    Geändert von Communicate (04-02-2017 um 16:43 Uhr)

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    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])
    	}	
    });

  11. #11
    Communicate ist offline 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

  12. #12
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht

    Zitat Zitat von Communicate Beitrag anzeigen
    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.

  13. #13
    Communicate ist offline 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?

  14. #14
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: Javascript SSE und JSON parsen - Optimierungsideen gesucht

    Zitat Zitat von Communicate Beitrag anzeigen
    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?

  15. #15
    Communicate ist offline 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?

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. [ADDON] HTML Quellcode mit Javascript anzeigen und parsen?
    Von Computerfreak im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 27-04-2015, 09:25
  2. Komplexe XML-Datei mit javascript(jquery) parsen
    Von Mrtwomoon im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 18-06-2012, 07:47
  3. Antworten: 34
    Letzter Beitrag: 03-02-2011, 19:55
  4. JSON parsen mit JQuery
    Von solirocks im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 16-07-2010, 13:58
  5. Javascript XML parsen
    Von philippd im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 17-09-2008, 07:38

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •