[Flex]Flex开发聊天室教程

baacloud免费翻墙vpn注册使用

转载:http://hacker47.javaeye.com/blog/215840

聊天室的主要功能有以下 :

 

1.       同一用户不能重复登陆 , 否则服务端拒绝 ;

2.       可以得到聊天室里人员的列表 ;

3.       新用户上线提示 ;

4.       用户离线提示 ;

5.       发送文本消息 ;

6.       新用户上线 , 更新所有聊天室成员列表名单 ;

7.       用户离线 , 更新所有聊天室成员列表名单 ;

 

技术上并没有什么花样儿 , 还是如下几个 :

1.       客户端与服务端的建立连接 ;

2.       监听连接状态 ;

3.       客户端调用服务端函数 ;

4.       服务端调用客户端函数

 

先看看粗糙的效果图:

 

 

 

 

 

 

 

再看看代码吧:

 

先看客户端的:

 

Java代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:com="com.*" backgroundColor="white">  
  3.     <mx:Style source="css.css"></mx:Style>  
  4.     <mx:Script>  
  5.         <![CDATA[  
  6.             import com.client.clientInvockObj;  
  7.             import mx.controls.TextInput;  
  8.             import com.carlcalderon.arthropod.Debug;  
  9.             import mx.utils.StringUtil;  
  10.             public var nc:NetConnection;  
  11.               
  12.             private static const RTMP_URL:String="rtmp://localhost/chatinglist";  
  13.             public var loginName:String;  
  14.             private var isConnectSuccess:Boolean;  
  15.               
  16.               
  17.             private function initApp():void{  
  18.                 nc=new NetConnection();  
  19.                 nc.connect(RTMP_URL,loginName);  
  20.                 nc.addEventListener(NetStatusEvent.NET_STATUS,checkStatus);  
  21.                 var obj:clientInvockObj=new clientInvockObj(chatList,chatContent);  
  22.                 nc.client=obj;  
  23.             }  
  24.               
  25.             private function checkStatus(e:NetStatusEvent):void{  
  26.                 trace(e.info.code);  
  27.                 Debug.log(e.info.code,Debug.BLUE);    
  28.                 isConnectSuccess=(e.info.code=="NetConnection.Connect.Success");  
  29.                 if(isConnectSuccess){  
  30.                     nc.call("getMsg",new Responder(getMsgResult,getMsgFault));  
  31.                     loginBtn.enabled=false;  
  32.                     sendBtn.enabled=true;  
  33.                     Debug.log("client connect success!");  
  34.                       
  35.                 }  
  36.             }  
  37.               
  38.             private function getMsgResult(chatMsgArray:Array):void{  
  39.                 Debug.log("callBack:");  
  40.                 for(var i:uint=0;i<chatMsgArray.length;i++){  
  41.                     chatContent.text+=chatMsgArray[i]+"\n";  
  42.                 }  
  43.             }  
  44.               
  45.             private function getMsgFault():void{  
  46.                   
  47.             }  
  48.               
  49.             public function sendLogin():void{  
  50.                 if(StringUtil.trim(userName.text).length>0){  
  51.                     loginName=userName.text;  
  52.                     initApp();  
  53.                 }  
  54.             }  
  55.               
  56.             public function sendMessage():void{  
  57.                 nc.call("sendMsg",null,loginName,msg.text);  
  58.                 msg.text="";  
  59.             }  
  60.               
  61.               
  62.         ]]>  
  63.     </mx:Script>  
  64.     <mx:HBox width="100%">  
  65.         <mx:VBox width="200" height="100%">  
  66.             <mx:Label text="用户列表:"/>  
  67.             <mx:List id="chatList" width="200" height="400"  labelField="userName" cornerRadius="7"/>  
  68.         </mx:VBox>  
  69.         <mx:VBox  width="100%">  
  70.         <mx:HBox id="loginPanel"  width="100%" height="100%">  
  71.             <mx:TextInput id="userName"/>  
  72.             <mx:Button label="登陆" id="loginBtn" click="sendLogin();"/>  
  73.         </mx:HBox>  
  74.             <mx:TextArea id="chatContent" width="250" height="400"/>  
  75.             <mx:HBox width="100%" height="100%">  
  76.                 <mx:TextInput id="msg"/>  
  77.                 <mx:Button label="发送消息" id="sendBtn" click="sendMessage();" enabled="false"/>  
  78.             </mx:HBox>  
  79.         </mx:VBox>  
  80.     <mx:VBox>  
  81. </mx:VBox>  
  82.     </mx:HBox>  
  83. </mx:Application>  

 

 

还有一个用于绑定到客户端NetConnection的client类,供FMS调用:

 

 

Java代码
  1. package com.client  
  2. {  
  3.     import mx.controls.List;  
  4.     import mx.controls.TextArea;  
  5.       
  6.     public class clientInvockObj  
  7.     {  
  8.         private var chatList:List;  
  9.         private var chatContent:TextArea;  
  10.         public function clientInvockObj(list:List,chatContent:TextArea)  
  11.         {  
  12.             this.chatList=list;  
  13.             this.chatContent=chatContent;  
  14.         }  
  15.           
  16.         public function getUserList(userList:Array):void{  
  17.                 chatList.dataProvider=userList;  
  18.             }  
  19.           
  20.         public function getMsgInfo(msg:String):void{  
  21.             chatContent.text+=msg+"\n";  
  22.         }  
  23.     }  
  24. }  

 

 

 

下面是FMS服务端的:

 

 

Java代码
  1. application.onAppStart=function(){  
  2.     trace("App started");  
  3.     this.chatMsgArray=new Array();  
  4.     this.userListArray=new Array();  
  5. }  
  6.   
  7. application.onConnect=function(client,userName){  
  8.     trace(" try  connect ")  
  9.     if(checkOnline(userName)){  
  10.         this.rejectConnection(client);  
  11.         return;  
  12.     }  
  13.     this.acceptConnection(client);  
  14.     trace("connected");  
  15.     client.userName=userName;  
  16.     trace(userName);  
  17.     application.userListArray.push(userName);  
  18.     sendUserList();  
  19.     sendMsgToClient("欢迎 "+userName+"进入聊天室.");  
  20.       
  21.     client.getMsg=function(){  
  22.         trace("response client");  
  23.         return application.chatMsgArray;  
  24.     }  
  25.       
  26.     client.sendMsg=function(loginUser,msg){  
  27.         trace("ClientName:"+loginUser);  
  28.         var chatInfo=loginUser+"–说:"+msg+"\n";  
  29.         application.chatMsgArray.push(chatInfo);  
  30.         sendMsgToClient(chatInfo);  
  31.     }  
  32. }  
  33.   
  34. application.onDisconnect=function(client){  
  35.     trace("用户:"+client.userName+"—-下线.");  
  36.     removeLeftUser(client.userName);  
  37.     sendUserList();  
  38.     sendMsgToClient("用户:"+client.userName+"—-下线.");  
  39. }  
  40.   
  41. function removeLeftUser(userName){  
  42.     for(var i=0;i<application.userListArray.length;i++){  
  43.         if(application.userListArray[i]==userName){  
  44.             application.userListArray.splice(i,1);  
  45.         }  
  46.     }  
  47. }  
  48.   
  49.   
  50.   
  51.   
  52.   
  53.   
  54.   
  55.   
  56.   
  57.   
  58.   
  59. function sendMsgToClient(chatInfo){  
  60.     var leng=application.clients.length;  
  61.     for(var i=0;i<leng;i++){  
  62.         application.clients[i].call("getMsgInfo",null,chatInfo);  
  63.     }  
  64. }  
  65.   
  66. function sendUserList(){  
  67.     var leng=application.clients.length;  
  68.     trace("client num:"+leng);  
  69.     for(var i=0;i<leng;i++){  
  70.         trace("getUserList—-"+i);  
  71.         application.clients[i].call("getUserList",null,application.userListArray);  
  72.     }  
  73. }  
  74.   
  75. function checkOnline(userName){  
  76.     var len=application.userListArray.length;  
  77.     for(var i=0;i<len;i++){  
  78.         if(application.userListArray[i]==userName){  
  79.             return true;  
  80.         }  
  81.     }  
  82.     return false;  
  83. }  

 

对不住大家,代码都没有写注释,因为跟我前面的那篇几乎一样,所以大家不明白可以参看前面的那篇.

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏