From Ape Wiki

Jump to: navigation, search

[edit] Color changer

This example will show you how to exchange data between client and server. You will learn how to write a server module and how to catch incoming data from server. This tutorial is using jquery for DOM interaction, but the APE stuff is the same if you use any other framwork.

[edit] Create a server module

First locate where your server side scripts are located. If you installed APE from .deb or .rpm it's in /var/ape/ if you installed APE from source it's in the scripts directory.

Create a new file named color.js in your script directory and paste this content : 

    //1) Register a new command "newColor"
    Ape.registerCmd('newColor', true, function(params, cmd) {
        //2) Get the channel where data were sent
        var channel = Ape.getChannelByPubid(params.pipe);
        if (channel) {
            //3) Send data to the channel, with color parameter
            channel.pipe.sendRaw('changeColor', {'color': params.color});
        } else {
            return ['401', 'UNKNOWN_CHANNEL'];
        }
    });
  • 1 - Ape.registerCmd is used to execute code on the server side when client is sending data. Here, it's when the client is sending the comand "newColor"
  • 2 - Ape.getChannelByPubid is used to get the pipe (channel) object where the user send data. The params.pipe arguments contains the pipe pubid where client sent data (see client side code).
  • 3 - sendRaw is used to send a raw on the pipe. The first argument is the name of the raw, the second arguments is an object with data to send to the client.

Open main.ape.js and add to the list of include : 

include('color.js');

Then restart your server to apply changes. When you start your server, you should now see, one more line "[JS] Loading script ../scripts/color.js..."

[edit] Client side code

Put this code to the APE JSF folder. And don't forget to add jQuery! 

<!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>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javaScript" src="./Clients/JavaScript.js"></script>
    <script type="text/javaScript" src="./Demos/config.js"></script>
    <script type="text/javaScript" src="./jquery-1.4.2.js"></script>
</head>
    <body>
        <div style="width:150px; height:150px; border:1px solid #000" id="color"></div>
        <br/>
        Select a color :
        <div class="colorChanger" style="width:80px; height:25; background-color: #ffffff">#FFFFFF</div>
        <div class="colorChanger" style="width:80px; height:25; background-color: #ff0000">#FF0000</div>
        <div class="colorChanger" style="width:80px; height:25; background-color: #3bff00">#3BFF00</div>
        <div class="colorChanger" style="width:80px; height:25; background-color: #00fff0">#00FFF0</div>
        <div class="colorChanger" style="width:80px; height:25; background-color: #001eff">#001EFF</div>
        <div class="colorChanger" style="width:80px; height:25; background-color: #ff00de">#FF00DE</div>
 
        <script type="text/javaScript">
            //1) Load APE Client and auto join testChannel
            var client = new APE.Client();
            client.load({'channel': 'testChannel'});
 
            //2) When client is loaded, connect to APE Server with a random name
            client.addEvent('load', function() {
                client.core.start({'name': new Date().getTime().toString()});
            });
 
            //3) Catch multipipeCreate event
            client.addEvent('multiPipeCreate', function(pipe) {
                //Attach click event to all div with colorChanger class
                $('.colorChanger').click(function() {
                    //4) Send a command "newColor" on the pipe (channel) with color arguments
                    pipe.request.send('newColor', {'color': $(this).text()});
                });
            });
 
            //5) Intercept changeColor raw
            client.onRaw('changeColor', function(params) {
                    $('#color').css('background', decodeURIComponent(params.data.color)); 
                    //decodeURIComponent is used because the char # of the color is encoded by the browser when the request is sent 
            });
 
        </script>
    </body>
</html>
  • 3 - multiPipeCreate event is fired when you join a channel. The first arguments is a pipe object (see multi pipe and pipe)
  • 4 - Send the command newColor to the server on the pipe See request.send for more information. (Using pipe.request.send automatically adds the pipe pubid to the request. This is why on the server in registerCmd params.pipe contains the pipe pubid)
  • 5 - When the client receive changeColor raw from server it update the div with id #color
Retrieved from "http://www.ape-project.org/wiki/index.php/Tutorial:Color_changer"