Flex和Fms3打造在线聊天室(利用NetConnection对象和SharedObject对象)<视频聊天,会议开发实例1>

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

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

 

 

收藏与分享

收藏到QQ书签 添加到百度搜藏 添加到百度搜藏 添加到雅虎收藏 分享到饭否 收藏到就喜欢网络收藏夹

RSS订阅我 什么是RSS?

feedsky    http://wap.feedsky.com/aierongrss    E-mail
订阅到雅蛙       使用RSS邮天下订阅    订阅到有道阅读
订阅到抓虾    鲜果阅读器订阅图标    Add to Google
訂閱 Bloglines    哪吒提醒    Subscribe in NewsGator Online

东莞.net俱乐部

东莞.net俱乐部 欢迎您的加入

posted @ 2009-01-09 14:03  aierong  阅读(24751)  评论(290编辑  收藏  举报