`

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

 

分享到:
评论

相关推荐

    Flex视频聊天室源码

    Flex视频聊天室源码是一种基于Adobe Flex框架开发的实时通讯应用程序,主要用于实现视频聊天功能。Flex是基于ActionScript 3.0的开放源代码SDK,它允许开发者创建丰富的互联网应用程序(RIA),这些程序可以在多种...

    刚学会Flex自己做的一个简单的聊天室

    4. 聊天室实现流程: - 创建项目:在Flash Builder中新建Flex Project,并选择合适的模板。 - 设计界面:使用MXML编写UI布局,添加TextInput、Button和List组件。 - 编写业务逻辑:用ActionScript处理按钮点击...

    FLEX 开源聊天室

    一个基于FLEX的聊天室系统通常由以下几个主要部分构成: 1. **服务器端**:负责处理用户请求,如接收消息、管理聊天室、处理用户登录和权限验证等。可以使用Flash Media Server或开源的Red5等流媒体服务器。 2. **...

    基于flex和servlet模拟的QQ聊天室

    【标题】: "基于flex和servlet模拟的QQ聊天室" 在IT领域,开发一个实时聊天室是一项常见的项目,它可以让我们深入理解网络通信、多用户交互以及数据同步等概念。本项目采用Adobe Flex作为前端展示层,Java Servlet...

    FluorineFx+Flex视频聊天室源代码

    FluorineFx+Flex视频聊天室源代码是一款基于开源RTMP服务器FluorineFx构建的多人在线交流平台,其主要特点在于提供实时的视频和文字聊天功能,同时还包括了小喇叭全服务器喊话这样的特色功能。让我们深入探讨一下这...

    用red5部署的flex的简单聊天室源代码

    在本文中,我们将深入探讨如何使用Red5部署一个基于Flex的简单聊天室源代码。Red5是一款开源的流媒体服务器,而Flex是一种用于构建富互联网应用程序(RIA)的开发工具,通常与Adobe Flash Player一起使用。这个示例...

    基于java+flex实现的聊天程序

    4. **房间管理**:创建、删除和切换聊天室,管理用户与房间的关联关系。 其次,Flex作为前端展示,它基于ActionScript语言和MXML标记语言,提供了丰富的图形用户界面和交互体验。`Client5.mxml`文件是Flex客户端的...

    flex3 聊天室 视频,音频

    开发者通过Flex客户端与Red5服务器进行交互,实现聊天室中的多媒体通信。 ActionScript 3.0是Flash Player和Adobe AIR应用程序的基础编程语言,也是Flex框架的核心。在描述中提到的多个MXML文件(如Main.mxml、...

    Flex实现的视频聊天室

    在本项目"Flex实现的视频聊天室"中,开发者利用Flex的强大功能,创建了一个可供多人实时交流的在线视频聊天平台。这个聊天室允许用户通过网络摄像头分享视频,并进行音频通信,提供了类似于现实生活中面对面交谈的...

    Flex视频聊天室

    【Flex视频聊天室】是一个基于Adobe Flash Media Server (FMS) 开发的在线交互平台,主要功能是提供实时的文本和视频通信。这个项目的核心技术是Adobe Flex,它是一种用于构建富互联网应用程序(RIA)的开发框架,...

    Flex+,net 实现聊天室的功能

    Flex+NET实现聊天室功能是将Adobe Flex技术与Microsoft .NET框架相结合,创建一个实时通信的应用程序,使得用户可以通过Web浏览器进行在线聊天。这个过程涉及的技术主要包括Flex前端开发、.NET后端服务以及数据传输...

    基于Java_BlazeDS_Flex_服务器消息推的聊天室

    要创建一个基于Java BlazeDS Flex的聊天室,我们需要以下步骤: 1. **配置BlazeDS**:在Java服务器上集成BlazeDS,通常是在Spring或其它Web应用框架中配置。设置相应的配置文件,比如`services-config.xml`,来定义...

    flex、java聊天室

    标题中的“flex、java聊天室”指的是一种基于Adobe Flex技术和Java实现的在线聊天应用程序。Flex是使用ActionScript编程语言和MXML标记语言构建富互联网应用程序(RIA)的开源框架,而Java则作为后端服务器端的技术...

    flex 图文混排聊天室 客户端

    【标题】:“Flex图文混排聊天室客户端” 在IT领域,Flex是一种基于Adobe ...通过深入研究源码,开发者可以了解如何在Flex中实现图文混排、聊天室功能,以及如何利用Flex的组件系统和事件驱动模型来创建交互式应用。

    flex 多个聊天实例

    实际学习时,你可能会从创建基本的Flex项目开始,然后逐步添加聊天功能,实现用户注册、登录,创建和加入聊天室,发送和接收消息,到最后的测试和部署。如果能访问到原文链接,将能得到更详尽的步骤和示例代码。

    Flex salon IOCP web网络聊天室

    【Flex沙龙IOCP Web网络聊天室】是一款基于C++实现的高效并发聊天系统,它运用了IO完成端口(IOCP)技术,旨在提供稳定且高性能的多用户在线交流平台。该系统设计允许同时处理20个并发连接,并且理论上可以支持多达...

    flex多人多房间 聊天室

    Flex多人多房间聊天室是一种基于Adobe Flex技术和Red5服务器实现的实时在线交流平台。这个系统允许用户进入不同的房间进行互动沟通,提供了丰富的社交体验。在本文中,我们将深入探讨Flex和Red5技术以及如何利用...

Global site tag (gtag.js) - Google Analytics