Flex和Fms3打造在线聊天室(利用NetConnection对象和SharedObject对象)

Flex,Fms3系列文章导航

Flex,Fms3相关文章索引

本篇是视频聊天,会议开发实例系列文章的第1篇,该系列所有文章链接如下：
http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp

1.了解
关于Flex和Fms3的解释可以看
http://www.cnblogs.com/aierong/archive/2008/12/30/flex1.html

2.开发准备
Flex的开发工具(ide):Flex builder 3的安装可以看
http://www.cnblogs.com/aierong/archive/2008/12/26/MyCrack.html

Fms3
adobe官方站提供了最大10个连接数的免费开发版（零售版为4500美元）
实在找不到可以留言给我
安装fms3时，一路next ，中间会要你输入序列号，不输入就是免费的开发版，最后安装结束前会要你输入以后进入fms后台管理的账号密码，比较重要，不要乱输。

Flash Player Debug（Flash Player调试版）
在Flex builder 3的Debug模式下调试代码用的,adobe官方站提供了免费下载

3.了解SharedObject对象

一旦sharedObject 对象中的数据（即聊天记录）被任何一个client 所修改，那么fms 会把当前的sharedObject 中的最新聊天记录发送给所有的client （广播），使得client 聊天窗口中显示的数据刷新。

4.开始code
具体步骤：
(1)fms安装目录下，找到application文件夹，下面已经有2个目录了，不管它，在application再新建一个文件夹test_myApp，这个就相当于我们聊天室服务端工程的根目录了（以后的sharedObject 对象就是存放于此）

(2)启动fms
在安装目录下，找到tools文件夹，点击StartServerService.bat就可以启动fms。该文件夹内还有一个StopServerService.bat是停止fms的
其实启动fms也可以去windows的开始菜单里面，Start Adobe Flash Media Server 3.0.1和Start Flash Media Administration Server 3.0.1

(3)登录fms
在安装目录下，找到fms_adminConsole.swf，点击后，输入安装时填写的用户名和密码，即可登录成功

(4)打开Flex builder 3，建立一个flex project，程序类型是web类型（便于调试）

(5)在主mxml中拖动控件，界面如下：

具体代码如下：
<mx:TextArea x="33" y="10" height="159" width="366" id="txt_content"/>
<mx:TextInput x="33" y="177" width="62" id="txt_nickname"/>
<mx:Label x="103" y="179" text="说"/>
<mx:TextInput x="146" y="177" width="185" id="txt_message"/>
<mx:Button x="334" y="177" label="send" id="btn_send"/>

(6)
开始在<mx:Script>
<![CDATA[

]]>
</mx:Script>
标签组内编写代码

导入包和定义变量如下：
import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var myNetConnection:NetConnection;
private var serverApp:String ="rtmp://192.168.0.249/test_myApp";
private var talk_so:SharedObject;

myNetConnection ：flex 与fms 链接用的对象
serverApp ：定义了fms 服务的地址使用的是rtmp 协议，ip 加上server 工程根目录
talk_so:fms 下的SharedObject 对象

(7)定义聊天记录对象Message
package vo
{
public class Message
{
  public function Message()
  {
  }

  public var nickname:String;
  public var msg:String;
  public var time:Date;

}
}
所有的聊天记录都是被存放在一个名为msgList 的集合对象中。每条聊天记录，我是专门定义了Message 对象的

(8)定义一个方法，用于交换数组中元素
private function convertArrayCollection(arrNew:ArrayCollection,arrOld:ArrayCollection):void
{
arrNew.removeAll();

for(var i:int=0;i<arrOld.length ;i++)
{
arrNew.addItemAt(arrOld.getItemAt(i),i);
}
}

(9)定义界面字体大小为12(中文要大小为12才显示得比较清楚)，初始方法为init
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="init()">

(10)实现init()
private function init():void
{
btn_send.addEventListener(MouseEvent.CLICK,btnSenClickHandler);
myNetConnection = new NetConnection();
myNetConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
myNetConnection.connect(serverApp);
}

代码说明：
给按钮添加鼠标点击事件btnSenClickHandler
初始化NetConnection
给myNetConnection添加netStatus事件netStatusHandler

(11)实现netStatusHandler
private function netStatusHandler(evt:NetStatusEvent):void
{
trace(evt.info.code); //调试代码用

if ( evt.info.code =="NetConnection.Connect.Success" )
{
  talk_so = SharedObject.getRemote("talk",myNetConnection.uri,true);
  talk_so.addEventListener(SyncEvent.SYNC,talkSoSyncHandler);
  talk_so.connect(myNetConnection);
}
else
{
  Alert.show("链接失败"+evt.info.code);
}
}

代码说明：
在NetConnection对象报告其状态或错误条件时调度netStatusHandler。
netStatus 事件包含一个 info 属性，该属性是一个包含事件特定信息（例如，连接尝试成功还是失败）的信息对象。
如果与fms 连接成功后就开始初始化remote SharedObject 对象

SharedObject.getRemote()说明：
SharedObject.getRemote() 以创建一个在服务器上永久保留的远程共享对象，如电话簿。每次客户端对共享对象进行更改时，修改后的数据可供当前或以后连接到该对象的所有客户端使用。如果还在本地永久保留了该对象，并且客户端在未连接到服务器时更改了数据，下次客户端连接到远程共享对象时，则会将数据复制到该对象。
若要创建远程共享对象，请调用 getRemote()，然后调用 connect() 以将远程共享对象连接到服务器

SharedObject.getRemote()参数说明：
第1个参数：远程共享对象的名称。该名称可以包含正斜杠 (/)；例如，work/addresses 是合法名称。共享对象名称中不允许使用空格，也不允许使用下面这些字符： ~ % & \ ; : " ' , > ? ? #
其实就是SharedObject 对象生成文件的名字，SharedObject 文件的后缀为*.fso ，因此这里生成就是talk.fso ，生成的位置就在test_myApp 下的某个文件夹中。
第2个参数：将存储共享对象的服务器的 URI。此 URI 必须与传递给 connect() 方法的 NetConnection 对象的 URI 相同。在本程序中就是rtmp://192.168.0.249/test_myApp
第3个参数：指定共享对象的数据属性的特性是本地永久储存还是远程永久储存。
true，指定只有服务器上的共享对象是永久性的。
false，指定客户端或服务器上的共享对象不是永久性的。false 的话SharedObject 对象是的存放在内存中的，如果test_myApp 这个server 被停止则内存中的SharedObject 对象就被清空。

另一个重要的代码是
talk_so.addEventListener(SyncEvent.SYNC,talkSoSyncHandler);
这是给远程的SharedObject 对象加入同步事件的监听，一旦远程的SharedObject 对象被任何一个client 修改，那么fms 就会把最新版本的SharedObject 对象广播给所有的client ，以达到所有client 数据同步的目的，这样就会触发client 端的SyncEvent.SYNC 事件。client 端只有加入对这一事件的监听才能知道公共的SharedObject 对象被修改了，才能做出反应获得最新版本的信息。

(12)实现talkSoSyncHandler
private function talkSoSyncHandler(evt:SyncEvent):void
{
txt_content.text="";
if ( talk_so.data.msgList!=null )
{
  var tmp:ArrayCollection = new ArrayCollection();
  convertArrayCollection(tmp,talk_so.data.msgList as ArrayCollection);

  for(var i:int=0;i<tmp.length ;i++)
  {
   var message:Object = tmp.getItemAt(i);

   var fullMsg:String=message.nickname+"在"+message.time.toTimeString()+"说:"+message.msg;

   txt_content.text=txt_content.text+fullMsg+"\n";
  }
}
}

代码说明：
这个回调函数要做的就是把talk. 这个SharedObject 中的msgList 对象取出，然后遍历出里面所有的Message 对象，刷新显示控件显示所有记录。

(13)实现按钮单击代码,发送聊天记录
private function btnSenClickHandler(evt:MouseEvent):void
{
var arr:ArrayCollection = new ArrayCollection();

if ( talk_so.data.msgList==null )
{
  arr = new ArrayCollection();
}
else
{
  convertArrayCollection(arr,talk_so.data.msgList as ArrayCollection);
}

var obj:Message = new Message();
obj.nickname=txt_nickname.text;
obj.msg=txt_message.text;
obj.time = new Date();

arr.addItem(obj);

talk_so.setProperty("msgList",arr);
txt_message.text="";
}

代码说明：
如果SharedObject-talk 中的msgList 不存在（说明你是聊天室的第一位使用者）就新建一个集合对象，然后将Message 对象add 到这个集合中去。
如果msgList 已经存在了，则获取这个集合对象，把新的聊天记录往后面插入。
最后使用SharedObject.setProperty("name",value) 这个函数将你更新好的聊天记录列表写入到公共的SharedObject 对象中去即可。
调用setProperty() 以更改数据对象的属性。服务器将更新这些属性，并调度 sync 事件，并将这些属性发回到连接的客户端。这就是为什么每个客户端都能看到一样的聊天记录。

(14)运行程序

(15)fms服务器情况
我们可以看到客户端的链接情况和SharedObject情况

(16)代码下载
http://files.cnblogs.com/aierong/fmsDemo.rar
您收到代码后，请回到文章下面留言告之一下!要是没收到，我可以再发!
提供代码是为了互相学习，一起探讨！请大家多交流!
1.要是对代码有什么疑问，可以在文章的评论区留言，我会尽我所能答复您!
2.要是您在运行代码的过程中发现bug,或者是您有什么好的建议和意见,也可以在文章的评论区留言给我，我会及时更正！

评论区使用提示：
评论区留言(使用高级评论)是可以贴图片的,要是有难以描述的问题，可以贴图片和文字一起说明
谢谢！

收藏与分享

收藏到QQ书签添加到百度搜藏添加到雅虎收藏