Red5 + Flex: Erste Schritte

Hallo zusammen,

da wir uns derzeit mit Remote-Anwendungen und dem Red5 Server beschäftigen, werde ich in nächster Zeit einige Infos hierzu schreiben. Ich finde die Infos die es bisher gibt schwierig zu finden (oder ich bin zu blöd dafür) oder unübersichtlich. Deshalb versuche ich eine Anleitung in einfachen Schritten zu geben, genauso wie ich das ganze ausprobiere.

Vorab: Mit dem Red5 Server lassen sich alle erdenklichen Anwendungsfälle zum Videostreaming, etc. abdecken, ich konzentriere mich zunächst auf die SharedObjects zum einfachen Datenaustausch. In vielen Beispielen wird direkt mit der Java-Entwicklung der Serveranwendungen begonnen, das schreckt mich irgendwie ab. Um ein einfaches SharedObject zu benutzen ist das alles aber nicht nötig.

Die Schritte um eine funktionierende Red5 Installation inkl. Datenaustausch mit Flex an den Start zu bekommen:

1. Red5 Setup auf dem Server (in unserem Fall Windows)

Ich habe den Red5 Server auf einem Windows2003 Server installiert, es sollte aber auch unter jeder anderen (aktuellen) Windows Version gehen. Wer keinen gesonderten Server zur Verfügung hat, kann die Installation auch lokal vornehmen und dann über localhost zugreifen. Die Installation setzt eine JVM voraus. Diese kann hier heruntergeladen werden: http://www.java.com/de/download/
Danach Red5 herunterladen und installieren: http://osflash.org/red5/070final

Nach der Installation kann der Server gestartet und getestet werden. Dazu über das Startmenü öffnen -> Red5 -> Start Red5. Der Start dauert einige Sekunden.

Danach die IP des Servers mit Port 5080 im Browser eintippen. Also bei lokaler Installation http://127.0.0.1:5080. Wird hier etwas angezeigt, funktioniert schonmal der Server und die Beispiele können ausprobiert werden. Am besten direkt BallControl öffnen und testen ob der Server auch eine Verbindung entgegennimmt: http://127.0.0.1:5080/demos/BallControl.html. Dort im Eingabefeld statt localhost die IP des Servers eintragen und auf connect klicken. Wird jetzt das Icon neben dem Eingabefeld grün, funktioniert soweit alles.

2. Eine Anwendung für den Red5 Server vorbereiten

Serveranwendungen für Red5 bestehen meist aus komplexen Java-Applikationen, die serverseitig gestartet werden. Für unsere Zwecke reicht das einfachste aller Setups ohne Java-Klassen, lediglich ein paar XML Files werden benötigt. Da es dieses Setup im Prinzip schon als Demo gibt, verwenden wir dieses und verzichten auf alles weitere. SOSample ist unser Freund. Die Applikationen sind im Red5 Installationsverzeichnis unter webapps abgelegt. Hier finden sich einzelne Ordner, unterhalb derer die Anwendungen liegen. Im Falle von SOSample liegt hier nur ein Ordner WEB-INF innerhalb dem drei Dateien zur Konfiguration liegen.
Wer sich mit den Parametern kurz beschäftigen möchte, dem sei die Lektüre dieser Seite empfohlen: http://red5.electroteque.org/dev/doc/html/CreatenewapplicationsinRed5.html
Hier wird in drei Sätzen erklärt, was die Basiseinstellungen sind.

3. Eine Netconnection im Flex öffnen, ein Shared Object erstellen, dieses verbinden und Daten austauschen:

Wenn nun der Server läuft können wir uns einer simplen Flex-Anwendung widmen. Dazu erstellen wir eine neue Flex-Anwendung. Meine Demoanwendung ist dann so aufgebaut, dass ich einen kleinen Canvas habe, den ich herumziehe. Bei MouseMove werden die aktuellen Koordinaten in das SharedObject geschrieben. Wenn das Objekt aktualisiert wird, wird wiederum der Canvas positioniert. Simples Remoting. Die Details zum verschieben spare ich mir hier. Der Datenaustausch erfolgt so:

Zunächst benötigen wir im globalen Kontext eine NetConnection und das SharedObject:

protected var nc:NetConnection = new NetConnection();
protected var so:SharedObject;

Die Connection wird dann (bei mir in createChildren, kann aber auch im Kontruktor geschehen) initialisiert und das SharedObject erstellt und verbunden:

nc.connect("rtmp://127.0.0.1/SOSample");
so = SharedObject.getRemote("sample", nc.uri, false);
so.addEventListener( SyncEvent.SYNC, handleSync );
so.connect(nc);

Bei Mausbewegung werden die Daten gesendet:

so.setProperty( "x", rect.x );
so.setProperty( "y", rect.y );

Und im SyncHandler (handleSync) werden die empfangenen Daten verarbeitet. (Sync wird jedes Mal ausgelöst wenn sich etwas im SharedObject verändert):

protected function handleSync( event:SyncEvent ):void {
rect.x = so.data.x;
rect.y = so.data.y;
}

Das war schon alles. Damit ist ein erster einfacher Datenaustausch mit einem Red5-Server realisiert ohne dass nur ein Stück Java-Serveranwendung geschrieben werden muss.

Tags: , , , , ,

Ein Kommentar zu “Red5 + Flex: Erste Schritte”

  1. suisse schreibt am 29.07.2010 um 01:43

    Hallo
    wie sieht nun der entgültige script aus? irgendwie bekomm ich immer einen fehler beim compilieren.. :S kann doch nicht so schwer sein -.- ich krieg es echt nicht hin, ich dachte nicht, dass ein wechsel vom flash cs4 as2 auf flex mit as3 soviele schwierigkeiten mit sich bringen würde…

    ich hoffe jemand kann hier helfen, wie der entgültige code den nun aussehen würde, so dass der compiler im flex nicht meckern würde..
    danke

Einen Kommentar hinterlassen