Flex和Fms3打造線上聊天室(利用NetConnection對象和SharedObject對象)

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)代碼下載
http://files.cnblogs.com/aierong/fmsDemo.rar
您收到代碼後，請回到文章下面留言告之一下!要是沒收到，我可以再發!
提供代碼是為了互相學習，一起探討！請大家多交流!
1.要是對代碼有什麼疑問，可以在文章的評論區留言，我會盡我所能回覆您!
2.要是您在運行代碼的過程中發現bug,或者是您有什麼好的建議和意見,也可以在文章的評論區留言給我，我會及時更正！

評論區使用提示：
評論區留言(使用進階評論)是可以貼圖片的,要是有難以描述的問題，可以貼圖片和文字一起說明
謝謝！

 

 

收藏與分享

收藏到QQ書籤  添加到百度搜藏 {
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
window.open('http://myweb.cn.yahoo.com/popadd.html?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title), 'Yahoo','scrollbars=yes,width=440,height=440,left=80,top=80,status=yes,resizable=yes');
}
}
}
}
}
}">添加到雅虎收藏

RSS訂閱我 什麼是RSS?

     
        
     
     

東莞.net俱樂部

歡迎您的加入