Seite automatisch in einstellbarer Zeit refreshen

  • Wie stellt man es am besten an, eine Seite, wo mehrere Personen gleichzeitig Änderungen vornehmen können, diese Seite auch dann sofort für alle refreshed wird?

    Also folgendes:

    Es ist eine große Tabelle vorhanden, wo man einzelne Felder manuell füllen kann und andere Felder per Drop-Down-Menü ausfüllen soll.

    Gleichzeitig sollen auf dieser Seite allerdings mehrere Leute arbeiten.

    Ist sowas überhaupt Umsetzbar und wenn ja, mit welchen Mitteln würdet Ihr das ganze dann umsetzen?

  • Hallo,

    es gibt mehrere Möglichkeiten ein solches Vorhaben umzusetzen.

    Die erste (und einfachste) Möglichkeit wäre, das ganze per Meta-Tag zu realisieren:

    Code
    <meta http-equiv="refresh" content="5">

    Dies lädt dann die aktuelle Webseite alle 5 Sekunden neu.

    Allerdings lädt das die ganze Seite neu. Ist also nicht die beste Idee, da es wahrscheinlich als eher störend als hilfreich empfunden wird. Ich selber kenne die Möglichkeit nur, habe sie bisher aber nicht einmal verwendet. Insbesondere da du ja sagtest, dass hier auch Daten zwischen Nutzern synchronisiert werden müssen, müsstest du zumindest für einen Teil auf eine der nachstehenden Möglichkeiten zurückgreifen, um die neuen Daten in der Datenbank zu speichern.

    Eine Alternative, die das WSC ebenfalls von Haus aus unterstützt ist AJAX. Damit kannst du Anfragen an deine Seite stellen, ohne diese neu zu laden. Egal ob du ein Formular absenden möchtest, oder einfach nur alle X Sekunden eine Anfrage an die Datenbank/Seite stellen willst oder sonst was.

    Damit wäre eine Synchronisation möglich, indem du bei Änderungen ein Update in der Datenbank (oder sonstigen Speichersystemen, die du dafür verwendest) durchführst und gleichzeitig alle X Sekunden (je weniger, desto schneller sieht man Änderungen, desto mehr wird aber auch Datenbank und sonstige Systeme beansprucht) prüfst, ob es Änderungen gibt. Du könntest z.B. aufsteigende Schlüssel verwenden, anhand derer du erkennen kannst, welcher der letzte Synchronisationsstand war oder sonst was, um nicht bei jeder Abfrage alles anzufragen, sondern nur die Änderungen, die du noch nicht hast. Die Änderungen müsstest du dann mit AJAX auslesen und mittels HelperFunctions in die entsprechende Seite einbinden (*).

    Eine letzte Möglichkeit, die dich zwar nicht vom Einpflegen der Informationen in die Seite nach dem Aktualisieren abhält, aber das Aktualisieren wesentlich effizienter (und schneller) macht, wäre die Nutzung von socket.io. Es unterstützt, wie AJAX auch, eine Client-Server-Kommunikation, allerdings ist diese hier Event-getrieben. Während AJAX die Verbindung aufbaut, eine Anfrage stellt und dann die Verbindung nach einer Antwort wieder abbaut, bleibt bei socket.io die Verbindung durchgehend geöffnet.

    Ermöglicht wird das über WebSockets. Du kannst über diese WebSocket-Verbindung dann (Ähnlich wie bei AJAX) ein Event definieren, das eine Änderung in der Seite angibt (z.B. User X ändert Feld Y zu Z). Das kann man in reiner String-Form machen, aber auch mit Hilfe von JavaScript Objects (JSON). Es gibt da viele Möglichkeiten.

    So könnte man sich verschiedene Events definieren, die bestimmte Aktionen ausgelöst haben und die bestimmte Aktionen auslösen werden. Beispielsweise ein Event "update-field", das als Parameter eine Liste bekommt, die wie oben genannt, den Nutzer X, das Feld Y und den neuen Wert Z beinhaltet. Das wäre soweit die Clientseite.

    Auf Serverseite, zu der ich gleich noch was sagen muss, registrierst du dann Event-Listener, die auf die vom Client gesendeten Events reagieren und diese verarbeiten. In socket.io (zumindest für Node.js) kannst du dann z.B. bei einem eingehenden "update-field"-Event die Änderung speichern und per Broadcast die Änderung an jeden Nutzer ausliefern, ohne dass hier explizit nach einem Update durch den Nutzer gefragt wurde. Der Broadcast geschieht auch wieder mittels Event, zu dem du dann einen Listener auf der Client-Seite implementierst, der die Änderung in die entsprechenden Felder einträgt.

    Das ganze geschieht dann quasi in Echtzeit (bis auf die Verzögerung der Verarbeitung und des Transfers), wohingegen Ajax natürlich immer eine bestimmte Verzögerung haben wird, die im schlimmsten Fall genau deine X Sekunden sind, die du zwischen zwei Update-Anfragen wartest.

    Kommen wir zu dem Problem: socket.io ist für Node.js entwickelt. Ich konnte gerade bei meiner kurzen Recherche keine gute Alternative (bzw. eigentlich gar keine) finden, die socket.io für PHP auf Serverseite unterstützt. Du müsstest also noch auf Node.js setzen (zumindest für die Synchronisation zwischen den Nutzern), um die Vorteile von socket.io nutzen zu können. PHP ist aufgrund seiner Implementierung nicht dazu geeignet.

    Ich konnte lediglich folgendes Projekt finden, das allerdings auch keinen Server, sondern nur einen Client darbietet: elephant.io. Es unterstützt also auch nicht ganz das, was ich mir unter "gut & vorteilhaft" vorstelle. Du kannst ja trotzdem mal schauen.

    Die Integration direkt in PHP wäre allerdings praktischer, um nicht noch zwischen Node.js und PHP synchronisieren zu müssen oder die gesamte Logik der Seite (Aktualisieren und Speichern der Daten in der Datenbank oder Ähnlichem) ebenfalls in Node.js auslagern zu müssen, obwohl das WSC dafür eine angenehme API bietet.

    Vielleicht kann da ja einer helfen, und kennt in diese Richtung noch eine Möglichkeit.

    Gruß

    Marc

    Noch als Nachtrag zu (*): Natürlich kannst du auch Frontend-Software nutzen wie z.B. Vue.js, die für dich das Rendering der Seite und das einpflegen von Updates übernimmt. Dann musst du das nicht machen. Vue.js lässt sich auch gut mit socket.io kombinieren, das ja als meine 3. Möglichkeit zur Synchronisation vorgestellt wurde.

  • Ui... danke ilou für die Ausführlichen Informationen.

    Ich muss mich da dann erstmal schlau lesen mit den AJAX-Alternativen. Ajax wäre mir auch direkt in den Kopf gekommen, allerdings muss ich echt den Datentransfer sowas von Minimieren...

    Sonst ist der DB-Server nach kurzer Zeit sicher überlastet... Denn es können im Worst-Case-Szenario gleichzeitig bis zu 40 Leute daran arbeiten. Und dann alle X Sekunden in Update... Oha...

    Das wird echt heftig...


    Die anderen Alternativen sind bestimmt gut, ich weiß aber nicht wie ich sowas in den Server installieren kann per PIP... ist eine socket.io Installation per Packet möglich?

  • Alternative wäre es nen Google Docs Dokument zu verwenden und nur einzubinden.

    Das sync sich selbst und wenn mehrere daran arbeiten kann man auch sofort die Ergebnisse sehen.

  • Wie gesagt, für socket.io gibt es keine wirklichen Alternativen für PHP. Ich hatte eben etwas gesehen, wo jemand einen Websocket-Server (geht ebenfalls, socket.io ist etwas umfangreicher und m.W.n. auch sicherer als normale Websockets) erstellt hat indem er ein PHP-Skript geschrieben hat, das die ganze Zeit in ner while-Schleife im Hintergrund läuft.

    Denke ich ist aber auch nicht gerade das Beste/Schönste.

    socket.io ist so gesehen weder ein Paket, das man über PIP installieren kann, noch ne Software fürs Betriebssystem. Es ist ein sogenanntes Node-Package für Node.js. Und Node.js ist Ähnlich wie Java einfach nur eine Laufzeitumgebung für JavaScript.

    Ich bin gerade auf dieses Plugin hier von Tim Düsterhus gestoßen: nodePush

    Du könntest dir das mal genauer anschauen. Das nutzt irgendwie eine Schnittstelle des WSC/Plugins Push um von Node.js mit dem WSC zu kommunizieren. Wie, weiß ich allerdings gerade nicht. Säße ich nicht gerade an der Klausurvorbereitung, hätte ich dir sicherlich mehr sagen können.

    Ergänzung:

    Der Ansatz mit socket.io setzt natürlich dann auch wieder weitere Software(-kenntnisse) voraus, insbesondere im Umgang mit Node.js, wobei man sich mit ein wenig einlesen denke ich gut da rein findet. Vor allem, wenn man sich schon ein wenig mit JavaScript auskennt.

    Ergänzung Nummer 2: Es gibt anscheinend noch ein anderes Push. Das findest du hier: Push++ . Auch hier lohnt sich sicherlich mal ein Blick :)

    Einmal editiert, zuletzt von ilou (20. Juli 2020 um 15:37)

  • Alternative wäre es nen Google Docs Dokument zu verwenden und nur einzubinden.

    Derzeit wird in der Tat genau so ein Google Dokument genutzt. Nur es sollte halt irgendwie mit den Rechten vom Forum "genutzt" werden können.

    ilou :

    Es gibt anscheinend noch ein anderes Push. Das findest du hier: Push++ . Auch hier lohnt sich sicherlich mal ein Blick

    Ach das Push++ sagt mir gerade nichts. Aber ich schaue es mir definitiv mal an. Danke für den Hinweis.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!