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

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

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

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