基于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。