??????上一篇《FluorineFx + Flex視頻聊天室案例開發----服務器端》詳細的介紹了如何利用FluorineFx開發一個及時通信的視頻聊天室服務器處理程序，并通過Web網站來宿主這個服務處理程序的運行。本篇將著重介紹視頻聊天室的客戶端開發，包括連接RTMP服務器、發布視頻、接收視頻、在線用戶列表、發送文本消息以及全服務器小喇叭功能點。

??????上述這些功能點在我以前寫的文章里已經出現了N多次了，所以這里我不想過多的在次對他們進行解說，詳細請查閱《Flex與.NET互操作系列文章 》，這里我將核心的幾個方法代碼貼出來簡單說明。首先就是客戶實現用戶登錄，通過FluorineFx提供的RemotingService的接口方法進行數據驗證。

private?function?onLogin(event:MouseEvent):void
{
????remoteConn?=?new?RemotingConnection("http://localhost:2020/ChatRoom.FluorineFxWeb/Gateway.aspx",ObjectEncoding.AMF3);
????myInfo?=?new?UserInfo();
????myInfo.UserName=this.txtUserName.text;
????myInfo.Password=this.txtPassword.text;
????remoteConn.RemotingCall("ChatRoom.Services.DataService.Login",onLoginResult,onLoginFault,myInfo);
}

private?function?onLoginResult(result:UserInfo):void
{
????if(result?!=?null)
????{
????????this.myInfo?=?result;
????????this.viewStack.selectedChild?=?chatView;
????????rtmpnc?=?new?RtmpConnection("rtmp://localhost:2777/VideoChat",ObjectEncoding.AMF3,onNetStatusHandler,myInfo);
????}
????else
????{
????????this.lbState.text?=?"登陸失敗,用戶名或密碼錯誤！";
????}
}

private?function?onLoginFault(event:Object):void
{
????this.lbState.text?=?"登陸失敗,請重試！";
}

private?function?onClear(event:MouseEvent):void
{
????this.txtUserName.text="";
????this.txtPassword.text="";
????this.lbState.text="";
????this.txtUserName.setFocus();
}

?

??????RemotingConnection和RtmpConnection是我自己擴展的NetConnection類，功能和NetConnection一樣，不同的是封裝后的使用相對來說比較方便點。首先通過RemotingService的接口進行用戶名和密碼驗證，通過了則創建一個到RTMP服務器的連接RtmpConnection（等同于NetConnection）。

private?function?onNetStatusHandler(event:NetStatusEvent):void
{
????trace(event.info.code);
????switch(event.info.code)
????{
????????case?"NetConnection.Connect.Success":onConnSuccess();break;
????????case?"NetConnection.Connect.Failed":onConnError();break;
????}
}

private?function?onConnSuccess():void
{
????//將自己的視頻數據發布到RTMP服務器,這里使用的是FluorineFx
????var?mic:Microphone?=?Microphone.getMicrophone();
????var?publishNs:NetStream?=?new?NetStream(rtmpnc);
????publishNs.attachCamera(cam);
????publishNs.attachAudio(mic);
????publishNs.client?=?this;
????publishNs.publish(myInfo.ID.toString());?//將用戶ID作為流名進行發布實況流
????
????userSO?=?SharedObject.getRemote("OnLineUsers",rtmpnc.uri,false);
????userSO.addEventListener(SyncEvent.SYNC,onSyncHandler);
????userSO.client?=?this;
????userSO.connect(rtmpnc);
????
????timer?=?new?Timer(1000);
????timer.addEventListener(TimerEvent.TIMER,onTimerHandler);
????timer.start();
}

private?function?onConnError():void
{
????trace("login?error");
????writeMessage("<font?color=\"#FF0000\">系統提示：連接視頻服務器失敗</font>");
}

?

??????創建連接的同時指定了由那一個方法（onNetStatusHandler）來處理連接狀態，通過判斷連接狀態如果連接成功則將自己的視頻數據發布到RTMP服務器（特別提醒：在發布流的時候是使用的用戶ID作為流名，在建立視頻聊天的時候需要根據這個ID才能查看到視頻），同時還連接到服務器上的遠程共享對象（作用：通過異步事件處理函數實現在線用戶列表），最后建立了一個Timer是不斷的調用服務器方法獲取當前系統時間（注意：實際開發中不建議這樣做）；如果連接服務器失敗則在聊天消息顯示區輸入一條提示信息。

??????在線用戶列表使用共享對象來實現，可以及時的處理用戶上線下線功能和實現客戶端數據同步更新等。下面是共享對象的異步事件處理函數：

private?function?onSyncHandler(event:SyncEvent):void
{
????var?array:Array?=?event.target.data.UserInfo?as?Array;
????if(array?!=?null)
????{
????????userArray.removeAll();
????????for(var?i:Number=0;?i<array.length;?i++)
????????{
????????????var?info:UserInfo?=?array[i]?as?UserInfo;
????????????userArray.addItem(info);
????????}
????????trace("userArray?length:"?+?userArray.length);
????}
}

?

??????從異步事件中取出當前最新的數據，然后添加到用戶界面的顯示列表數組（userArray）里，Flex直接使用List組件顯示在線用戶列表，通過綁定userArray設置數據源，當userArray改變后List組件的顯示也會同步更新顯示。

???????那么怎么去建立視頻聊天查看到對方的視頻呢？其實實現也很簡單，這里還是要從用戶列表出發，通過點擊用戶列表上的在線用戶，然后建立與該用戶的視頻連接。同時判斷是否選擇的是怎么，本案例中我沒有將自己從在線列表里屏蔽而是通過判斷當前選擇的是否為自己，如果是自己則不進行視頻連接，也不能發送文本聊天信息。

private?function?onUserItemHandler(event:Event):void
{
????info?=?List(event.target).selectedItem?as?UserInfo;? //把當前選擇的用戶信息通過變量保存下來
????this.lbNickName.text?=?info.NickName;
????
????if(info.UserName?==?myInfo.UserName)
????{
????????writeMessage("<font?color=\"#FF0000\">系統提示：不能和自己進行視頻聊天</font>");
????}
????else
????{
????????//建立視頻流的連接
????????if(this.ns)
????????{
????????????this.ns.close();
????????}
????????this.ns?=?new?NetStream(this.rtmpnc);
????????ns.client?=?this;
????????sound?=?this.ns.soundTransform;
????????var?v1:Video?=?new?Video();
????????v1.width?=?320;
????????v1.height?=?240;
????????v1.attachNetStream(ns);
????????this.videoDisplay.addChild(v1);
????????ns.play(info.ID.toString());? //當前選擇的用戶的ID
????}
}

?

??????OK，到這里就成功的完成了用戶登錄，建立與RTMP服務器的連接，發布視頻流，接收指定的視頻流等功能，接下來就是實現文字聊天的功能了。實現文字聊天功能是最簡單的，我曾經先后在《FMS3系列(六)：使用遠程共享對象(SharedObject)實現多人時時在線聊天(Flex | Flash) 》和《Flex與.NET互操作(十二)：FluorineFx.Net的及時通信應用(Remote Shared Objects)(三) 》這兩篇文章中都介紹到了，這里我使用的是第二篇文章里所介紹的方法（提示：該方法就是直接使用SharedObject的send()方法）來實現文字聊天功能。

?

private?function?onSendMessage(event:MouseEvent):void
{
????if(info!=null)
????{
????????userSO.send("chatMessage",?this.txtMessage.text,?myInfo,?info);
????????this.txtMessage.text="";
????}
????else
????{
????????writeMessage("系統提示：請選擇聊天對象");
????}
}

public?function?chatMessage(message:String,?sayUser:UserInfo,?recUser:UserInfo):void
{
????if(recUser.UserName==this.myInfo.UserName)
????{
????????message?=?sayUser.NickName?+?"對你說："+message;
????????writeMessage(message);
????}
????if(sayUser.UserName==this.myInfo.UserName)
????{
????????message?=?"我對"+recUser.NickName?+?"說："+message;
????????writeMessage(message);
????}
}

private?function?writeMessage(message:String):void
{
????this.txtDisMessage.htmlText?+=?message?+?"\n";
????this.txtDisMessage.verticalScrollPosition?=?this.txtDisMessage.maxVerticalScrollPosition;
}

?

??????OK，大功告成，現在是集視頻和文字聊天的多人在線聊天室就實現了，不足的是只能一對一聊天。如果我要對大家說話怎么辦呢？于是我在本案例中設計了一個小喇叭功能，通過發送小喇叭實現全服務器喊話。下邊是下喇叭組件代碼：

<?xml?version="1.0"?encoding="utf-8"?>
<mx:TitleWindow?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?width="540"?height="50"?
????headerHeight="8"?roundedBottomCorners="true"?borderColor="#000000">
????<mx:TextInput?x="2"?y="3"?width="400"?id="txtMessage"/>
????<mx:Button?x="466"?y="3"?label="關閉"?click="onClose(event)"/>
????<mx:Button?x="410"?y="3"?label="發送"?
????????enabled="{txtMessage.text.length?>?0???true?:?false}"?
????????click="onSend(event)"/>
????
????<mx:Script>
????????<![CDATA[
????????????import?mx.core.Application;
????????????import?mx.events.CloseEvent;
????????????import?mx.managers.PopUpManager;
????????????private?function?init():void
????????????{
????????????????this.txtMessage.setFocus();
????????????}
????????????
????????????private?function?onClose(event:MouseEvent):void
????????????{
????????????????onCloseHandler(null);
????????????}
????????????
????????????private?function?onCloseHandler(event:CloseEvent):void
????????????{
????????????????Application.application.speakFlag?=?false;
????????????????PopUpManager.removePopUp(this);
????????????}
????????????
????????????private?function?onSend(event:MouseEvent):void
????????????{
????????????????Application.application.userSO.send("speakMessage",txtMessage.text,Application.application.myInfo);
????????????????this.txtMessage.text?=?"";
????????????????onCloseHandler(null);
????????????}
????????]]>
????</mx:Script>
</mx:TitleWindow>

??????同樣通過遠程共享對象的send()方法實現發送小喇叭功能，在客戶端定義一個方法(speakMessage)來接受小喇叭發送的消息內容，然后顯示在用戶聊天界面上。

public?var?speakFlag:Boolean?=?false;
private?function?onSpeaker(event:MouseEvent):void
{
????if(!speakFlag)
????{
????????var?dis:Speaker?=?new?Speaker();
????????dis.x?=?230;
????????dis.y?=?505;
????????PopUpManager.addPopUp(dis,this,false);
????????speakFlag?=?true;
????}
}
public?function?speakMessage(message:String,info:UserInfo):void
{
????message?=?"【小喇叭】："?+?info.NickName?+?"說："?+?message;
????writeMessage(message);?
}

?

??????貌似這一整篇都是代碼，除了代碼我也不知道該怎么去介紹更容易說得清楚了，下面來看看上面的勞動成功，啟動服務器后運行多個客戶端來聊天測試看看。????????????

????????????

????????????

????????????

?

??????現在還差一個重要的功能沒有實現了，前面提到過畫中畫功能，也就是說在和在線朋友進行視頻聊天的同時，需要將自己的視頻以小視頻窗口的方式顯示在聊天窗口，實現所謂的畫中畫功能，顯示自己的視頻通過初始化方法，程序啟動后就直接顯示出自己的視頻。

private?function?init():void
{
????//將自己的視頻顯示在畫中畫中
????cam?=?Camera.getCamera();
????if(cam?!=?null)
????{
????????this.myVD.attachCamera(cam);
????}
????else
????{
????????writeMessage("未能找到視頻設備,請檢測是否正確安裝設備！");
????}
}

?

??????本文就介紹到這里，關于聊天表情的實現這里就不作介紹了，由于時間關系本案例里也沒有實現這個功能，有興趣的朋友可以下載源代碼自己去擴展實現聊天表情這個功能。這里我將實現的原理簡單說一下，通過TileList組件加載表情圖片或動畫信息顯示出來，詳細可以參考《使用TileList+TitleWindow組件開發聊天表情功能 》，發送表情則是將圖片地址通過SharedObject的send()方法發送出去，接收消息的方法通過圖片地址，組合<img src='圖片地址' />然后顯示在聊天信息窗口中。

?

版權說明

? 本文屬原創文章，歡迎轉載，其版權歸作者和博客園共有。??

? 作??????者：Beniao

?文章出處：http://beniao.cnblogs.com/? 或? http://www.cnblogs.com/

?

轉載于:https://www.cnblogs.com/beniao/archive/2009/06/29/1511813.html

總結

以上是生活随笔為你收集整理的FluorineFx + Flex视频聊天室案例开发----客户端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。