先前曾試過
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
| 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
| 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 好了之後按下上方的箭頭測試一下，成功的話會出現如圖下的畫面。
[範例下載]
