Sekündliche Werteaktualisierung auf Homepage?

brenner · 26. Oktober 2014

Zu Zeit frage ich meine Stromzählerr sekündlich ab, diese Werte werden in eine MySQL geschrieben und grafisch als Trend aufbereitet.

Ich würde nun aber gerne die Leistungsaufnahme aller drei Phasen als Livezahl auf einer Homepage darstellen, also so das sich der Wert jede Sekunde (ist auch nicht schlimm wenn nur alle 5-10s) aktualisiert?

Wie kommt man das hin? Ich habe leider keinen Ansatz dafür. Wichtig wäre es das die Anzeige auch auf Mobilgeräten funktioniert.

Tumbleweed · 26. Oktober 2014

Du musst eine Schnittstelle bauen (Stichworte: RESTful API, sollte HTTP GET requests mit JSON beantworten), die diese Werte liefert, wenn man sie anfragt. Dann kannst du diese Schnittstelle in Intervallen per Javascript pollen und mit den empfangenen Werten die Website aktualisieren (geht ebenfalls leicht per jQuery).

DjNDB · 26. Oktober 2014

Mal so aus Neugierde, wozu machst du das, und insbesondere weshalb mit so enorm hoher zeitlicher Auflösung?

benneq · 26. Oktober 2014

Wer oder was fragt denn den aktuellen Stand von den Stromzählern ab? Da muss ja irgendein Dienst auf irgendeinem Rechner laufen der das übernimmt. Oder können die Stromzähler selbstständig eine Verbindung zur DB aufnehmen und dort reinschreiben?

Wenn es schon so einen Dienst gibt und du ihn (idealerweise) selbst geschrieben hast, könnte man dort sicherlich eine Schnittstelle für WebSockets einbauen und jede Sekunde live die neuen Werte an die Webseiten Besucher schicken.

Ansonsten, wie bereits vorgeschlagen: Polling.

brenner · 26. Oktober 2014

Tumbleweed schrieb:
Du musst eine Schnittstelle bauen (Stichworte: RESTful API, sollte HTTP GET requests mit JSON beantworten), die diese Werte liefert, wenn man sie anfragt. Dann kannst du diese Schnittstelle in Intervallen per Javascript pollen und mit den empfangenen Werten die Website aktualisieren (geht ebenfalls leicht per jQuery).

Oha, das klingt spannend und die Hälfte der Begriffe hab ich bisher nur gelesen aber nichts mit gemacht.
Aber jetzt habe ich einen Ansatz zum suchen.

Ergänzung (26. Oktober 2014)

Ich habe jetzt einige Tutorials durch und einige Tests ebenfalls.
Leider komme ich nicht weiter.

Um es ganz einfach zu machem. Ich habe jetzt eine Datei "inhalt.txt" mit dem Inhalt "123". Dieser Inhalt soll jede x Sekunde ausgelesen werden und auf einer Webseite dargestellt werden.

Statische Ausgaben, auch mittel jQuery bekomme ich hin, aber keine sich selbst aktualisierende.

Daaron · 26. Oktober 2014

Na wenn es 1x mit jQuery geht, was hindert dich daran, das als Intervall über setTimeout() laufen zu lassen?

brenner · 26. Oktober 2014

Das kann ich dir sagen. Es ist die grosse Unwissenheit!

Dann google ich mal nach setTimeout...

Daaron · 26. Oktober 2014

Aber Tumbleweed hat doch genau das Thema doch mit verlinkt...

brenner · 28. Oktober 2014

Inzwischen habe ich ein brauchbare Lösung aus diversen Quellen zusammengefügt.

Alle 5s wird eine Textdatei (mit immer aktuellen Werten) ausgelesen und im Browser wiedergegeben.

Wie kann ich dafür sorgen das die Arrayelemente mit Zeilenumbrüchen ausgegeben werden so das die Werte untereinander stehen?

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Textfile To LocalStorage</title>
  <meta charset="UTF-8">
</head>

 
  <!-- JQuery einbinden -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
  <!-- JQuery code -->
  <script type="text/javascript">
 
(function worker() {


  // ausführen wenn seite geladen ist
  $(document).ready(function()
  {
    // inhalt von "data.txt" einlesen/laden
    // inhalt der datei steht dann in "msg"
    $("body").load("data.txt", function(msg)
    {
        // den inhalt/rückgabewert nach zeilenumbrüchen aufteilen
        // und in ein array ablegen
        var myArray = msg.split("\n");
        
        // array durchlaufen
        for(var i=0;i<myArray.length;i++)
        {
            // jedes element als key-var in localstorage speichern
            localStorage.setItem(i, myArray[i]);
        }
    });
  });


setTimeout(worker, 5000);
})();

  </script>    
 
//</head>
 
<body>
 
</body>
</html>

r15ch13 · 28. Oktober 2014

Deine For-Schleife so abaendern:

Code:

if(myArray.length) 
{
    var list = "<ul>";

    // array durchlaufen
    for(var i=0;i<myArray.length;i++)
    {
        // jedes element als key-var in localstorage speichern
        localStorage.setItem(i, myArray[i]);
        list += "<li>" + myArray[i] + "</li>";
    }

    list += "</ul>";
    document.getElementById('liste').innerHTML = list;
}
else 
{
    document.getElementById('liste').innerHTML = "Keine Werte vorhanden";
}

In den Body einfuegen:

Code:

<div id="liste"></div>

Daaron · 28. Oktober 2014

Obige Antwort möchte ich noch um was ergänzen: Nur wenn das Array überhaupt Werte hat, sollte das <div> befüllt werden. Andernfalls würde <div><ul></ul></div> entstehen, was kein valider Code ist. Ein <ul> muss immer mindestens ein <li> enthalten.

ABER: Der gegebene JS-Code vom TE hat ein paar ganz andere Baustellen offen.
- Mir erschließt sich der Sinn des $(document).ready(function() an der gegebenen Stelle nicht... oder anders gesagt: es hat keinen Sinn. Erst nach frühestens 5s wird der Worker aufgerufen, bis dahin sollte DOMReady eh schon durch sein.... Wenn, dann sollte viel eher das Setzen des Timeouts in einer DOMReady-Funktion erfolgen...
- $("body").load(... ist Mumpitz. Das Ding macht nix anderes, als die Datei zu lesen und dann den Body mit dem Inhalt der Datei zu füllen. Das kann nicht Sinn der Sache sein. jQuery.get() wäre die weitaus bessere Methode.
- Der Request sollte nicht stur alle 5s erfolgen, sondern meiner Meinung nach frühestens x Sekunden nach dem letzten erfolgreichen Request. Andernfalls würde ein etwas gröberer Server-Lag nur Leid und Elend verbreiten.

brenner · 2. November 2014

@r15ch13:

Danke, hab versucht (wahrscheinlich falsch) versucht es umzu setzen, aber es wird noch immer hintereinander ausgegeben.

@Daaron:
Keine Ahnung, ich kann leider kein php.

Aktueller Code

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Textfile To LocalStorage</title>
  <meta charset="UTF-8">
</head>

 
  <!-- JQuery einbinden -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
  <!-- JQuery code -->
  <script type="text/javascript">
 
(function worker() {


  // ausführen wenn seite geladen ist
  $(document).ready(function()
  {
    // inhalt von "output.txt" einlesen/laden
    // inhalt der datei steht dann in "msg"
    $("body").load("output.txt", function(msg)
    {
        // den inhalt/rückgabewert nach zeilenumbrüchen aufteilen
        // und in ein array ablegen
        var myArray = msg.split("\n");
        
        // array durchlaufen
        //for(var i=0;i<myArray.length;i++)

    if(myArray.length)
    {
    var list = "<ul>";
     
    // array durchlaufen
    for(var i=0;i<myArray.length;i++)
    {
    // jedes element als key-var in localstorage speichern
    localStorage.setItem(i, myArray[i]);
    list += "<li>" + myArray[i] + "</li>";
    }
     
    list += "</ul>";
    document.getElementById('liste').innerHTML = list;
    }
    else
    {
    document.getElementById('liste').innerHTML = "Keine Werte vorhanden";
    }




//        {
//            // jedes element als key-var in localstorage speichern
//            localStorage.setItem(i, myArray[i]);
//        }
    });
  });


setTimeout(worker, 5000);
})();

  </script>    
 
//</head>
 
<body>
<div id="liste"></div> 
</body>
</html>


//http://marco.seaside-graphics.de/programmierung/jquery/jquery-inhalt-einer-textdatei-dynamisch-einlesen-zeilenweise-in-localstorage-speichern
//
//Inhalte des localstorage in einem Popup
//alert(localStorage.getItem(0));
// Die Null hinten ist die entsprechende Zeile

r15ch13 · 2. November 2014

$('body').load hat den Inhalt der Datei direkt in den Body geschrieben und damit das div#liste ueberschrieben.
Deshalb konnte die Liste nicht richtig angezeigt werden. (Siehe Daaron Punkt 2)
Worker x Sekunden nach erfolgreichem Request ausfuehren. (Siehe Daaron Punkt 3)

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Textfile To LocalStorage</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="liste">qwe</div>
</body>
<!-- JQuery einbinden -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!-- JQuery code -->
<script type="text/javascript">

  // ausführen wenn seite geladen ist
  $(document).ready(function()
  {
    worker();
  });

  function worker()
  {
    $.ajax({
      url: "output.txt",
      success: function(msg)
      {
        // den inhalt/rückgabewert nach zeilenumbrüchen aufteilen
        // und in ein array ablegen
        var myArray = msg.split("\n");

        if(myArray.length)
        {
          var list = "<ul>";

          // array durchlaufen
          for(var i=0;i<myArray.length;i++)
          {
            // jedes element als key-var in localstorage speichern
            localStorage.setItem(i, myArray[i]);
            list += "<li>" + myArray[i] + "</li>";
          }

          list += "</ul>";
          $('#liste').html(list);
        }
        else
        {
          $('#liste').html("Keine Werte vorhanden");
        }
        setTimeout(worker, 5000);
      }
    });
  };

</script>
</html>

brenner · 2. November 2014

Cool,

das sieht ja schon richtig gut aus.

Das "i" Tüpfelchen wäre jetzt noch die Listenpunkte zu entfernen....

r15ch13 · 2. November 2014

Code:

<style>
#liste li {
    list-style-type: none;
}
#liste ul {
  padding-left: 0;
}
</style>

brenner · 2. November 2014

Sorry für die blöde Nachfrage... an welcher Stelle im Code?

Egal wo ich den Absatz einfüge funktioniert es nicht mehr.

r15ch13 · 2. November 2014

Style kommt in den Head

Daaron · 2. November 2014

Das ist CSS, also gehört es entweder in ein externes Stylesheet (Ideallösung) oder in den <head>. <style> darf niemals außerhalb des Head auftauchen.
Bist du sicher, dass das Projekt dich nicht arg überfordert? Dir fehlen offensichtlich elementare Kenntnisse in HTML und CSS, die du dringend erst einmal nachholen musst, bevor du mit JS oder Serversprachen wie PHP herum pfuschst. Schnapp dir ein Anfänger-Buch für HTML5+CSS3 und fang noch einmal neu an. Anders wird das hier nix.

brenner · 3. November 2014

@r15ch13:

Klappt, danke, auch wenn dafür jetzt die leere Zeile zwischen den Abschnitten verschwunden ist.

Siehe: http://homehosting.spdns.de:82/

@Daaron:
Definitiv ist das nicht meine Kompetenz, daher bin ich auf Hilfe angewiesen die ich hier zum Glück bekomme. Um das Ganze wirklich zu lernen feht jegliche Zeit. Zudem brauche ich nur dieses eine Script für die Hobbybastelei.

r15ch13 · 3. November 2014

Zeile 40 damit austauschen, dann sind die Abstaende wieder da:

Code:

if(myArray[i].trim() != "")
{
  list += "<li>" + myArray[i].trim() + "</li>";
}
else
{
  list += "<li>&nbsp;</li>";
}

Sekündliche Werteaktualisierung auf Homepage?

Commander

Captain

Lt. Commander

Fleet Admiral

Commander

Fleet Admiral

Commander

Fleet Admiral

Commander

Lieutenant

Fleet Admiral

Commander

Lieutenant

Commander

Anhänge

Lieutenant

Commander

Lieutenant

Fleet Admiral

Commander

Lieutenant

Ähnliche Themen