Realtime Server Sent Events 17. February 2009 um 21:49 Uhr / Programming Webdesign /

Eingestellt am 17. February 2009 um 21:49 Uhr » Programming Webdesign

Ich habe vor bei einer Webapplikation von PULL auf PUSH umzustellen. D.h. der Server soll die Klienten benachrichtigen dass neue Info da ist, damit die Klienten aufhören alle 20 Sekunden nachzufragen und den Server unnötig zu belasten.

Erst dachte ich an einen Java Klient, den sich jeder runterläd und der dann in einem WebView die Seite anzeigt und Events vom Server empfängt und die Daten dann updatet. Dann kam mir aber wieder der Blogeintrag Event Streaming to Web Browsers von Opera in den Sinn, ich habe mir dann mal deren Chat-Clienten angeschaut und mal alles weggelassen was man zu vernünftigen Verstehen nicht braucht, hier ist das Ergebnis:

Das Ruby Skript

#!/usr/bin/env ruby

print "Content-Type: application/x-dom-event-stream\n\n"

while true
        print "Event: new_message\n"
        print "data: <strong>it is now:</strong> #{Time.now.to_s}\n\n"
        STDOUT.flush
        sleep 2
end

Das HTML

<div id="message-area"></div'>
<event-source src="/cgi-bin/server-event.rb" id="messages">

Das JavaScript

window.onload = function() {
	document.getElementById('messages').addEventListener('new_message', new_message, false);
}

function new_message(event) {
	var message = document.createElement("div");
	message.innerHTML = decodeURIComponent(event.data);
	document.getElementById("message-area").appendChild(message);
}

Was passiert ist, dass der Browser eine Verbindung zum Server aufmacht, sie dann aber nicht wieder schließt sondern offen lässt. Über diese kann dann der Server Daten an den Klienten schicken, die dieser dann wiederum mit Hilfe von ein bischen einfachem JavaScript interpretieren kann.

Da meine Webapplikation bisher sowieso den Opera 9 als Platform verlangte zahlt sich das jetzt aus. Das beste ist, ich muss warscheinlicih nur 20 Zeilen code umschreiben um von PULL auf PUSH umzustellen.

Da HTML5 noch ein Working Draft ist, werden sich die Namen der Tags und JavaScript-Methoden und Events höchstwarscheinlich noch ändern.

Weiterführende Links


Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.