Flex教學-簡易版的聊天室(for FMS)

 

　　先前曾試過 FluorineFx裡的 Remoting聊天室範例，但始終一直出現錯誤訊息，上網找尋Flex聊天室，大部分都是搭配Java，除了本身不會Java外，也無平台可測試，因此只好投降輸一半，但今天在 Google的 Adobe論壇中，看到有人發問關於 fms製作聊天室，此時又勾起梅干桑的好奇心，便使用fms作關鍵字，總算找到有好心人士的分享，除了有詳盡的教學解說外，還提供原始碼的下載，經梅干桑測試後，卻意外中的順利，同時不用搭配任何的Server端程式，只要 FMS+Flex就可實現聊天室的夢想，接下來就為各位來介紹一下，如何設置FMS讓它變成聊天室伺服器。

---

Step1
進入C:Program FilesAdobeFlash Media Server 3tools目錄下，雙響 StartServerService.bat啟動 FMS伺服器。

---

Step2
接著在C:Program FilesAdobeFlash Media Server 3applications目錄下建立一個 test_myApp的資料夾。

---

Step3
回到C:Program FilesAdobeFlash Media Server 3目錄，雙響 fms_adminConsole.swf並輸入先前安裝時所設定密碼，登入管理界面。

---

Step4
進入管理界面後，先點選 Manage Servers / Applications，看下方有無看所建立的 test_myApp資料夾，若沒有的話待會將會無法使用。

---

Step5
都完成以上設定後，接下來開啟Flex並新增一個專案，將下列的語法貼入。
FMSChat.mxml

^? View Code FLEX

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import vo.Message; import mx.collections.ArrayCollection; import mx.controls.Alert;   private var myNetConnection:NetConnection; private var serverApp:String ="rtmp://127.0.0.1/test_myApp"; private var talk_so:SharedObject;   private function init():void { btn_send.addEventListener(MouseEvent.CLICK,btnSenClickHandler); myNetConnection = new NetConnection(); myNetConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler); myNetConnection.connect(serverApp); }   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); } }   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"; } } }   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=""; }   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); } }   ]]> </mx:Script>   <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"/>   </mx:Application>

---

Step6
接下來於src下建立一個vo，並新增一個Message.as的類別檔。
Message.as

^? View Code FLEX

1 2 3 4 5 6 7 8 9 10 11

package vo{ public class Message { public function Message() { } public var nickname:String; public var msg:String; public var time:Date; } }

---

Step7
好了之後按下上方的箭頭測試一下，成功的話會出現如圖下的畫面。

---

[範例下載]