smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Online- bzw. Offline-Status des Browsers erkennen – 2. Ansatz

24. April 2013
Stephan
Online- bzw. Offline-Status des Webbrowsers erkennen

Vor einiger Zeit hatte ich euch bereits gezeigt, wie ihr mittels der Eigenschaft window.navigator.onLine den Online- bzw. Offline-Status des Browsers erkennen könnt. Dabei wurde deutlich, dass die Eigenschaft nicht sehr verlässlich ist und nicht unbedingt den korrekten Verbindungsstatus zurückgibt.

Aus diesem Grund zeige ich heute, wie ihr mittels AJAX & Polling feststellen könnt, ob der Browser Online oder Offline ist.

Status mittels AJAX erkennen

Um festzustellen, ob der Browser Offline ist, werden wir einen asynchronen Request abschicken. Antwortet uns der Server, dann wissen wir, dass der Browser online ist. Falls der Browser jedoch keine Antwort vom Server bekommt bzw. ein Fehler auftritt, gehen wir davon aus Offline zu sein.

Die Umsetzung dazu, sieht wie folgt aus:

ConnectionChecker = {
	isConnected: null,

	init: function(callbackWrap)
	{
		this.sendRequest(callbackWrap);
	},

	sendRequest: function(callbackWrap)
	{
		var that = this;

		var xhr = new XMLHttpRequest();

		var responseTimeout = setTimeout(function()
		{
			xhr.abort();

			if(that.isConnected || that.isConnected === null)
			{
				that.isConnected = false;

				callbackWrap.callback.call(callbackWrap.context);
			}
		}, 5000);

		xhr.open('GET', 'connection.php', true);

		xhr.onload = function()
		{
			clearTimeout(responseTimeout);

			if(!that.isConnected)
			{
				that.isConnected = true;

				callbackWrap.callback.call(callbackWrap.context);
			}
		};

		xhr.onerror = function()
		{
			if(that.isConnected || that.isConnected === null)
			{
				that.isConnected = false;

				callbackWrap.callback.call(callbackWrap.context);
			}
		};

		xhr.send();

		setTimeout(function()
		{
			that.sendRequest(callbackWrap);
		}, 10000);
	},

	isOnline: function()
	{
		return this.isConnected;
	}
};

Dazu nun einige Erklärungen:

Zeile 4 – 7
Diese Funktion rufen wir zum Starten unseres Verbindungschecks auf und übergeben ein callbackWrap-Objekt, dass eine Callback-Funktion enthält. Dieses Callback werden wir immer dann aufrufen, wenn sich der Status geändert hat.

Zeile 11
Wir speichern die Referenz auf das aktuelle Objekt, weil this später innerhalb von Event-Handlern nicht auf das ConnectionChecker-Objekt referenzieren würde.

Zeile 13
Es wird ein neues XHR-Objekt erstellt.

Zeile 16 – 26
Wir erzeugen uns hier einen Timer, der den AJAX-Request nach 5s abbricht. Haben wir also nach 5s noch keine Antwort vom Server erhalten, gehen wir davon aus, dass wir offline sind. Falls wir vorher Online waren, rufen wir nun unser Callback auf.

XHR2 (XMLHTTPRequest Level 2) unterstützt auch ein extra timeout-Attribut, allerdings wird das bisher noch nicht von allen Browsern unterstützt.

Zeile 28
Hier geben wir an um welche Art von Request es sich handelt und an welche URL der Request geschickt wird.

Zeile 31 – 41
Der onload-Event-Handler wird aufgerufen, wenn wir erfolgreich eine Antwort vom Server erhalten haben. Waren wir vorher Offline, so rufen wir nun unser Callback auf.

Zeile 44 – 52
Sollte es zu einem Fehler kommen bzw. einer auftreten, dann gehen wir wieder davon aus Offline zu sein.

Zeile 54
Den AJAX-Request abschicken.

Zeile 57 – 60
Alle 10s rufen wir nun die sendRequest-Funktion auf und pollen also alle 10s den Server an.

Zeile 63 – 66
Diese Funktion gibt den aktuellen Status zurück.

ConnectionChecker im Einsatz

Im Folgenden seht ihr, wie ihr den ConnectionChecker verwenden könnt:

ConnectionChecker.init({
    callback: renderConnectionStatus,
    context: this
});

function renderConnectionStatus()
{
    var connectionStatus;

    if(ConnectionChecker.isOnline())
    {
        connectionStatus = 'Online';
    }
    else
    {
        connectionStatus = 'Offline'
    }

    $('#status').html(connectionStatus);
}

Jedes mal, wenn sich nun der Status ändert, wird die renderConnectionStatus-Funktion aufgerufen.

Fazit

Im Gegensatz zu window.navigator.onLine ist dieser Ansatz verlässlicher bzw. aussagekräftiger. Der große Nachteil ist aber, dass wir ständig unnötige Requests an den Server senden müssen.

Neben den bereits zwei vorgestellten Ansätzen, gibt es aber noch weitere, die ich demnächst in loser Folge vorstellen werde.

Kennt ihr andere Ansätze zum Ermitteln des Browser-Status?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!