`
hereson
  • 浏览: 1428735 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

FLEX提高篇---------FMS简易聊天室加强版

    博客分类：
  • fms2
FlexCSSAdobe.net 
阅读更多

今天写了下简易聊天室的加强版 , 其实功能也十分有很 , 不过比前面提到的简易聊天室要智能了许多 , 这个聊天室的主要功能有以下 :

 

<!---->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>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:com="com.*" backgroundColor="white">
	<mx:Style source="css.css"></mx:Style>
	<mx:Script>
		<![CDATA[
			import com.client.clientInvockObj;
			import mx.controls.TextInput;
			import com.carlcalderon.arthropod.Debug;
			import mx.utils.StringUtil;
			public var nc:NetConnection;
			
			private static const RTMP_URL:String="rtmp://localhost/chatinglist";
			public var loginName:String;
			private var isConnectSuccess:Boolean;
			
			
			private function initApp():void{
				nc=new NetConnection();
				nc.connect(RTMP_URL,loginName);
				nc.addEventListener(NetStatusEvent.NET_STATUS,checkStatus);
				var obj:clientInvockObj=new clientInvockObj(chatList,chatContent);
				nc.client=obj;
			}
			
			private function checkStatus(e:NetStatusEvent):void{
				trace(e.info.code);
				Debug.log(e.info.code,Debug.BLUE);	
				isConnectSuccess=(e.info.code=="NetConnection.Connect.Success");
				if(isConnectSuccess){
					nc.call("getMsg",new Responder(getMsgResult,getMsgFault));
					loginBtn.enabled=false;
					sendBtn.enabled=true;
					Debug.log("client connect success!");
					
				}
			}
			
			private function getMsgResult(chatMsgArray:Array):void{
				Debug.log("callBack:");
				for(var i:uint=0;i<chatMsgArray.length;i++){
					chatContent.text+=chatMsgArray[i]+"\n";
				}
			}
			
			private function getMsgFault():void{
				
			}
			
			public function sendLogin():void{
				if(StringUtil.trim(userName.text).length>0){
					loginName=userName.text;
					initApp();
				}
			}
			
			public function sendMessage():void{
				nc.call("sendMsg",null,loginName,msg.text);
				msg.text="";
			}
			
			
		]]>
	</mx:Script>
	<mx:HBox width="100%">
		<mx:VBox width="200" height="100%">
			<mx:Label text="用户列表:"/>
			<mx:List id="chatList" width="200" height="400"  labelField="userName" cornerRadius="7"/>
		</mx:VBox>
		<mx:VBox  width="100%">
		<mx:HBox id="loginPanel"  width="100%" height="100%">
			<mx:TextInput id="userName"/>
			<mx:Button label="登陆" id="loginBtn" click="sendLogin();"/>
		</mx:HBox>
			<mx:TextArea id="chatContent" width="250" height="400"/>
			<mx:HBox width="100%" height="100%">
				<mx:TextInput id="msg"/>
				<mx:Button label="发送消息" id="sendBtn" click="sendMessage();" enabled="false"/>
			</mx:HBox>
		</mx:VBox>
	<mx:VBox>
</mx:VBox>
	</mx:HBox>
</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. }  
package com.client
{
	import mx.controls.List;
	import mx.controls.TextArea;
	
	public class clientInvockObj
	{
		private var chatList:List;
		private var chatContent:TextArea;
		public function clientInvockObj(list:List,chatContent:TextArea)
		{
			this.chatList=list;
			this.chatContent=chatContent;
		}
		
		public function getUserList(userList:Array):void{
				chatList.dataProvider=userList;
			}
		
		public function getMsgInfo(msg:String):void{
			chatContent.text+=msg+"\n";
		}
	}
}

 

 

 

下面是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. }  
application.onAppStart=function(){
	trace("App started");
	this.chatMsgArray=new Array();
	this.userListArray=new Array();
}

application.onConnect=function(client,userName){
	trace(" try  connect ")
	if(checkOnline(userName)){
		this.rejectConnection(client);
		return;
	}
	this.acceptConnection(client);
	trace("connected");
	client.userName=userName;
	trace(userName);
	application.userListArray.push(userName);
	sendUserList();
	sendMsgToClient("欢迎 "+userName+"进入聊天室.");
	
	client.getMsg=function(){
		trace("response client");
		return application.chatMsgArray;
	}
	
	client.sendMsg=function(loginUser,msg){
		trace("ClientName:"+loginUser);
		var chatInfo=loginUser+"--说:"+msg+"\n";
		application.chatMsgArray.push(chatInfo);
		sendMsgToClient(chatInfo);
	}
}

application.onDisconnect=function(client){
	trace("用户:"+client.userName+"----下线.");
	removeLeftUser(client.userName);
	sendUserList();
	sendMsgToClient("用户:"+client.userName+"----下线.");
}

function removeLeftUser(userName){
	for(var i=0;i<application.userListArray.length;i++){
		if(application.userListArray[i]==userName){
			application.userListArray.splice(i,1);
		}
	}
}











function sendMsgToClient(chatInfo){
	var leng=application.clients.length;
	for(var i=0;i<leng;i++){
		application.clients[i].call("getMsgInfo",null,chatInfo);
	}
}

function sendUserList(){
	var leng=application.clients.length;
	trace("client num:"+leng);
	for(var i=0;i<leng;i++){
		trace("getUserList----"+i);
		application.clients[i].call("getUserList",null,application.userListArray);
	}
}

function checkOnline(userName){
	var len=application.userListArray.length;
	for(var i=0;i<len;i++){
		if(application.userListArray[i]==userName){
			return true;
		}
	}
	return false;
}

 

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

 

 

  • 974e6cf2-fec5-3c2d-8c75-aa5d912e5542-thumb
  • 描述:
  • 大小: 94.2 KB
  • B0548296-ea81-3b0a-81de-dfc125ac3ac8-thumb
  • 描述:
  • 大小: 22.6 KB
分享到：
| Flex连接FMS实现用户列表（使用SharedObje ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics