基于Flex的Flash聊天室的实现
1.简要介绍
用Red5有段时间了，知识总是零零碎碎的，不总结肯定是不行的，系统化学习，有系统化的知识，对于学精一门东西无疑是最好的一条路，而学习需要在不断的实践中得到提升，笔者在多余的时间里，做了一个最简单的聊天室作为精通Flash编程入门的实例。
?
聊天室功能很简单，无非就是实现大家进入聊天室发消息。实现这个功能，需要在Red5 端和Flex端都需要编码。
?
2.开发环境
1）Red5-0.9.1
2）FlexBuilder4.1
?
?
3.Flex端主要实现业务流程和界面的搭建，有两个文件：
1） 主文件：chat.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
??? ??? ??? ?? xmlns:s="library://ns.adobe.com/flex/spark"
??? ??? ??? ?? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="500" backgroundColor="#605A5A">
???
??? <fx:Script>
??? ??? <![CDATA[
??? ??? ??? import mx.controls.Alert;
??? ??? ???
??? ??? ??? import org.flash.demo.chat.Chat;?
??? ??? ??? private var chat:org.flash.demo.chat.Chat;
??? ??? ???
??? ??? ??? protected function button1_mouseDownHandler(event:MouseEvent):void
??? ??? ??? {
??? ??? ??? ??? //1.Hide the enter information
??? ??? ??? ??? nameInput.visible = false;
??? ??? ??? ??? nameLabel.visible = false;
??? ??? ??? ??? enterButton.visible = false;
??? ??? ??? ??? messageInput.visible = true;
??? ??? ??? ??? txtLog.visible = true;
??? ??? ??? ??? txtLog.height = 420;
??? ??? ??? ??? chat = new org.flash.demo.chat.Chat();
??? ??? ??? ??? //2.Begin to connect the Red5 server and at the same time show the status
??? ??? ??? ??? chat.connect(nameInput.text,onStatus);
??? ??? ??? ??? //3.Subscribe a fixed named stream
??? ??? ??? ???
??? ??? ??? ???
??? ??? ??? }
??? ??? ??? protected function sendMessage_mouseDownHandler(event:MouseEvent):void
??? ??? ??? {
??? ??? ??? ??? //Alert.show("test");
??? ??? ??? ??? chat.broadcastMesssage(nameInput.text,messageInput.text,onBroadcastMessageResultSuccess,onBroadcastMessageResultError);
??? ??? ??? }
??? ??? ???
??? ??? ??? //Handle the connection
??? ??? ??? private function onStatus(event:NetStatusEvent):void
??? ??? ??? {
??? ??? ??? ??? switch (event.info.code)
??? ??? ??? ??? {
??? ??? ??? ??? ??? case "NetConnection.Connect.Success":
??? ??? ??? ??? ??? ??? var joinedMessage:String = nameInput.text+" joined the chat room.";
??? ??? ??? ??? ??? ??? chat.broadcastMesssage("",joinedMessage,onBroadcastMessageResultSuccess,onBroadcastMessageResultError);
??? ??? ??? ??? ??? ??? sendMessageButton.visible = true;
??? ??? ??? ??? ??? ??? //Alert.show("Connected Successfully...");
??? ??? ??? ??? ??? ??? break;???
??? ??? ??? ??? }
??? ??? ??? }
??? ??? ???
??? ??? ???
??? ??? ??? private function onBroadcastMessageResultSuccess(obj:Object):void
??? ??? ??? {
??? ??? ??? ??? //Alert.show("Success");
??? ??? ??? ???
??? ??? ??? }
??? ??? ???
??? ??? ??? private function onBroadcastMessageResultError(obj:Object):void{
??? ??? ??? ??? //Alert.show("Error");
??? ??? ??? }
??? ??? ]]>
??? </fx:Script>
???
??? <fx:Declarations>
??? ??? <!-- Place non-visual elements (e.g., services, value objects) here -->
??? ???
??? </fx:Declarations>
??? <s:TextInput x="251" y="214" width="219" height="35" id="nameInput"/>
??? <s:Label x="125" y="222" text="Display Name:" fontSize="18" color="#2E7E9F" id="nameLabel"/>
??? <s:Button x="275" y="276" id="enterButton" label="Enter Chat Room" width="171" height="37" chromeColor="#089CC1" fontSize="14" fontWeight="bold" mouseDown="button1_mouseDownHandler(event)"/>
??? <s:Button x="308" y="470" id="sendMessageButton" label="Send" width="61" height="37" chromeColor="#089CC1" fontSize="14" fontWeight="bold" mouseDown="sendMessage_mouseDownHandler(event)" visible="false"/>
??? <s:TextInput x="0" y="452" width="300" height="73" id="messageInput" text="" visible="false"/>
??? <mx:TextArea x="10" y="10" width="602" height="177" id="txtLog" borderColor="#EDF968" borderStyle="solid" borderVisible="true" color="#0E0D0D" fontWeight="bold"?? visible="false"/>
</s:Application>
?
2)聊天工具类：Chat.as
package org.flash.demo.chat
{
??? import flash.events.NetStatusEvent;
??? import flash.net.NetConnection;
??? import flash.net.Responder;
???
??? import mx.controls.Alert;
??? import mx.controls.TextArea;
???
??? import mx.core.FlexGlobals;
???
??? public class Chat
??? {
??? ??? private var nc:NetConnection;
??? ??? private var _serverURL:String = "localhost";
??? ??? private var _serverApplication:String = "chat";
??? ???
??? ??? public function Chat()
??? ??? {
??? ??? }
??? ???
??? ???
??? ??? /**
??? ??? ?* Connect to the server and establish the connection
??? ??? ?*
??? ??? ?* @param:name
??? ??? ?* The identity who connect to the Red5 server
??? ??? ?*
??? ??? ?* @param:onStatus
??? ??? ?* The function name to handle the status of the connection
??? ??? ?*
??? ??? ?* */
??? ??? public function connect(name:String, onStatus:Function):void
??? ??? {
??? ??? ??? nc = new NetConnection();
??? ??? ??? nc.objectEncoding = flash.net.ObjectEncoding.AMF0;
??? ??? ??? nc.client = this;
??? ??? ??? nc.addEventListener(NetStatusEvent.NET_STATUS,onStatus);
??? ??? ??? nc.connect("rtmp://" + _serverURL + "/" + _serverApplication,name);
??? ??? }
??? ???
??? ??? /**
??? ??? ?* broadcast message to all the attendees
??? ??? ?*
??? ??? ?* @param:name
??? ??? ?* The identity who send the message
??? ??? ?*
??? ??? ?* @param: message
??? ??? ?* The content that to be sent to the server
??? ??? ?*
??? ??? ?* @param:onBroadcastMessageResultSuccess
??? ??? ?* The function name to handle the process when broadcast message successfully
??? ??? ?*
??? ??? ?* @param:onBroadcastMessageResultError
??? ??? ?* The function name to handle the process when broadcast message failed
??? ??? ?*
??? ??? ?* */
??? ??? public function broadcastMesssage(name:String, message:String,onBroadcastMessageResultSuccess:Function,onBroadcastMessageResultError:Function):void{
??? ??? ??? this.nc.call("broadcastMessage",
??? ??? ??? ??? new Responder(onBroadcastMessageResultSuccess,onBroadcastMessageResultError)
??? ??? ??? ??? ,name,message);????
??? ??? }
??? ???
??? ??? /**
??? ??? ?*
??? ??? ?* This function is used for receving the message pushed from the server
??? ??? ?*
??? ??? ?* */
??? ??? public function onReceiveMessage(name:Object,message:Object):void{
??? ??? ??? //Alert.show("The received message from server is ====="+name+","+message);
??? ??? ??? if(name == null||""==name){
??? ??? ??? ??? FlexGlobals.topLevelApplication.txtLog.data+="\n" +message;
??? ??? ??? }else{
??? ??? ??? ??? FlexGlobals.topLevelApplication.txtLog.data+="\n" +name+":"+message;
??? ??? ??? }
??? ??? }
??? ???
??? }
}
代码见附件Chat-Flex.zip
?
4.Red5端
Red5端提供API给Flex client调用,代码见附件Chat.zip。
?
