Linuchs: Javascript: Prüfen, ob Web-Datei vorhanden?

Moin,

mal wieder mein Liederbuch, das sich aus zahlreichen Dateien zusammensetzt.

Pro Lied sollten mp3, ogg und Noten-png verfügbar sein.

In einem anderen Projekt habe ich mit PHP einen header abgefragt, ohne die Datei zu laden.

Geht das mit Javascript auch? Hier steht kein PHP zur Verfügung und ich möchte die Ladezeiten nicht verzögern, weil die Antworten dauern …

Möchte also mit Javascript zügig abfragen: Datei vorhanden / nicht vorhanden.

Wie geht das?

Gruß, Linuchs

  1. Habe hier eine unendliche Diskussion gefunden, die mehr verwirrt als klärt.

    1. Habe hier eine unendliche Diskussion gefunden, die mehr verwirrt als klärt.

      Mich verwirrt schon Deine Problemstellung. Könntest Du das mit einer problematischen Seite bitte mal anschaulich machen? Ansonsten ist es doch in erster Linie ein serverseitiges Problem wenn Resourcen nicht ausgeliefert werden. Es sei denn, zwischen Client und Server gibt es diesbezügliche Blockaden.

      MfG

  2. Hallo,

    bei Bildern habe ich auf das Error-Event reagiert, danach wusste ich zwar nicht, warum das Bild nicht geladen wurde, aber das brauchte ich auch nicht. Ob es beim Laden von mp3 oder ogg ein Error-Event gibt, musst du selbst recherchieren.

    Alternativ könntest du die Dateien mit xmlhttpRequest bzw. fetch laden und auf den Statuscode reagieren.

    Gruß
    Jürgen

    1. Hallo,

      gerade noch mal nachgesehen https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest, https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest/getResponseHeader, mit XMLHttpRequest kannst du auch den Header abfragen.

      Gruß
      Jürgen

  3. Hallo Linuchs,

    In einem anderen Projekt habe ich mit PHP einen header abgefragt, ohne die Datei zu laden.

    ??? Was hast Du da genau getan? Aus PHP einen HTTP Request mit HEAD Methode abgesetzt? Das sollte funktionieren (sofern der andere Server korrekt eingerichtet ist), aber für 100 Dateien ist das auch nicht schlau weil Du dann 100 Requeste absetzen musst. Die Zeit für den Server-Roundtrip kann bei kleinen Dateien und Breitbandnetz größer sein als die Übertragung der Daten.

    ich möchte die Ladezeiten nicht verzögern, weil die Antworten dauern …

    Wird die Seite, die Du da anzeigst, statisch ausgeliefert oder über PHP generiert?

    Wenn PHP: du solltest auf dem Server vor Auslieferung prüfen, welche Ressourcen verfügbar sind. Selbst wenn sie auf einem fremden Server liegen (aber dann solltest Du das Ergebnis ggf. cachen).

    Wenn es eine statische Seite ist: Kannst Du auf dem Server, der die Ressourcen liefert, ein PHP Script unterbringen, das eine Dateiliste überprüft? Dieses Script könntest Du per Ajax dafür nutzen, um alle fraglichen Dateien auf einmal auf Existenz zu prüfen. Und für die Dateien, die da sind, schaltest Du DANN erst die entsprechenden clientseitigen HTML Elemente frei.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo

      Wird die Seite, die Du da anzeigst, statisch ausgeliefert oder über PHP generiert?

      … Hier steht kein PHP zur Verfügung

      Er könnte hier also nur mit JS/Ajax/Fetch einen Request auf die konkrete Datei und damit auch pro Datei absetzen (drei Dateien pro Lied!). Meiner Meinung nach ist das sehr ineffektiv.

      Tschö, Auge

      --
      Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
      Kleine freie Männer von Terry Pratchett
      1. Hallo Auge,

        diese Kombination, die du da zitierst, habe ich so gedeutet, dass er am Client kein PHP nutzen kann und darum fragt, welche alternativen Werkzeuge es gibt.

        Wenn aber ein Server im Spiel ist - dann ggf. auch einer wo Scripte laufen können.

        Wenn nicht - ich meine mich zu erinnern, dass das für einen Chor gedacht ist. Jeder hat ein Tablet und das connected sich zu einer zentralen Instanz, wo die Dateien liegen. Man könnte für den Ordner, in dem die Ressourcen liegen, das Auslesen des Verzeichnisses erlauben. Der Client könnte sich damit schnell und in einem Aufruf einen Überblick über die verfügbaren Ressourcen verschaffen. Man könnte statt dessen beim Betanken des Servers auch ein Script laufen lassen (bash oder nodejs oder werweißwassonst), das eine Textdatei erstellt die als Ressourcenindex dient (CSV, JSON, geier17, ...)

        Es wäre für eine vernünftige Betrachtung sicherlich hilfreich, die Architektur des Systems zu kennen. Linuchs hat zwar schon öfter drüber geschrieben, aber ich lerne nicht die Systemkonzepte aller Stammposter auswendig...

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Rolf,

          Es wäre für eine vernünftige Betrachtung sicherlich hilfreich, die Architektur des Systems zu kennen. Linuchs hat zwar schon öfter drüber geschrieben, aber ich lerne nicht die Systemkonzepte aller Stammposter auswendig...

          Hier geht es um ein "flaches" HTML-Liederbuch mit 30 Liedern für ein Chor-Projekt. Das erstelle ich lokal ohne Webserver, kann es auf ein Smartphone und natürlich auf meinen Internet-Server laden.

          Die projekt.htm enthält das Inhaltsverzeichnis und 30 iframes, in die je eine text.htm geladen wird. Per Link kann man vom Inhaltsverzeichnis gezielt ein Lied anspringen und vom Lied zurück zum Inhaltsverzeichnis.

          Jede text.htm hat wiederum einen audio-Abspielbalken, der bei Klick die zum Lied gehörende audio.mp3 (sicherheitshalber auch zusätzlich eine audio.ogg, weil firefox anfangs die mp3 ignorierte) lädt und abspielt.

          Ebenfalls hat jedes Lied eine noten.htm, die ein noten.jpg enthält.

          Es müssen also 30 x 5 = 150 Dateien vorhanden sein.

          Um zu prüfen, ob alle Komponenten des Liederbuchs vorhanden sind, muss ich jetzt also 30 mal dieses tun (und künftig bei jedem neuen Projekt wieder):

          1. Klick auf den Abspielbalken, ob entweder die audio.mp3 oder die audio.ogg auf dem Server ist. Wenn es läuft, kann die andere noch fehlen,
          2. Extra-Klick für die audio.ogg
          3. Klick auf das Noten-Symbol in der text.htm, ob die noten.htm und darin die noten.jpg verfügbar ist.

          Was ich möchte: Pro text.htm eine rote Warnung: audio.mp3 / audio.ogg / noten.htm / noten.jpg fehlt.

          Die sehe ich beim Scrollen des Liederbuchs, ohne mich durchklicken zu müssen.

          Wenn zum Schluss alles okay ist, kann ich die zentrale check.js entfernen und die Abfragen unterbleiben.

          Hier mal eines der 30 Lieder zum Spielen: south_australia.htm

          Edit:

          Es wäre natürlich pfiffig, per PHP gleich auf dem Server die Fehl-Meldungen einzubauen, aber eine htm-Datei führt kein PHP aus und eine lokale php-Datei wird vom Firefox nicht angezeigt. Deshalb die Frage nach JS.

          Gruß, Linuchs

          1. Hallo Linuchs,

            Problem ist, dass man mit AJAX keine lokalen Dateien lesen kann (file: Protokoll). Weder mit XMLHttpRequest noch mit fetch API. Selbst dann nicht, wenn die HTML Seite von lokal geladen wurde. Das ist eine Sicherheitsrestriktion der Browser, so dass Dir eine HTML Seite nicht den Computer ausspioniert.

            Ist das ein Android-Gerät? Guck Dich mal im Play Store nach Webservern für Android um, da gibt's was. Sogar mit PHP und MySQL - wobei ich keine Ahnung habe wie der Yeloyo das in ein Smartphone presst 😀. Es gibt aber auch andere, z.B. soll der hier unter 100KB groß sein. Keine Ahnung ob das was taugt. Aber mit einer HTTP Serverkomponente kannst Du in JavaScript alle Register ziehen.

            Ob's sowas auch mit Apfelgeschmack gibt weiß ich nicht.

            Rolf

            --
            sumpsi - posui - clusi
            1. Hallo Rolf,

              Problem ist, dass man mit AJAX keine lokalen Dateien lesen kann (file: Protokoll). Weder mit XMLHttpRequest noch mit fetch API. Selbst dann nicht, wenn die HTML Seite von lokal geladen wurde. Das ist eine Sicherheitsrestriktion der Browser, so dass Dir eine HTML Seite nicht den Computer ausspioniert.

              im Firefox funktioniert das z.Zt. noch, wenn alles lokal liegt. Man darf nur nicht auf Status 200 warten.

              Gruß
              Jürgen

            2. Ist das ein Android-Gerät? Guck Dich mal im Play Store nach Webservern für Android um, da gibt's was.

              Also, um festzustellen, ob irgendwelche 150 Dateien vorhanden sind (möglicherweise sogar anhand eines Vergleichs von Größe, Datum oder gar einen Hash mit denen im Cache der Clients auf Aktualität zu prüfen) könnte auch node.js helfen. Dann "tut" es genau ein (in Ziffern: 1) "XMLHttpRequest".

              Sogar mit PHP und MySQL - wobei ich keine Ahnung habe wie der Yeloyo das in ein Smartphone presst 😀.

              Tja. Von der Leistung her genügt ein "hinreichend modernes" Smartphone. Ein Rapsi mit Broadcom BCM2837B0, Cortex-A53 (ARMv8) 64-bit SoC @ 1.4GHz; 1GB LPDDR2 SDRAM und einer SD-Karte reicht ja für Linux, Apache, MariaDB, PHP, Perl, Python auch völlig aus.

              Möglicherweise wäre genau so ein Raspi auch eine bessere Lösung.

              Da kommt der Server drauf, damit kann man ein eigenes WLAN aufziehen und die Gesamtkosten (Raspi, Gehäuse, Netzteil, 16GB Karte, +Kühlkörper; aber freilich ohne Linux-Installation und Einrichten des Servers) liegen mit unter 55 Euro in dem Rahmen, in welchem ich, wegen der teils sehr privaten Daten auf einem Smartphone, eben dieses "eher nicht" verwenden wöllte.

              Und wenn es keine Steckdose gibt, dann nimmt man eben ein Akkupack (Powerbank) mit. Der Raspi nimmt im Dauerbetrieb (ohne WLAN!) etwa 2 Watt oder oder 0,5Ah oder 500mAh. Als WLAN-Accesspoint dürfte es mehr sein. Aber selbst mit einer kleinen Powerbank als Stromversorgung (5000mAh) sollte der also mindestens 4 Stunden durchhalten.

          2. @@Linuchs

            Ich glaube, du verrennst dich hier.

            Hier geht es um ein "flaches" HTML-Liederbuch mit 30 Liedern für ein Chor-Projekt. Das erstelle ich lokal ohne Webserver

            Warum? Wenn du schon Webtechnologie (HTML) einsetzt, warum dann nicht mit (lokalem?) Webserver?

            Wenn du das über einen Webserver laufen lässt, kannst du auf diesem mit PHP über dessen Filesystem prüfen, ob die betreffenden Dateien vorhanden sind.

            kann es auf ein Smartphone […] laden.

            Das kannst du umso besser, wenn du das Liederbuch als Progressive Web App (HTML-Seiten + Manifest + Service Worker) implementierst. Dann hat jeder Nutzer nach dem erstmaligen Aufruf vom Webserver eine lokale Kopie des Liederbuchs und kann sich das auf Wunsch auch auf den Desktop legen, wodurch sich das Liederbuch dann anfühlt wie ein native App.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Tach!

        Er könnte hier also nur mit JS/Ajax/Fetch einen Request auf die konkrete Datei und damit auch pro Datei absetzen (drei Dateien pro Lied!). Meiner Meinung nach ist das sehr ineffektiv.

        Ineffizient. Effektiv ist ein Vorgang, der sein Ziel erreicht, egal mit welchem Aufwand. Effizient ist der Vorgang, wenn dabei der Aufwand gering ist.

        dedlfix.