Simple Chat 1: FMS & Flex 聊天室教程

原文:[url=http://robsilverton.wordpress.com/2008/08/07/fms-simple-chat-example-in-flex/]Simple Chat 1: example in FMS & Flex[/url]
原作者:robsilverton
预备知识:
[list]
[*]中级/高级 ActionScript 3.0
[*]Flex 3
[*]FMS
[/list]
资源:
[list]
[*][url=http://www.unwrong.com/download/rob/blog/simple_chat/]查看源代码[/url]
[*][url=http://www.unwrong.com/download/rob/blog/simple_chat/Simple%20Chat.zip]下载源代码[/url]
[/list]
这是我以前写的一个基于FMS和Flex的简单聊天程序,因为没有看到过类似的东西,所以发个教程.
(译注:对着源代码读下面文章)
Flex客户端程序的applicationComplete.as文件代码

...
nc.connect("rtmp:/simple_chat");
...

假定你已经在本机安装了FMS,并且创建了一个名为simple_chat的应用程序.你可以通过拖放源代码中的simple_chat目录到FMS安装目录下的applications目录中来创建这个应用程序,simple_chat中包含了main.asc和chat.asc文件,目录创建好后重启一下FMS.

顺便提一下,simple_chat文件夹与其中的文件不必放在src文件夹中.我之所以放在那里是为了自动生成程序文档和打包文件.

另外我故意没有在代码中添加详细的注释.就个人而言,当我查找示例代码时,我希望代码是简洁的,通过代码本身就知道其意义,而非夹杂着大段注释.相应地,我将在这里简单地对代码作一下说明:

[b]Flex客户端:[/b]
[b]applicationComplete.as[/b]
在applicationComplete事件下,应用程序创建了NetConnection实例,并连接到服务器端的simple_chat应用程序,这就引发了服务器端的代码的调用,这是接下来要说明的.

[b]服务器端:[/b]
假定服务器端存在一个main.asc文件,这是服务程序入口.
第一行代码:

...
load("chat.asc")
...

从chat.asc文件预加载代码到main.asc,效果等同于从chat.asc文件直接复制代码到这个位置.

这里要注意一点的是如果使用了多个load()操作(正如在大多数情况下,如果你在构建一个大型应用程序时,会把代码分离到各个问题空间),所有通过这个方法加载的代码将汇集到同一个文本域中,正如把所有的代码都写在一个asc文件中.因此要特别注意不要重复初始化同一个代码,尽可能地清除过程中遗留下来的数据,这导致了我们运用[url=http://en.wikipedia.org/wiki/Singleton_pattern]单件设计模式[/url],就是chat.asc文件中写的那样...
[b]chat.asc[/b]

try { var dummy = Chat; } catch ( e ) {

chat.asc开头部分Try Catch语句的目的是简单地防止多次执行代码正文.通过检验Chat的原型是否已经定义,如果已经定义,就不再执行代码正文了.

接下来的代码是JavaScript等价的构造函数:

Chat = function()
{
    this.message_so = SharedObject.get( “message”, false );
}

当这个代码执行后,我们创建了对一个名为message非永久的SharedObject对象的引用,这是用来向参与聊天的客户端发送消息的.客户端的Flex代码也创建了对该对象的引用,以便用来接收消息.

接下来我们为Chat的原型加了一个sendMessage()方法.这段代码使用共享对象的send方法调用客户端的receiveMessage方法(先要在客户端创建该方法),同时传了一个参数mesg.

Chat.prototype.sendMessage = function( mesg )
{
    this.message_so.send( “receiveMessage”, mesg );
}

最后,代码chat = new Chat()创建了一个Chat原型的实例,作为一个单件(Singleton)用来管理所有相关的聊天任务,下面回到main.asc.
[b]main.asc[/b]

接下来的一个有趣的地方是我们在这里引用了[url=http://livedocs.adobe.com/fms/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000640.html]application[/url]对象.application是Adobe为你创建的,可以用来做一些重要的事,比如接受或拒绝客户端连接.在本代码中,我们仅仅定义了一个onConnect事件句柄,该句柄在客户端的NetConnection对象试图连接时调用.

application.onConnect = function( client )
{
    client.chat    = chat;
    application.acceptConnection( client );
}

NetConnection试图连接时(或JavaScript等价代码),client作为默认参数传递给这个方法.

因为是与JavaScript等价的动态对象,所以可以为它添加一些属性和方法.

代码client.chat = chat把chat实例的引用添加到client上,然后就可以通过客户端代码来调用chat实例的一些方法.

代码application.acceptConnection( client ),简单地接受了客户端的请求,允许它与FMS应用程序交互.
[b]
回到Flex:

applicationComplete.as[/b]

论及chat对象前,先看一下onClickSendBtn()方法:

private function onClickSendBtn(event:MouseEvent):void
{
    nc.call("chat.sendMessage", myResponder, messageTf.text);
}

这里可以看到我们使用NetConnection的call()方法与FMS应用程序交互.该方法显式地尝试调用已经传递给服务器的client的一个方法,所以实际上在服务器端调用client.chat.sendMessage(messageTf.text),在那我们的client是一个JavaScript版本的NetConnection.

再看applicationComplete中的SharedObject相关的代码:

so = SharedObject.getRemote(“message”, nc.uri, false);
so.addEventListener(SyncEvent.SYNC, soOnSync);
so.client = this;
so.connect(nc);

上面的代码也创建了一个对非永久的SharedObject对象的引用,正如服务端chat代码所做的那样.注意一下是如何借用NetConnection实例的URI属性的.也注意一下是如何将共享对象的client属性设置为this所指的域的,意味着调用服务器端的chat代码:

this.message_so.send( "receiveMessage", mesg );

时,下面的客户端函数将会调用:

public function receiveMessage(mesg:String):void
{
    outputTf.text += mesg+”\n”;
}

表明客户端的函数接收了消息文本,并更新了输出文本框.

因此,你的第一个聊天程序初具雏形!试着在两个分开的浏览器中打开客户端,然后发一些消息,是不是很酷?!

你有任何的反馈,一定要告诉我哦,至少我确定我的代码在运行...! :-)

[quote]译注:文中多次提到JavaScript等价代码,是指FMS服务脚本语言,说它是as2也没关系,都是基于原型扩展的ECMAScript
[/quote]