From Ape Wiki

Jump to: navigation, search

[edit] Hello World

In this tutorial you will discover how to connect a client to an APE Server and send data to a channel. This tutorial will cover all the basics of client/server interaction.


[edit] Hello World!

Now your client is connected and you can send requests to the APE Server. You have access to all Core function.

1) The first thing we are going to do is to join a channel in order to be able to send and receive data to and from it. To join a channel use the join() function in core. Remember to put this in the ready-handler.

2) The event multiPipeCreate is fired when you successfully join a channel and are ready to send/receive data on/from it. Three arguments are passed to the callback function :

  • A pipe object. A pipe object allow you to perform some operation on a pipe  : sending data, receiving data, listen for event, ...
  • Options of the pipe FIXME.

3) Then send a message to the channel (Multi pipe) by using the pipe's send() function. The send function triggers a 'SEND' command. The 'SEND' command is used to send messages to multi or uni pipes. The message will be send to all users on the pipe. Note : you don't receive messages, you send them!

4) When you receive a message a raw event is fired. A raw event is an event fired each time you receive data from the server. Raw events can be intercepted with the onRaw function. 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));
});

To fully test this sample, open the page you've created in two different browser pages or tabs. When the second page is loaded you'll see this message in the console log of the first window : "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/uncompressed/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 the core start function to connect to APE Server
                client.core.start({"name":prompt('Your name?')});
            });
 
            //4) Listen for 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 multiPipeCreate 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 receipt of the 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"