From Ape Wiki

Jump to: navigation, search

Contents

[edit] Hallo Welt

In diesem Tutorial wird anhand eines einfachen Beispiels erläutert, wie man sich mit einem Client mit dem APE Server verbindet und Daten an einen Kanal sendet. Es werden die Grundlagen über die Interaktion zwischen Client und Server erläutert.

[edit] Vorraussetzungen

  • Der APE Server und Client sollten installiert sein und es sollte sicher gestellt sein, dass sie funktionieren.
  • Du solltest Introduction to APE und Introduction to APE Javascript Framwork gelesen haben, um zu verstehen, wie APE und das APE JavaScript Framework funktionieren, bevor Du mit disem Tutorial fortsetzt.
  • Wenn Du Firefox verwendest installiere Dir am besten die Erweiterung Firebug. Bei Verwendung anderer Browser sollte ein entsprechendes Tool für das Konsolen-Logging installiert sein.
  • Für die Verwendung von APE sollte ein gewisses Wissen an JavaScript vorhanden sein.

[edit] Initialisierung des APE Client

Als aller erstes legen wir eine HTML-Datei für den Client an. In diesem Tutorial werden wir den apeClientJS.js verwenden.

In dieser Datei Build/apeClientJS.js müssen die Server-Daten hinterlegt werden. 

/***
 * APE JSF Setup
 */
APE.Config.baseUrl = 'http://yourdomain.com/apejsf//'; //APE JSF
APE.Config.domain = 'yourdomain.com'; //Your domain, must be the same than the domain in aped.conf of your server
APE.Config.server = 'ape.yourdomain.com'; //APE server URL

Hinweis : Der apeClientMoo.js funktioniert auf dieselbe Art und Weise wie der appClientJS.js. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
    <head>  
        <!-- Load APE Client -->
        <script type="text/javaScript" src="Build/apeClientJS.js"></script>
    </head>
 
    <body>
        <script type="text/javaScript">
            // Anlegen einer Instanz des APE Clients
            var client = new APE.Client();
        </script>
    </body>
</html>

[edit] Verbindungsaufbau zum APE Server

1) Vor dem Verbindungsaufruf zum APE Server, muss die Funktion load() auf der Seite des Clients ausgeführt werden. Diese Funktion erzeugt ein Iframe und lädt in diesen den APE-Core.

2) Der Client und die APE-Core kommunizieren über ein Ereignissystem. Sobald der APE-Core geladen ist, load wird ein Ereignis ausgelöst. Die APE-Core Ereignisse lassen sich durch den Client mittels der Funktion addEvent() abfangen. Es kann eine eigene Callback-Funktion integriert werden, die beim Eintreffen eines Ereignisses durchlaufen wird.

3) Sobald der APE-Core einmal geladen ist, ist die Variable core auf der Seite des Clients gesetzt. Sie ist ein Verweis auf den APE-Core. Die erste Funktion, die aufzurufen ist, ist start() . Sie sendet eine "login" Anfrage an den APE Server.

4) Der letzte Schritt ist es, auf das ready Ereignis zu warten, welches ein erfolgreichen Verbindungsaufbau zwischen Client und APE Server bekannt gibt.


Füge folgenden Code-Abschnitt in Deine HTML-Seite ein: 

// Anlegen einer Instanz des APE Clients
var client = new APE.Client();
 
//1) Laden des APE-Core
client.load();
 
//2) Einhängen in das 'load' Ereignis. Dieses Ereignis wird ausgeführt, wenn der APE-Core geladen und beriets ist sich mit dem APE Server zu verbinden
client.addEvent('load', function() {
    //3) Aufruf der 'start' Funktion des Core, um sich mit dem APE Server zu verbinden
    client.core.start();
});
 
//4) Einhängen in das 'ready' Ereignis, um mitzubekommen, wann der Client mit dem APE Server verbunden ist
client.addEvent('ready', function() {
    console.log('Your client is now connected');
});

[edit] Hallo Welt!

Nun, wo der Client verbunden ist und Anfragen an den Server gesandt werden können, kann auf alle APE Core Funktionen zugegriffen werden.

1) Die erste Sache, die wir tun werden ist es sich einem Channel anzuschließen, um Nachrichten senden und empfangen zu koennen. Zum Anschließen an einen Channel existiert die Funktion join() des APE-Cores.

2) Das Ereignis multiPipeCreate wird ausgelöst, wenn man sich erfolgreich mit einem Channel verbunden hat und Daten über diesen Channel senden und empfangen kann. Es werden der Callback-Funktion drei Parameter übergeben:

  • Ein pipe Objekt. Ein Pipe Objekt erlaubt es einem Aktionen auf dieser Pipe durchzuführen  : Daten senden, Daten empfangen, auf Ereignise warten,, ...
  • Optionen der Pipe FIXME.

3) Als nächstes schicken wir eine Nachricht an den Channel (Multi pipe) indem wir die Funktion send() der Pipe verwenden. Die Funktion send() der Pipe sendet das 'SEND' Kommando an den APE-Server. Das 'SEND' Kommando wird verwendet, um eine Nachricht an eine multi oder uni Pipe zu verschicken. Die Nachricht wird an alle Teilnehmer der Pipe gesandt. Hinweis : Es gibt keine Bestätigung, dass die Nachricht angekommen ist, die versandt wurde!

4) Wenn eine Nachricht an einen Client zugestellt wird, wird das raw Ereignis ausgelöst. Ein raw Ereignis ist ein Ereignis, welches jedesmal ausgelöst wird, wenn Daten vom APE Server empfangen werden. In das raw Ereignis kan sich mittels der onRaw Funktion eingehängt werden. The raw corresponding to the reception of a message is the raw 'DATA' 

//1) join 'testChannel'
client.core.join('testChannel');
 
//2) Intercept pipeCreate event
client.addEvent('multiPipeCreate', function(pipe, options) {
    //3) Send the message on the pipe
    pipe.send('Hello world!');
    console.log('Sending Hello world');
});
 
//4) Intercept the reception of new message.
client.onRaw('data', function(raw, pipe) {
    console.log('Receiving : ' + unescape(raw.data.msg));
});

Das Beipiel sehen: Öffne zwei Fenster/Tabs deines lieblings Browsers zu deiner Kopie von dieser Anleitung. Sobald die zweite Seite geladen wurde solltest du auf der Seite deines ersten Fenster stehen haben : "Hello world!"

[edit] Complete source code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
    <head>  
        <!-- Load APE Client -->
        <script type="text/javaScript" src="Build/apeClientJS.js"></script>
    </head>
 
    <body>
        <script type="text/javaScript">
            //Instantiate APE Client
            var client = new APE.Client();
 
            //Load APE Core
            client.load();
 
            //Intercept 'load' event. This event is fired when the Core is loaded and ready to connect to APE Server
            client.addEvent('load', function() {
                //Call core start function to connect to APE Server
                client.core.start();
            });
 
            //4) Listen to the ready event to know when your client is connected
            client.addEvent('ready', function() {
                console.log('Your client is now connected');
                //1) join 'testChannel'
                client.core.join('testChannel');
 
                //2) Intercept pipeCreate event
                client.addEvent('pipeCreate', function(type, pipe, options) {
                //3) Send the message on the pipe
                pipe.send('Hello world!');
                    console.log('Sending Hello world');
                });
 
                //4) Intercept the reception of new message.
                client.onRaw('data', function(raw, pipe) {
                    console.log('Receiving : ' + unescape(raw.data.msg));
                });
            });
        </script>
    </body>
</html>
Retrieved from "http://www.ape-project.org/wiki/index.php/Tutorial:Hello_world/de"