Verwendung Zugriffszähler mit Onlineanzeige

[Orlok]

Hallo TS

Es wäre doch mMn eine gute Tat, wenn Du dem Artikel einen eigenen Abschnitt mit den gewonnenen Erkenntnissen und der alternativen Methode hinzufügen würdest.

Das wäre sicher eine gute Tat. Eine noch bessere wäre es allerdings, wenn das in dem Artikel vorgestellte Programm eine Ausgabe produzieren würde, die für alle Seitenbesucher zugänglich ist und nicht nur für diejenigen, die sehen können.

Die ermittelte Anzahl der Seitenbesucher wird serverseitig als Bild gerendert und so zum Client geschickt. Das ist gleich in doppelter Hinsicht problematisch:

1. Es gibt keine textuelle Alternative. Benutzern mit fehlender oder stark eingeschränkter Sehfähigkeit, die sich die Seite vorlesen lassen, bleibt die Information verborgen.

2. Der Text wird als Rastergrafik ausgeliefert. Benutzer mit eingeschränkter Sehfähigkeit, die eine größere Schrift benötigen, können den Text unter Umständen nicht entziffern.

Ein besseres Beispiel wäre es, wenn sich der Server nur um die Bereitstellung der Daten kümmern würde und der Client die Präsentation übernimmt, in einer Weise, dass die Informationen für alle Besucher der Seite zugänglich sind. Die übermittelten Werte sollten ordentlich ausgezeichnet werden, etwa so wie im folgenden Beispiel.

<aside id="counter">

    <!-- Überschrift oder aria-label mit Accessible Name -->

    <label for="online">Online:</label>
    <output id="online"></output>

    <label for="visits">Visits:</label>
    <output id="visits"></output>

</aside>

Bis zur erfolgreichen Ausführung des Skripts sollten die Elemente verborgen werden. Dazu wird das Attribut hidden auf dem Containerelement gesetzt. Erst wenn das Skript ausgeführt und der erste Satz Daten eingetroffen ist, wird das Attribut entfernt. Wenn neue Daten eintreffen, wird nur der textuelle Inhalt der für die Ausgabe vorgesehenen Elemente aktualisiert.

Alternativ könnte das Markup auch mit dem Skript ausgeliefert und nachträglich in das Dokument eingefügt werden. Das wäre in diesem Fall vermutlich sogar die bessere Variante, da die Komponente nur gerendert werden soll, wenn das Skript tatsächlich ausgeführt wird.

const createCounter = (online, visits) => {
    document.body.insertAdjacentHTML(
        'beforeend',
        `
            <aside id="counter">
                <h2>User Counter</h2>
                <label for="online">Online:</label>
                <output id="online">${
                    online
                }</output>
                <label for="visits">Visits:</label>
                <output id="visits">${
                    visits
                }</output>
            </aside>
        `
    );
};

Das Einfügen ins Dokument könnte wie in dem Beispiel oben erfolgen. Ich verwende hier einen Templatestring, um die initialen Werte einzufügen und um mir das Escapen der Zeilenumbrüche zu ersparen. Die Elemente werden am Ende von body eingefügt. Um den Zähler an einer beliebigen Stelle ins Dokument einfügen zu können, könnte man das Elternelement natürlich auch als Argument übergeben.

Darüber hinaus sollte die Kommunikation mit dem Server über das Fetch API laufen, statt dafür ein img zu missbrauchen, wobei es sich aus pädagogischer Sicht anbieten würde, die Daten für die Besucherzahlen im JSON-Format zu übertragen. Das Response-Objekt besitzt eine entsprechende Methode, mit der die Daten einfach konvertiert werden können.

const getData = async url => {
    const response = await fetch(url);
    const {online, visits} = await response.json();

    outputForOnline.value = online;
    outputForVisits.value = visits;
};

Angenommen, die Variablen outputForOnline und outputForVisits enthalten Referenzen auf die output-Elemente und die Daten werden als Objekt mit entsprechenden Schlüsseln übertragen, dann könnte die Funktion zur Beschaffung der Daten so ähnlich wie in dem Beispiel oben aussehen.

Ich verwende dabei aus Gründen der besseren Lesbarkeit die async/await-Syntax, bei der es sich im Prinzip nur um syntaktischen Zucker handelt. Ich denke, der Code ist auch dann nachvollziehbar, wenn man nicht das letzte Detail verstanden hat.

Das sind alles nur Vorschläge und nicht zwingend der Weisheit letzter Schluss. Ich halte es aber für wichtig, dass die Beispiele im Wiki inklusiv sind und nicht mehr oder weniger willkürlich Benutzergruppen von der Bedienung ausgeschlossen werden. Das gilt ganz besonders für solche Artikel wie diesen, die sich eher an angehende Backend-Entwickler richten, die oft überhaupt nicht auf dem Schirm haben, dass ihr Vorgehen in dieser Hinsicht problematisch sein könnte, und die später häufig Frontend-Aufgaben übernehmen.

Viele Grüße,

Orlok