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

本文主要是介绍Flex和Fms3打造在线聊天室(利用NetConnection对象和SharedObject对象)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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情况

这篇关于Flex和Fms3打造在线聊天室(利用NetConnection对象和SharedObject对象)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---