From Ape Wiki

Jump to: navigation, search

Contents

[edit] Hello World

在本教程中你将学习如何使用客户端连接APE服务器并给通道发送数据。教程将涵盖所有客户端/服务器交互的基础知识

[edit] 在开始教程前

  • 请确认你的APE服务器和客户端已经正确设置且能正常工作
  • 在继续前你应该先阅读 Introduction to APE和 Introduction to APE Javascript Framework来了解APE和APE JSF是怎样工作的
  • 如果你使用时Firefox，请安装firebug。对于其他浏览器请安装相应的可以显示控制台log信息的工作。Opera浏览器不知道控制台对象
  • 你需要了解一些Javascript的知识

[edit] 初始化APE客户端

首先客户端创建一个HTML页面并用它来初始化。本教程中我们将使用javascript客户端。

Note: Mootools客户端和javascript客户端效果是一样的 

<!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();
        </script>
    </body>
</html>

你需要在Build/uncompressed/apeClientJS.js做一些配置 

/***
 * APE JSF Setup
 */
APE.Config.baseUrl = 'http://yourdomain.com/APE_JSF/'; //APE JSF 
APE.Config.domain = 'auto'; 
APE.Config.server = 'ape.yourdomain.com'; //APE server URL

[edit] 连接到APE服务器

1) 在连接APE服务器之前,你一定要在客户端调用load()方法. 这个方法创建一个iframe并把APE Core的代码加载进来。

2) 客户端和Core通过事件系统沟通。一旦Core加载完成，事件 load 就被激发。 你可以通过addEvent()方法监听各种事件，绑定一个callback方法给某个事件。

3) 一旦Core加载完成，变量 core 在client对象上设置。 core变量是对APE Core的引用。第一个你一定要调用的方法 start() 。这个方法发送一个"login" 请求给APE服务器

4) 最后一步是监听 ready 事件，这个事件是在客户端连接上APE服务器后被激发的。

添加下面的代码到你的页面： 

//Instantiate APE Client
var client = new APE.Client();
 
//1) 加载 APE Core
client.load();
 
//2) 监听 'load'事件. 这个事件在Core加载后准备连接APE服务器的时候被激发
client.addEvent('load', function() {
    //3) 调用core的start方法来连接APE服务器，同时弹出一个要求用户输入昵称的窗口
    client.core.start({"name": prompt('Your name?')});
});
 
//4)当客户端连接后，监听ready事件
client.addEvent('ready', function() {
    console.log('Your client is now connected');
});

[edit] Hello World!

现在你的客户端已经连接上APE服务器并且可以发送请求了。你可以调用所有 Core function.

1) 为了能够发送和接收数据，首先需要做的是 加入一个频道 。 使用core中的 join() 方法加入一个频道。记者要把这个放在 ready事件的处理方法上。

2) 当成功加入一个频道，事件 multiPipeCreate 被激发后就可以通过这个频道发生/接收数据了。�两个参数返回给了callback方法：

  • A pipe object. pipe对象允许你在pipe上进行一些操作：发送数据，接收数据，监听事件等
  • Options of the pipe FIXME.

3) 然后使用pipe的send() 方法给频道(Multi pipe)发送消息。send方法会产生一个 'SEND'命令. 'SEND' 命令用于发生消息给multi或者uni的pipes。 消息会被发送到该pipe里的所有用户。注意 : 你不接收消息，只发送它们!

4)当你接收一个消息时 raw事件被激发。 每次你从服务器接收数据，raw事件 都会被激发。Raw事件可以使用 onRaw 监听。raw对应接收到的消息就是raw 'DATA' 

//1) 加入频道 'testChannel'
client.core.join('testChannel');
 
//2) 监听 pipeCreate事件
client.addEvent('multiPipeCreate', function(pipe, options) {
    //3) 在pipe上发送消息
    pipe.send('Hello world!');
    console.log('Sending Hello world');
});
 
//4) 监听接收到的消息
client.onRaw('data', function(raw, pipe) {
    console.log('Receiving : ' + unescape(raw.data.msg));
});

为了完整测试这个例子，需要打开两个不同的浏览器页面或tab访问刚才创建的页面。当第二个页面加载的时候，你就可以在第一个控制台log窗口中看到

"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/zh-hans"