This code snippet outputs the time which is needed to execute some code.

- (void)someAction {

  // save current time
  CFAbsoluteTime startTime = CFAbsoluteTimeGetCurrent();

  [self someAwesomeAlgorithm];

  // print time difference to console
  // output Example: Took 0.000078 seconds.
  NSLog(@"Took %f seconds.", (CFAbsoluteTimeGetCurrent()-startTime));
}

I started to build apps for the iPhone. Here are some ressources which are useful to know.

Tutorials

• Very good video tutorial about iPhone programming from Paul Hegarty (Stanford University) can be found under IPad and iPhone Application Development (SD) on iTuns U.
• Video tutorials from video2brain:
• Getting Started with iOS 5
• iPhone and iOS Application Development Workshop
• iPhone and iOS 5 Advanced App Development
• http://developer.apple.com/videos/, developer videos from Apple
• http://developer.apple.com/library/mac/#documentation/ToolsLanguages/Conceptual/Xcode4UserGuide/…, XCode User Guide from Apple
• http://developer.apple.com/library/mac/#documentation/General/Conceptual/Mac101/Articles/00_Introduction.html#//apple_ref/doc/uid/TP40010611-CH1-SW1, Your first Mac APP from Apple
• Scripting Bride Programming Guide, interact with programs on your Mac (e.g. iTunes)

Code snippets

• TrayBar – Status Bar in Cocoa (NSStatusBar), get programs into the traybar (Mac OS)
• Execute a terminal command from a Cocoa app, code from stackoverflow.com
• Can I receive a callback whenever an NSPasteboard is written to?, information from stackoverflow.com
• Programmatically causing restart, shutdown and/or logout, Mac OS X Developer Library
• List of sample code from Apple, Mac OS X Developer Library

Communities

List will be extended. If you know additional links, post them in the comments, I will add them.

Updates:

• 2012-01-08: Added code snippets, video tutorials
• 2012-01-10: Added code snippets, communities
• 2012-01-14: Added code snippets, tutorials

Unter Mac OS X entwickeln macht Spaß. Und das eigenen System einzurichten geht erstaunlich schnell, da Mac OS X bereits mit einem Apache 2.2 Webserver, PHP 5 und auch mit einem SVN Server ausgeliefert wird. Wie diese unkompliziert eingerichtet werden können soll hier gezeigt werden.

Apache Webserver unter Mac OS X starten

Den Apache Webserver zu starten geht erstaunlich einfach. Dazu kann entweder unter Systemeinstellungen > Freigaben die so genannte Webfreigabe aktiviert werden. Ich empfehle, den Apache Server auf diesem Wege zu starten. Natürlich kann man im Terminal kann auch folgenden Befehl eingegeben, doch fehlt dann der entsprechende visuelle Status unter Systemeinstellungen.

sudo httpd -k start

Das so genannte htdocs Verzeichnis (das Verzeichnis, dass von außen über den Apache 2 Server angesprochen wird) findet sich standardmäßig unter /Library/Webserver/Documents.

PHP 5 unter Mac OS X einrichten

Wer mit PHP 5 entwickeln möchte, der muss das entsprechende Apache Modul zunächst aktivieren. Dazu muss die httpd.conf Datei editiert werden. Sie findet sich unter /etc/apache2. Um auf die Systemverzeichnisse wie beispielsweise etc oder usr über den Finder zuzugreifen wählt man im Menu des Finders Gehe zu > Gehe zu Ordner. Alternativ kann natürlich auch über das Terminal und cd Befehlen zu den entsprechenden Verzeichnissen navigiert werden.

In der httpd.conf Datei muss die Zeile 116

LoadModule php5_module        libexec/apache2/libphp5.so

entkommentiert werden. Wer möchte kann in Zeile 215 einstellen, dass .htaccess Dateien Parameter ändern können. Das ist für die reibungslose Funktion von mod_rewrite notwendig.

<Directory /Library/WebServer/Documents>
  AllowOverride All
</Directory>

In Zeile 230 muss hinzugefügt werden, dass auch index.php Dateien als Directory Indexes erkannt werden:

<IfModule dir_module>
  DirectoryIndex index.html index.php
</IfModule>

Zu guter letzt muss der Webserver neu gestartet werden. Dies kann über die Systemeinstellungen (siehe oben) oder mit folgendem Befehl geschehen:

sudo httpd -k restart

Um zu testen, ob PHP läuft kann eine index.php und folgendem Inhalt im htdocs Verzeichnis abgelegt werden. Mit http://localhost/index.php im Browser sollte eine Übersicht über das installierte PHP Modul erscheinen.

<?php phpinfo(); ?>

Um Default-Eigenschaften zu überschreiben (error reporting, max upload etc.) muss eine php.ini Datei unter /etc/ angelegt werden. Meine php.ini enthält das Folgende:

max_execution_time = 60
memory_limit = 256M
display_errors = On
post_max_size = 32M
upload_max_filesize = 32M
date.timezone = Europe/Berlin

MySQL unter Mac OS X einrichten

Einen MySQL-Server unter Mac OS X einzurichten geht denkbar einfach. Hierfür gibt es fertige Installer, die über http://dev.mysql.com/downloads/mysql/ bezogen werden können. Zusätzlich kommt das MySQL Package mit einem Startup-Item. Wird es installiert, so startet MySQL bei jeden Systemstart automatisch. Installiert wird mysql unter /usr/local/mysql. Um MySQL manuell zu starten genügt folgender Befehl:

sudo mysqld_safe

Um einen unkomplizierten Umgang mit MySQL zu gewährleisten empfehle ich, das /usr/local/mysql/bin Verzeichnis zur $PATH hinzuzufügen. Tut man dies nicht, wird der mysql Befehl im Terminal nicht gefunden. Diese drei Schritte helfen:

1. Eine neue Datei /etc/paths.d/mysql erzeugen:

sudo touch /etc/paths.d/mysql

2. Die Datei bearbeiten und das MySQL bin Verzeichnis erstellen:

sudo vim /etc/paths.d/mysql

3. Den  MySQL-bin Pfad einfügen und speichern.

/usr/local/mysql/bin

Wer mit vim noch nicht gearbeitet hat: i drücken um in die Datei zu schreiben, den Pfad eingeben, ESC drücken und dann :wq eingeben und mit Enter bestätigen. Nach einem Neustart sind alle im /usr/local/mysql/bin Verzeichnis befindenden Programme auffindbar.

Achtung: Anfangs besitzt der MySQL root Account kein Passwort! Zur einfachen Verwaltung empfehle ich phpmyadmin – ein WebGUI.

Einen SVN Server unter Mac OS X einrichten

SVN wird bereits mit Mac OS X ausgeliefert. Damit der SVN Server auch von außen ansprechbar ist muss in erster Linie der Apache Webserver konfiguriert werden. Ich verwalte meine SVN Repositories im Ordner /usr/local/svn/. Um die Repositories von außen ansprechbar zu machen muss eine Datei namens svn.conf im Ordner /etc/apache2/other angelegt werden. Sie besitzt folgenden Inhalt:

LoadModule dav_svn_module /usr/libexec/apache2/mod_dav_svn.so
<Location /svn>
  DAV svn
  SVNParentPath /usr/local/svn
</Location>

Nachdem Apache neu gestartet wurde sind die Repositories in /usr/local/svn/ unter http://localhost/svn ansprechbar. Beim Anlegen eines neuen Repositories namens foo mit

sudo svnadmin create /usr/local/svn/foo

Muss darauf geachtet werden, dass Apache und das SVN Modul auch darauf zugreifen können. Dazu ändern wir zuvor den Besitzer der Dateien in www um:

sudo chown -R www:www /usr/local/svn

Damit ist SVN bereits fertig eingerichtet. Ich empfehle die Absicherung des SVN Verzeichnisses. Dazu muss zunächst eine htpasswd Datei erzeugt werden:

htpasswd -cm /etc/apache2/svn.auth benutzername

Die svn.conf Datei muss um folgendes erweitert werden:

LoadModule dav_svn_module /usr/libexec/apache2/mod_dav_svn.so
<Location /svn>
  DAV svn
  SVNParentPath /usr/local/svn
  AuthType Basic
  AuthName "Subversion Login"
  AuthUserFile /etc/apache2/svn.auth
  Require valid-user
</Location>

Die Repositories sind jetzt unter http://localhost/svn erreichbar. Zur einfachen Verwaltung empfehle ich WebSVN – ein WebGUI.

Update: Sollte der Apache Server mit der obigen svn Konfiguration nicht mehr starten, muss darauf geachtet werden, dass die Apache Module mod_dav.so und mod_dav_fs.so auch geladen werden. Danke an Alexander für diesen Tip.

You’ll find quite a lot of guides showing you how to install an svn server on your Mac OS X machine. But most of them don’t tell you, that Mac OS X ships with a fully functional svn system. This is how you configure it.

Start of by opening Terminal and creating a new folder holding your future svn repositories:

sudo mkdir /usr/local/svn

Make sure you change the folder’s owner to “www” in order to make it accesable through apache:

sudo chown -R www:www /usr/local/svn

Now create a new repository:

sudo svnserve create /user/local/svn/foo

where foo is your repository’s name.

Make sure, apache is running by checking your system preferences and enabling web sharing.

Now create a new file named svn.conf and place it in /etc/apache2/other. Type the following into the file:

LoadModule dav_svn_module /usr/libexec/apache2/mod_dav_svn.so
<Location /svn>
  DAV svn
  SVNParentPath /usr/local/svn
</Location>

Restart apache by typing

sudo apachectl graceful

into your terminal. And you’re ready and set. Access your repository through http://localhost/svn.

Mac OS X comes with a huge amount of useful stuff. You just need to find and use them. Here is a walkthrough showing you how to set up an automatically backup-system on Mac OS X.

There are several ways to backup your files and probably the best way to do it would be to use rsync. It allows you to backup your files onto a remote machine. But probably this is a bit to heavy for the task you most probably want to achieve: Backup a folder on your local harddrive on a regular basis.

First, create a new file called backupFiles.sh in a folder of your choice. I place sh scripts in /User/myusername/Documents/scripts.

Open it in you favourite editor and type:

# Remove the oldest backup file.
rm –f /Library/WebServer/backups/backup.2.tgz

# Rename the old backup files
mv –f /Library/WebServer/backups/backup.1.tgz /Library/WebServer/backups/backup.2.tgz
mv –f /Library/WebServer/backups/backup.0.tgz /Library/WebServer/backups/backup.1.tgz

# create a new backup file.
tar –czf /Library/WebServer/backups/backup.0.tgz /Library/WebServer/Documents/*

Replace the directories to the directories of your choice. Note: The directory paths have to be absolute paths.

The above script will create a new compressed backup file named backup.0.tgz of my htdocs directory located at /Library/WebServer/Documents. A total of three backups will be found in /Library/WebServer/backups/, where backup.0.tgz is the latest and backup.2.tgz the oldest one.

To set up a new so called cronjob (a command that will be excecutet on a defined, regulare basis) open up your terminal and type:

crontab –e

This will open up your crontab file in your default editor. Probably vim. If you have no crontab file, it will simply create a new empty one.

After pressing i to insert into vim, type:

#min hour mday month wday command
0 3 * * 6 sh /Users/myusername/Documents/scripts/backupFiles.sh

Replace the file path with the path of your custom backup script. Press ESC to stop inserting and type :wq to write and quit vim. A new cronjob has been defined. It will be run at 3 am every Saturday.

You can define the time you want the script to be excecuted like this:

Minute Hour DayOfTheMonth Month Weekday (0 = Sunday, 6 = Saturday) Command

A few examples:

Daily excecution at 3:15 am

15 3 * * * command

Weekly excecution at 6:30 pm every Saturday

30 18 * * 6 command

Monthly excecution at midnight on the first day of the month:

0 0 1 * * command

Use */10 to define the excecution every 10 minutes:

*/10 * * * * command

Hope this helped you backup your files.

In order to use -webkit and/or -moz style CSS3 attributes such as ‘-webkit-transform’ or ‘-moz-rounded-border’ to generate rounded borders, transformations etc. you have to extend the mootools Element.Styles hash. Doing this enables you to use the Element.setStyle() method. You can even use the whole mootools effects library and tween -webkit and/or -moz styles.

Element.Styles.extend({
	WebkitTransform: 'rotateX(@deg)'
});

The styles property-name has to be given camelCases. Thus ‘-webkit-transform’ has to be given as ‘WebkitTransform’. Specify how the property has to be set by defining a string like ‘rotateX(@deg)’ and leaving the @ to be replaced by the value you set the css property to.

Read on for an example.

Element.Styles.extend({
	WebkitTransform: 'rotateX(@deg)' // @ will get replaced by the value you pass over
});

window.addEvent('domready', function() {
	$('button').addEvent('click', function() {
		var swingAnimation = new Fx.Tween($('contentBox'), {
			property: '-webkit-transform',
			duration: 2000,
			transition: Fx.Transitions.Elastic.easeOut
		});
		swingAnimation.start(60, 0);
	});
});

Registriert man bei Google Mail eine E-Mailadresse – z.B. dasIstEineEMailAdresse@googlemail.com – so wird der komplette Benutzername unabhängig von Groß-/Kleinschreibung und Punkten (.) interpretiert: registriert man die E-Mail-Adresse dasIstEineEMailAdresse@googlemail.com, so hat man automatisch auch folgende weitere Adressen das.ist.eine.emailadresse@googlemail.com oder das.istEineEmailAdresse@googlemail.com etc.

Welche Vorteile sich für den Benutzer und welche Nachteile für einen Webmaster sich hierdurch ergeben soll hier kurz aufgezeigt werden.

Vorteile für den Benutzer

Durch unterschiedliche E-Mail-Adressen, welche aber alle zu einem Postfach führen, gibt es für den Benutzer eine Reihe von Vorteilen.

Organisation/Kategorisierungen

Der Benutzer kann die E-Mails besser organisieren bzw. kategorisieren. Beispielsweise wird für alle Newsletter die E-Mail-Adresse m.ax.mueller@googlemail.com verwendet, für den privaten Kontakt max.mueller@googlemail.com. Mit Hilfe der Filtereinstellungen bei Google-Mail können dann alle Newsletter unabhängig vom Absender mit einem Label versehen und aus dem Posteingang verschoben werden – so findet man im Posteingang dann wirklich nur die “wichtigen” E-Mails.

Privatsphäre

Manche Plattformen bieten die Möglichkeit über eine E-Mail-Adresse zu prüfen ob ein User angemeldet ist (z.B. Facebook). Dies ist nicht von jedem User gewünscht. Hier bietet sich dann mit einer Google-Mail-Adresse die Möglichkeit seine E-Mail-Adresse auf der Plattform z.B. auf max.m.u.e.l.l.e.r@googlemail.com zu ändern. Sucht ein User nach max.mueller@googlemail.com so wird er nicht fündig werden – und trotzdem muss man nicht eine weitere E-Mail-Adresse registrieren.

Nachteile für den Webmaster

Natürlich ergeben Sie durch dieses Feature auch Nachteile. Oft wird die E-Mail-Adresse als primary Key verwendet um so Mehrfachanmeldungen oder Nutzungen schnell und einfach zu unterbinden. Dies wird genutzt unter anderem bei:

• Serialversand
  Das Produkt X darf 14 Tage mit der Serial Y getestet werden. Wird danach versucht erneut eine Serial anzufordern, schlägt das für die benutzte Adresse fehl
• Unterbinden von Mehrfachregistrierung
  Es soll verhindert werden dass sich ein Benutzer mehrfach registriert – unabhängig ob das Verhalten gewollt oder ungewollt ist. Sei es auf Community-Seiten oder auch finanziell orientierten Homepages wie Online-Shops.

Natürlich gibt es neben der “Google-Mail-Problematik” auch noch andere Möglichkeiten wie Wegwerf-E-Mail-Adressen, Automatische Erstellung von E-Mail-Konten, oder sogar der Besitz einer (E-Mail-)Domain (ich@meineDomain.de, ich1@meineDomain.de, …). Wir wollen uns aber hier nur mit Google-Mail beschäftigen.

Eine Möglichkeit das Problem zu umgehen ist der folgende einfache Algorithmus:

1. Prüfe ob Google-Mail-Adresse
2. Wenn Ja entferne im Benutzername alle Punkte
3. Speichere E-Mail-Adresse

Wenn nun geprüft werden soll, ob ein Account schon eine E-Mail-Adresse verwendet, wird auf diese der Algorithmus angewandt, und dann z.B. die Datenbank nach der Mail-Adresse durchsucht. Bleibt die Suche erfolglos, darf sich der User registrieren, wenn nicht, ist der User wohl mit einer ähnliche Adresse bereits registriert und sollte darauf hingewiesen werden. Wichtig ist hierbei, dass der Datenbestand, in dem die Mail-Adresse gesucht wird, bereits die “gesäuberte Adressen” besitzt.

Hinweis: Bei Google-Mail sind gmail.com und googlemail.com möglich. Dies wird vom Script entsprechend beachtet und alle Adressen auf gmail.com umgeschrieben.

Die Implementierung könnte in PHP z.B. gefolgt aussehen:

/**
 * Cleans an e-mail-address (especially Google-Mail-adresses) to avoid duplicates.
 * @param String $emailStr e-mail-address
 */
function clean_email($emailStr) {
	$emailStr = strtolower ($emailStr);
	$tokens = preg_split ("/@/", $emailStr);

	if ($tokens [1] == "gmail.com" || $tokens [1] == "googlemail.com") {
		return str_replace (".", "", $tokens [0]) . "@googlemail.com";
	} else {
		return $emailStr;
	}
}

Ein Aufruf von

echo clean_email("m.a.x.MUELLE.R@gmail.com") . "<br/>";
echo clean_email("m.a.x.MUELLE.R@googlemail.com") . "<br/>";
echo clean_email("max.mueller@web.de");

hat dann entsprechende folgende Ausgabe:

maxmueller@googlemail.com
maxmueller@googlemail.com
max.mueller@web.de

Epilog

Nicht immer wenn sich ein User versucht nochmal zu registrieren ist dies beabsichtigt. Ggf. hat der User schlicht vergessen dass er auf einer Seite registriert ist, oder kann sich nicht mehr einloggen, weil er seine Logindaten nicht mehr kennt. Deshalb sollte immer eine entsprechende Meldung ausgegeben werden wie z.B. “Es ist bereits ein User mit dieser E-Mail-Adresse registriert. Haben Sie Ihr Passwort vergessen?” mit entsprechenden Link zu einer Seite, wo ein neues Passwort beantragt werden kann.

Auch ist bei Prüfung auf Google-Mail-Adressen und Wegwerf-Adressen natürlich nicht vor einer Mehrfachregistrierung geschützt. Sicher ist das nur über das kostenpflichtige und  zeitaufwendige Postident-Verfahren – was jedoch im Internet an der Praxis scheitert.

Weitere Informationen:

• Google Mail-Hilfe – Empfangen von E-Mail-Nachrichten anderer Personen
• bspamfree.org – Wegwerf-E-Mail-Adressen
• Wikipedia – Postident
• Deutsche Post – Identitätsprüfung

Ein Besuch auf www.regnets.in zeigt kurz und knapp die aktuelle Wetterlage für den Standort des Besuchers an. Ermöglicht wird das über Geolocation anhand der IP-Adresse des Benutzers. Natürlich kann der Benutzer auch andere Städte abfragen: www.regnets.in/Hamburg oder www.regnets.in/Berlin.

Geolocation lässt sich beispielsweise mit (kostenlosen) GeoLite City von MaxMind sehr einfach in PHP-Projekte integrieren. Mit nur wenigen Dateien und wenigen Zeilen Code lässt sich so der Standort des Besuchers relativ genau (für Deutschland mit 71% Trefferquote) bestimmen.

Die benötigten Dateien…

• geoip.inc
• geoipcity.inc
• geoipregionvars.php
• GeoLiteCity.dat – die eigentliche Datenbank

… lassen sich hier herunterladen.

Folgender PHP Code liefert die Geolocation des Besuchers:

include("geoipcity.inc");
include("geoipregionvars.php");

function getCity() {

	$gi = geoip_open("GeoLiteCity.dat", GEOIP_STANDARD);
	$record = geoip_record_by_addr($gi, $_SERVER['REMOTE_ADDR']);
	geoip_close($gi);

	return $record->city;
}

Das $record-Objekt enthält aber auch noch andere, interessante Daten:

print $record->country_code . " " . $record->country_code3 . " " . $record->country_name . "\n";
print $record->region . " " . $GEOIP_REGION_NAME[$record->country_code][$record->region] . "\n";
print $record->city . "\n";
print $record->postal_code . "\n";
print $record->latitude . "\n";
print $record->longitude . "\n";
print $record->metro_code . "\n";
print $record->area_code . "\n";

Fragen, Anregungen? Dafür sind die Kommentare da!

Mit HTML 5 kommt auch das neue <audio> Element. Es erlaubt das abspielen von Audiodateien direkt im Browser. Eine kleine Gruppe Entwickler bei Mozilla bemühen sich auch um eine Audio API, die das Abfragen und Manipulieren der Audioelemente ermöglichen kann. Noch gilt die API als experimentel, soll aber in zukünftige Firefox Versionen zu finden sein.

Was für Möglichkeiten sich mit dieser API ergeben zeigen zahlreiche eindrucksvolle Beispiele. Hier ist eines meiner Experimente:

Favelizer – ein 16 x 16 Pixel Frequenz Spectrum in der Browseradresszeile:

Eine Live-Vorschau findet sich hier: http://labs.daslaboratorium.de/favelizer

Wer sich die gepatchte Firefox-Beta nicht herunterladen möchte, kann den Favelizer auch hier in Aktion ansehen (leider ohne Sound):

So funktionierts:

Das Audio-Element erhält ein onaudiowritten Attribut, mit dem wir beim Abspielen der Musik fortlaufend eine beliebige Javascript Funktion aufrufen können:

<audio src="datei.ogg" controls="true" onaudiowritten="update(event);">

Mit dem übergebenen event-Objekt können wir auf die Audio-Signale zugreifen:

function update(event) {
     signal   = event.mozFrameBuffer;
     spectrum = event.mozSpectrum;
 }

Um das Favicon dynamisch und möglichst schnell erzeugen zu können, greife ich auf processing.js zurück. Das ist wesentlich einfacher als beispielsweise mit

ctx = $('frame').getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(1, 1, 1, 16);

Pixel für Pixel einzeln zu färben.

Processing.js ist eine durch Javascript verwirklichte eigene Programmiersprache und gleicht in seinem Aufbau Java. Processing.js nutzt das html5 canvas object und ermöglicht beeindruckende Graphikdarstellungen im Browser – ganz ohne Flash.

Mit einem bisschen Mathematik lässt sich so ganz einfach ein Frequenz Spectrum auf 16 x 16 Pixel bringen:

void draw() {
    background(0);
    strokeWeight(1.0);

    if (spectrum.length > 0) {
        for (int i = 0; i <= 16; i++) {
            var j         = i + 30 * spectrum.item(i * 4);
            var log       = -1 * Math.log(1 / j);
            var magnitude = 16 - spectrum.item(i * 4) * 256 * log;
            stroke(0, 255, 0);
            line(i, 16, i, 16 - magnitude);
        }
    }
}

Das Favicon brauchen wir dann nur noch in regelmäßigen Abständen auszutauschen:

window.setInterval(function() {
    var icon = $('icon');
    var newIcon = icon.cloneNode(true);
    newIcon.setAttribute('href', ctx.canvas.toDataURL());
    icon.parentNode.replaceChild(newIcon, icon);
 }, 60);

Es lohnt sich auf jeden Fall ein Blick in den Sourcecode: http://labs.daslaboratorium.de/favelizer

Es stockt bei mir!?

Das liegt daran, dass wir zum Austausch der einzelnen Favicon-Frames ein neues Objekt erstellen und damit das alte Icon auswechseln müssen. Da häuft sich natürlich einiges an Datenmüll (alte, nicht mehr verwendete Objekte) an, der aufwendig beseitigt werden muss. Der sg. Garbage-Collector verschluckt sich. Eine schnelle Lösung habe ich im Moment leider noch nicht parat.

Das »Web2.0« mit seiner neuen (alten) Technologie Ajax macht viele Webseiten zu komplexen Programmen. Webseiten können zur Laufzeit verändert und mit dynamischen Inhalten gefüttert werden. Doch Ajax ist nicht unbedingt geeignet für jede Webanwendung, da es immer noch zwei Verbindungen benötigt: Einen Up-Stream für die GET- oder POST-Anfrage und einen Downstream für die Response.

Wer beispielsweise schon einmal mit Google Wave gespielt hat, wird merken, dass eingegebene Zeichen (mit sehr kurzer Verzögerung) auf dem Bildschirm des Gesprächspartners erscheinen. Wer so etwas mit Ajax verwirklichen will muss trickreich mit so genannten long live HTTP GET Requests spielen (siehe diese Google Wave Präsentation, Minute 11:00). Doch Abhilfe naht: das HTML5 WebSocket Interface findet sich bereits in den erstsen Web-Browsers implementiert. Auch der neue Editor’s Draft der WebSocketAPI von gestern (15. April 2010) sieht vielversprechend aus.

Das WebSocket Interface erlaubt den Aufbau einer bestehenden, fullduplex Verbindung über das WebSocket Protokoll und lässt sich erstaunlich einfach mit JavaScript in die eigenen Webanwendungen implementieren. Es besitzt einen Constructor

WebSocket(url [, protocol])

mit den Parameter URL (String) und dem optionalen Parameter protocoll (String).

Das WebSocket Interface besitzt die folgenden Attribute:

readonly String URL
readonly unsigned short readyState
    0 = Connecting
    1 = Open
    2 = Closing
    3 = Closed
readonly unsigned long bufferedAmount

Das WebSocket Interface besitzt zudem die folgenden Funktionen:

boolean send(String data)
void close()

Außerdem besitzt das Interface folgende Events:

onopen
onmessage
onerror
onclose

Eine typische und rudimentäre Implementierung könnte demnach so aussehen:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        mySocket.send('Hello');
    }, 50);
}

Wir erstellen demnach ein WebSocket Objekt und senden alle 50ms eine Nachricht an den Empfänger auf Port 80. Hier können bereits Probleme auftreten: Was wenn die Verbindung des ausführenden Rechners nicht ausreicht um alle 50ms eine Nachricht zu versenden? Hierfür nehmen wir das Attribut bufferedAmount zur Hilfe. bufferedAmount ist nur dann gleich 0, wenn keine Daten mehr in der Warteschlange zum Versenden sind. Unsere überarbeitete Implementierung:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        if(mySocket.bufferedAmount == 0) {
            mySocket.send('Hello');
        }
    }, 50);
}

Empfangene Daten können wir mit dem onmessage Event verarbeiten:

mySocket.onmessage = function(data) {
    document.getElementById('Output').appendChild(
        document.createTextNode(data)
    );
}

Hier zeigen wir die Daten im Browserfenster an. Fehler können wir mit dem error Event abfangen. Das Auslösen des error Events muss nicht zwangsläufig bedeuten, dass die Verbindung abgebrochen ist, kann es aber:

mySocket.onerror = function(error) {
    alert('error');
    if(mySocket.readyState != 1) {
        document.getElementById('Output').appendChild(
            document.createTextNode("Ein Fehler ist aufgetreten.")
        );
    }
}

Um Daten mit einem Server auszutauschen benötigen wir einen Server, der das WebSocket-Protokoll unterstützt. Für die ersten Experimente eignet sich zum Beispiel pywebsocket. Es kann sowohl als Apache-Modul oder auch als Stand-Alone-Server betrieben werden.

Im Moment unterstützen meines Wissens leider nur Google Chrome und Safari WebSocket. Firefox wird es in nicht alzu ferner Zukunft implementieren. Eine Chat-Demo unter Verwendung von WebSockets findet sich hier.

Anregungen? Hierfür sind die Kommentare da.