[Flex]Flex开发聊天室教程

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

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

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

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

3.       新用户上线提示 ;

4.       用户离线提示 ;

5.       发送文本消息 ;

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

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

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

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

2.       监听连接状态 ;

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

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

先看看粗糙的效果图:

再看看代码吧:

先看客户端的:

<?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调用:

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服务端的:

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; }

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