今天写了下简易聊天室的加强版 , 其实功能也十分有很 , 不过比前面提到的简易聊天室要智能了许多 , 这个聊天室的主要功能有以下 :
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>
<?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";
- }
- }
- }
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;
- }
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;
}
对不住大家,代码都没有写注释,因为跟我前面的那篇几乎一样,所以大家不明白可以参看前面的那篇.