Seite Online oder Offline

[Lock]

Hallo zusammen,

ich habe eine Webseite für diese Seite Verwende ich einen eigene Suchmaschine die ich zu Hause Betreibe. Diesen Server habe ich aber nicht immer an (Urlaub usw) jetzt würde ich gerne ein Button einbauen.

Suche ist Online Grünes Bild erscheint
Suche ist Offline Rotes Bild erscheint.

Wie kann ich das in html bewerkstelligen bzw wie kann so etwas gehen.
Wenn der Ip auf die IP antwortet soll das grüne Bild kommen und wenn der Ping nicht antwortet, kommt das Rote Bild.

Könnt ihr mir dabei helfen ?
Gruß,
Lock

[MSX]

Mittels DynDNS eine IP vergeben. Standardmäßig das rote Bild anzeigen lassen und ein grünes Bild vom Server anfordern, welches über dem roten angezeigt wird, also eben nicht, wenn der Server gar nicht erreichbar ist.

[Lock]

Hallo

ich habe eine dyndns Adresse.
Nur wie ich das jetzt ins HTML bekomme frage ich mich bzw kann ich nicht.
Kann mir da einer helfen ?

Gruß,
Lock

[Kugelfisch23]

Um dafür zu sorgen, dass die (online-)Grafik von deinem Suchserver angezeigt wird, wenn sie verfügbar ist, und andernfalls die auf Webserver abgelegte (offline-)Grafik genutzt wird, hast du mehrere Möglichkeiten. Du könntest etwas beide Grafiken über img-Elemente einbinden, mittels z.B. absoluter Positionierung übereinander positionieren und (über die z-index-Eigenschaft) dafür sorgen, dass die online-Grafik die offline-Grafik überdeckt. Dabei wird die offline-Grafik (welche vom lokalen Webserver geladen wird) auch angezeigt, während die online-Grafik (vom Suchserver) noch geladen wird.

Alternativ kannst du das object- anstelle des img-Elements verwenden, da es dir erlaubt, beliebige alternative Inhalte zu nutzen, falls die referenzierte Ressource nicht verfügbar ist. Zum Beispiel:

<object type="image/png" data="http://suchserver.example.com/online.png">
	<img src="offline.png" alt="offline" />
</object>

Dabei wird die offline-Grafik jedoch erst dargestellt, wenn der Request nach http://suchserver.example.com/online.png definitiv fehlgeschlagen ist (Timeout, abgelehnte Verbindung, HTTP-Fehler). Insbesondere dann, wenn auf einen Timeout gewartet werden muss, kann daher einige Zeit vergehen, bis die offline-Grafik angezeigt wird.

[Lock]

Hallo
besten Dank für die Tipps, ich habe den Code einmal getestet.

<object type="image/png" data="http://suchserver.example.com/online.png">
    <img src="offline.png" alt="offline" />
</object> 

Der geht ausgezeichnet.
Besten Dank,

Gruß, Lock

---

Hallo,

kann es sein das der oben angeführte Quellcode vom IE nicht erkannt wird ?
Habe bei meinen IE Festellen müssen das kein Bild angezeigt wird.
Kann man das noch beheben ?

Gruß,
Lock

---

Hallo,

ich glaube es liegt daran wie man den Code einbindet.
Ich habe einmal diesen Code

<object type="image/png" data="http://suchserver.example.com/online.png">
<img src="offline.png" alt="offline" />
</object>

auf eine "Normal" Seite eingebunden das wurde der Status vom IE und vom FF angezeigt.
Ich wollte aber den Status in die Suche einbinden.
Das sieht so aus:

<!-- searchbox START -->
<form method="get" accept-charset="UTF-8" action="http://derserver.dyndns.org:8090/yacysearch.html">
  <div style="text-align:center; padding:5px; background-color:#eeeeee; border:1px solid #cccccc; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:block; float:left; margin-right:5px;">
    <div style="font-family:Arial,Helvetica,sans-serif; font-size:16px; display:block; float:left; padding-top:3px; padding-right:5px;">
      Status der Suche <object type="image/png" data="http://derserver.dyndns.org/online.png">
    <img src="http://www.derserver.de/offline.png" alt="offline" />
</object>
    </div>
    <input type="text" name="query" value="" maxlength="80" style="width:300px; font-size:16px; float:left;" />
    <input type="hidden" name="verify" value="true" />
    <input type="hidden" name="maximumRecords" value="10" />
    <input type="hidden" name="meanCount" value="5" />
    <input type="hidden" name="resource" value="local" />
    <input type="hidden" name="urlmaskfilter" value=".*" />
    <input type="hidden" name="prefermaskfilter" value="" />
    <input type="hidden" name="display" value="2" />
    <input type="hidden" name="nav" value="all" />
    <div style="font-size:16px; display:block; float:right; padding-top:1px;">

      <input type="submit" name="Enter"  value="Suchen" />
    </div>
  </div>
  <p style="clear:both;"></p>
</form>
    


    <!-- searchbox END --> 

Ist das einbinden von

<object type="image/png" data="http://derserver.dyndns.org/online.png">
	<img src="http://www.derserver.de/offline.png" alt="offline" />
</object>

so richtig oder sollte ich da was beachten ?

Gruß,
Lock

[Lock]

Hallo,

ich habe festgestellt, wenn die Seite offline ist das die Seite recht lange braucht um dieses Time Out zu finden. Sprich die Seite lädt sehr lange, was die bertrachtung der Seite nicht gerade förderlich ist.

Kann man da was machen ?

Gruß,
Lock

[Kugelfisch23]

Dieses potentielle Problem hatte ich ja in meinem letzten Beitrag bereits erwähnt. Du hast keinen direkten Einfluss darauf, wie lange ein Browser beim Versuch, extern referenzierte object-Inhalte zu laden, auf einen nicht erreichbaren Server wartet. Du könntest eventuell das in http://www.w3.org/TR/html401/struct/objects.html#h-13.3 spezifizierte standby-Attribut nutzen, um einen Alternativtext anzugeben, welcher während des Ladens angezeigt wird.

Alternativ könntest du den Status serverseitig (z.B. mittels PHP) überprüfen, oder JavaScript (sofern verfügbar) zur Verbesserung nutzen: Durch Setzen des in http://www.w3.org/TR/XMLHttpRequest/...eout-attribute spezifizierten timeout-Attributs kannst du die Timeout-Zeit für eine über ein XMLHttpRequest-Objekt gestartete HTTP-Anfrage explizit festlegen.

[accC]

Wie wäre es mit:

<div style="background-image:url('offline.png');"><img src="http://server.adr/online.png" alt=""></div>

Das Offline-Bild sollte ja immer direkt da sein, das online Bild wird uU nicht angezeigt, falls doch, wird es über das Offline-Bild geleget.
Natürlich würde das bedeuten, je nach Bildgröße und Verbindungsgeschwindigkeit wird erstmal offline angezeigt und später erst online (falls das online-Bild später geladen wird, als das offline) ..

Muss das ganze eine reine html-Lösung sein oder kannst/möchtest du ggf auch auf Programmier-/Scriptsprachen zurück greifen?

[Lock]

Hallo zusammen,

erstmal danke für die hilfe.
@Kugelfisch23
deine Version werde ich mit meinem Wiessen nicht hinbekommen.

@accC
Als erstes ich kann PHP und Java Verwenden, natürlich ist nichts gegen eine html Lösung zu sagen.

<div style="background-image:url('offline.png');"><img src="http://server.adr/online.png" alt=""></div>

Bin natürlich über weiter Alternativen dankbar.
Diese Funktion ist ja auch bei ICQ oder kein filehostern zu sehen, deshalb sollte es doch weiter Codes geben.

Gruß,
Lock

[Exterminans]

Dort erfolgt allerdings kein Clientseitiger Test sondern ein Serverseitiger. Dabei wird direkt vom Server der Test durchgeführt ob die Gegenstelle online ist und dann direkt die entsprechende Grafik fest eingebunden.

*Theoretisch* ist ein solcher Test simpel, versuch mittels fsockopen eine Verbindung zum Server auf zu bauen, wenn es funktioniert, dann ist der Server online. Der Nachteil: Dieser Test kostet Zeit. Um effizient arbeiten zu können ist eine Art von Caching notwendig damit du nicht bei jedem einzelnen Seitenaufruf den Server berlästigen musst sondern einfach davon ausgehst, dass der Server wenn er innerhalb der letzten 10 Minuten geantwortet hat, voraussichtlich immer noch online ist.

[Kugelfisch23]

Diese Funktion ist ja auch bei ICQ oder kein filehostern zu sehen, deshalb sollte es doch weiter Codes geben.

Die Statusgrafiken solcher Anbieter werden üblicherweise serverseitig generiert. Dies wäre in PHP (basierend darauf, ob eine HTTP-HEAD-Abfrage ein Timeout liefert) z.B. durch

stream_context_set_default(array( 'http' => array( 'timeout' => 2.0 )));

if(@get_headers('http://example.com/') !== FALSE) {
   echo 'online';
} else {
   echo 'offline';
} 

möglich. Die Bedeutung der Parameter für stream_context_set_default() ist http://www.php.net/manual/en/context.http.php zu entnehmen, der timeout-Parameter gibt die Timeout-Zeit in Sekunden an.

Alternativ zur Textausgabe kannst du auch ein Bild ausgeben, indem du einen passenden Content-Type-Header setzt und die Bilddaten (z.B. mittels readfile()) durchreichst.


Edit: Zeitlicher Überschneidung mit Exterminans' Beitrag.