用Flash和XML来构造一个聊天室

点击这里下载源文件
前面的教程我们介绍了Flash与XML结合使用的原理以及一个论坛的实现，下面我们继续结合Flash与XML来实现一个简单的聊天室，有在线聊天、在线人员名单、在线时间、简单的管理操作等功能。根据需要在此基础上稍作修改，就可以实现一个功能比较完备的聊天室了。
一、原理
用Flash和XML来构造聊天室，跟直接用Flash和Asp来构造聊天室的基本原理是一样的。都是先在Flash端发送一个XML请求到服务器端，然后等待从服务器端的XML返回值，当值返回Flash端后，解释所返回的XML串，根据相应的值做相应的操作。
在Flash部分，用到的主要都是XML串的构造和sendAndLoad()函数的操作。在Asp部分，主要用到了global.asa文件和application()属性，先定义几个application对象，然后将要保持的内容放在application对象中，要用的时候，直接从application对象中取就是了。
下面就按顺序一个一个来实现聊天室的功能，每一个介绍的内容都分为“传递的XML”、“Flash部分”、“Asp部分”三部分。
二、登陆
登陆就是将用户名和密码用XML格式发送到服务器端，服务器端将验证的结果用XML格式返回。
A、传递的XML
1、请求报文

<LOGIN><USERNAME>用户名</USERNAME><PWD>密码</PWD></LOGIN>
2、响应报文

<LOGIN><USRENAME name=\”用户名\” right=\”权限\”>用户名</USERNAME></LOGIN>
B、Flash部分
1、在Flash MX 2004中新建一个Flash文件，设置场景的第一帧的帧标签为“login”，并在ActionScript面板上增加语句：

stop();
2、在第一帧的场景中用文本工具拉两个文本框，类型都为“Input type”，变量名var分别设置为“username”、“userpwd”，这是用来输入用户名跟密码的。
3、新建一个Button并拖到第一帧的场景中，摆放位置如图1所示。并在这个Button的ActionScript面板中增加如下语句：

on (release) {if (length(_root.username) == 0) { //注释1_root.username = \”guest\”;} else if (length(_root.userpwd) == 0) { //注释2_root.username = \”guest\”;}loginXml = new XML(); //注释3loginElement = loginXml.createElement(\”LOGIN\”); //注释4// name nodenameElement = loginXml.createElement(\”USERNAME\”); //注释5nameNode = loginXml.createTextNode(\”name\”); //注释6nameNode.nodeValue = _root.username;nameElement.appendChild(nameNode); //注释7// pwd nodepwdElement = loginXml.createElement(\”PWD\”); //注释8pwdNode = loginXml.createTextNode(\”pwd\”);pwdNode.nodeValue = _root.userpwd; pwdElement.appendChild(pwdNode); //注释9loginElement.appendChild(nameElement); //注释10loginElement.appendChild(pwdElement);loginXml.appendChild(loginElement); //注释11xmlRepley = new XML(); //注释12xmlRepley.onLoad = onLoginReply; //注释13function onLoginReply(success) {if (success) {if (xmlRepley.firstChild.firstChild.attributes.right == \”1\”) { //注释14_root.gotoAndPlay(\”main\”);} else {_root.username = \”登陆失败\”;}}}loginXml.sendAndLoad(\”http://localhost/xmlchat/login.asp\”, xmlRepley); //注释15}
注释1：检查输入框中用户名的长度，如为空，则默认为guest。注释2：检查输入框中密码的长度。注释3：新建一个XML对象，这是用来发送到服务器端的。注释4：创建一个LOGIN结点对象。注释5：创建一个USERNAME结点对象，注意不能直接在Element对象中放置文本内容，要在Text Node对象中才能放置文本内容。具体可以参见Flash帮助文件中有关XML.createElement()和XML.createTextNode() 中的内容。注释6：创建一个Text Node对象，用来放置USERNAME结点的文本内容。注释7：将创建的Text Node结点插入到USERNAME结点对象中。注释8：分别创建一个PWD结点对象和Text Node。注释9：将Text Node结点插入到PWD结点对象中。注释10：将USERNAME结点对象插入到LOGIN结点对象中，将PWD结点对象插入到LOGIN结点对象中。注释11：将LOGIN结点对象插入到所创建的XML对象中，从而构造一个完整的XML对象。注意这里在构建XML对象时，是从最里面开始构建的。注释12：新建一个XML对象，这里是用来放置接收到的XML对象的。注释13：设置接收XML对象的响应函数，当服务器端返回XML对象的时候触发。注释14：判断返回的XML对象中的结点属性是否符合要求。注释15：利用sendAndLoad()函数，将Flash端的XML对象发送到服务器端，并接收从服务器端返回的XML对象。
C、Asp部分
1、新建一个文件，命名为global.asa，输入如下内容：

<%Set MyFileObject = Server.CreateObject(\”Scripting.FileSystemObject\”) ‘注释1Set MyTextFile = MyFileObject.CreateTextFile(\”G:\\写作\\flashxmlchat\\source\\login.xml\”, 8, TRUE) ‘注释2MyTextFile.WriteLine(Request.Form) ‘注释3
set objDom = server.CreateObject(\”microsoft.xmldom\”) ‘注释4objDom.loadxml(Request.Form) ‘注释5set objname = objdom.documentElement.SelectSingleNode(\”//LOGIN/USERNAME\”) ‘注释6username = objname.text ‘注释7
set objpwd = objdom.documentElement.SelectSingleNode(\”//LOGIN/PWD\”) ‘注释8pwd = objpwd.text
righ = \”-1\”\’判断set conn=Server.CreateObject(\”ADODB.Connection\”) ‘注释9conn.open \”Provider=Microsoft.Jet.OLEDB.4.0;Data Source=\” & Server.MapPath(\”/xmlchat/xmlchat.mdb\”) ‘注释10set rs=Server.CreateObject(\”ADODB.Recordset\”) ‘注释11strSql=\”select * from UserInfo where UserName = \’\” & username & \”\’ and Pwd = \’\” & pwd & \”\’\” ‘注释12rs.open strSql,conn, 1, 1 if not(rs.bof and rs.eof) then ‘注释13application(\”VisitorNum\”) = application(\”VisitorNum\”) + 1 application(\”VisitorName\”) = application(\”VisitorName\”) & username & \”,\” & rs(\”ID\”) & \”;\” ‘注释14righ = rs(\”Right\”)tempstr= username & \” login……\”application(\”AllCanSee\”) = application(\”AllCanSee\”) & tempstr ‘注释15Else righ = \”0\”end ifrs.close ‘注释16conn.close
\’返回response.write(\”<LOGIN><USRENAME name=\”\”\” & username & \”\”\” right=\”\”\” & righ & \”\”\”>\” & username & \”</USERNAME></LOGIN>\”) ‘注释17%>
注释1：利用FileSystemObject组件建立一个文件对象，将通讯过程中传送的东西写在文件里面，方便调试。注释2：注意根据实际需要修改文件的路径。注释3：把Request.Form是传送进来的所有内容都写在文件里面，在服务器端留下调试痕迹。可以用日志模式进一步完善此功能。注释4：创建一个XML对象。可以在MS XML包中找到更多有关XML操作的信息。注释5：通过loadxml()函数，导入Flash端传送进来的XML格式字符串。注释6：建立USERNAME结点的对象。注释7：取得USERNAME结点的内容。注释8：建立PWD结点的对象，取得PWD结点的内容。注释9：建立一个数据库Connection集合。注释10：建立一个数据库的ADO连接，这里用到的是Access 2000数据库，数据库的格式见后面的附录，请注意数据库的存放位置。注释11：建立一个数据库Recordset集合。注释12：根据取得的用户名和密码，构造一个SQL字符串。注释13：判断查询结果是否为空。注释14：将用户名和ID号添加到application(\”VisitorName\”)对象中。注释15：将登陆信息添加到application(\”AllCanSee\”)对象中。注释16：关闭数据库连接，释放资源。注释17：直接构造一个XML字符串，并通过write函数写到Flash端。
三、发送
发送部分的基本原理是从Flash端发送XML格式的聊天内容到服务器端，在服务器端将聊天内容添加到application(\”AllCanSee\”)对象中，并将修改后的application(\”AllCanSee\”)对象的内容用XML格式返回到Flash端。
A、传递的XML
1、请求报文

<SEND><USERNAME>用户名</USERNAME><CONTENT>发送内容</CONTENT></SEND>2、响应报文

<SEND><RESULT sflag=\”true\” scontent=\”聊天室显示的内容\”>用户名</RESULT></SEND>
B、Flash部分
1、在主场景的第5帧中添加关键帧，将此帧命名为“main”，在帧的Action面板中增加下面的语句：

now = new Date(); //注释1starttime = now.getTime();stop();
注释1：这是为了在下面计算在线时间用的。
2、在主场景中拉一个文本框，属性设置如图2所示。

3、在主场景main帧中增加一个Button，显示的内容为“发送”。在Button的Action面板上面增加如下语句：

on (release) {if (length(_root.txtsend) == 0) { //注释1_root.txtsend = \”内容为空\”;}sendXml = new XML(); //注释2sendElement = sendXml.createElement(\”SEND\”); //注释3// name nodenameElement = sendXml.createElement(\”USERNAME\”); //注释4 nameNode = sendXml.createTextNode(\”name\”); //注释5nameNode.nodeValue = _root.username;nameElement.appendChild(nameNode); //注释6// content nodecntElement = sendXml.createElement(\”CONTENT\”); //注释7cntNode = sendXml.createTextNode(\”cnt\”); //注释8cntNode.nodeValue = _root.txtsend;cntElement.appendChild(cntNode); //注释9sendElement.appendChild(nameElement); //注释10sendElement.appendChild(cntElement); sendXml.appendChild(sendElement); //注释11xmlSendRepley = new XML(); //注释12xmlSendRepley.onLoad = onSendReply; //注释13function onSendReply (success) { if (success) {if (xmlSendRepley.firstChild.firstChild.attributes.sflag == \”true\”) { //注释14_root.txtcontent = xmlSendRepley.firstChild.firstChild.attributes.scontent; //注释15}else {_root.txtcontent = \”连接超时……\”;}}}sendXml.sendAndLoad(\”http://localhost/xmlchat/send.asp\”, xmlSendRepley); //注释16}
注释1：判断发送的内容是否为空。注释2：创建一个用于发送的XML对象。注释3：创建一个SEND结点对象。注释4：创建一个USERNAME结点对象。注释5：创建一个TEXT NODE对象，用于存放用户名。注释6：将创建的TEXT NODE对象添加到USERNAME结点对象中。注释7：创建一个CONTENT结点对象。注释8：创建一个TEXT NODE对象，用于存放要发送的内容。注释9：将创建的TEXT NODE对象添加到CONTENT结点对象中。注释10：将创建的USERNAME和CONTENT对象添加到SEND结点对象中。注释11：将创建的SEND结点对象添加到SEND对象中。注释12：创建一个用于接收的XML对象。注释13：设置接收XML对象的响应函数。注释14：判断从服务器返回的值，根据判断结果做相应的操作。注释15：将聊天室的内容显示出来。注释16：利用sendAndLoad()函数，将Flash端的XML对象发送到服务器端，并接收从服务器端返回的XML对象
C、Asp部分
新建一个空白文件，命名为send.asp，其内容如下：

<REFRESH><USERNAME>用户名</USERNAME></REFRESH>
2、响应报文

<REFRESH><RESULT cflag=\”true\” ccontent=\”聊天内容\” talker=\”在线人员名单\”>用户名</RESULT></REFRESH>
B、Flash部分
1、在主场景中拉一个文本框，属性设置如图3所示。

2、从组件库里面选择List组件，在场景中拉一个List，命名为“talkerlist”。此时场景中的布局应该如图4所示。

3、在主场景main帧中增加一个Button，显示的内容为“刷新”。在Button的Action面板上面增加如下语句：

on (release) {refreshXml = new XML(); //注释1refreshElement = refreshXml.createElement(\”REFRESH\”); //注释2// name nodenameElement = refreshXml.createElement(\”USERNAME\”); //注释3nameNode = refreshXml.createTextNode(\”name\”); //注释4nameNode.nodeValue = _root.username;nameElement.appendChild(nameNode); //注释5refreshElement.appendChild(nameElement); //注释6refreshXml.appendChild(refreshElement);xmlRefreshRepley = new XML(); //注释7xmlRefreshRepley.onLoad = onRefreshReply; //注释8function onRefreshReply(success) {if (success) {if (xmlRefreshRepley.firstChild.firstChild.attributes.cflag == \”true\”) { //注释9_root.txtcontent = xmlRefreshRepley.firstChild.firstChild.attributes.ccontent; //注释10strTalker = xmlRefreshRepley.firstChild.firstChild.attributes.talker;_root.talkerlist.removeAll(); //注释11if (strTalker.length>0) { //注释12talkerarray = new Array(); //注释13temparray = new Array();talkerarray = strTalker.split(\”;\”); //注释14for (i=0; i<talkerarray.length-1; i++) { //注释15temparray = talkerarray[i].split(\”,\”); //注释16_root.talkerlist.addItem(temparray[0], temparray[1]); //注释17}}} else {_root.txtcontent = \”连接超时……\”;}}}refreshXml.sendAndLoad(\”http://localhost/xmlchat/refresh.asp\”, xmlRefreshRepley); //注释18}
注释1：创建一个用于发送的XML对象。注释2：创建一个REFRESH结点对象。注释3：创建一个USERNAME结点对象。注释4：创建一个TEXT NODE对象，用于存放用户名。注释5：将创建的TEXT NODE对象添加到USERNAME结点对象中。注释6：将创建的USERNAME对象添加到REFRESH结点对象中。注释7：创建一个用于接收的XML对象。注释8：设置接收XML对象的响应函数。注释9：判断从服务器返回的值，根据判断结果做相应的操作。注释10：将聊天室的内容显示出来。注释11：将场景中的下拉列表中的内容清空。注释12：判断从服务器端返回的在线名单是否为空。注释13：创建两个数组，用来操作在线用户名单。注释14：调用String的split函数，将分割后的String保存到数组中。注释15：循环读取数组里面的String，继续分割。注释16：调用String的split函数，将分割后的String保存到数组中。注释17：将分割后取得的用户名和ID号，都添加到场景中的下拉列表中。注释18：利用sendAndLoad()函数，将Flash端的XML对象发送到服务器端，并接收从服务器端返回的XML对象。
C、Asp部分
新建一个文件，命名为refresh.asp，添加如下内容：

onClipEvent (load) {timedate = new Date();}onClipEvent (enterFrame) { //注释1mytime = timedate.getTime(); //注释2_root.txttime = \”您共在线 \” + Math.round((Math.ceil((mytime – _root.starttime)/1000)/60)) + \” 分钟\”; //注释3delete timedate; //注释4timedate = new Date(); //注释5}
注释1：当Clip的帧从头播放的时候触发。注释2：取得当前时间。注释3：将统计所得的秒转换成分钟，并显示出来。注释4：删除当前的时间对象。注释5：重新构造一个时间对象，这样就可以不断的取得最新的时间。
六、管理员权限
聊天室中，管理功能是必不可少的，这里以简单的“踢人”功能为例来说明一下。
A、传递的XML
1、请求报文

<KICK><ID>要踢的用户名和ID串</ID></KICK>
2、响应报文

<REFRESH><RESULT kflag=\”true\” ccontent=\”聊天室内容\” talker=\”在线人员列表\”>用户名</RESULT></REFRESH>
B、Flash部分
1、在场景中新建一个Button，显示的内容为“踢人”，在Button的Action面板上面增加如下语句：

on (release) {kickXml = new XML(); //注释1sendElement = kickXml.createElement(\”KICK\”); //注释2// id nodenameElement = kickXml.createElement(\”ID\”); //注释3nameNode = kickXml.createTextNode(\”id\”); //注释4
nameNode.nodeValue = _root.talkerlist.selectedItem.label + \”,\” +_root.talkerlist.selectedItem.data + \”;\”; //注释5nameElement.appendChild(nameNode); //注释6sendElement.appendChild(nameElement); kickXml.appendChild(sendElement); //注释7xmlKickRepley = new XML(); //注释8xmlKickRepley.onLoad = onKickReply; //注释9function onKickReply (success) { if (success) {if (xmlKickRepley.firstChild.firstChild.attributes.kflag == \”true\”) { //注释10strTalker = xmlKickRepley.firstChild.firstChild.attributes.talker; //注释11_root.talkerlist.removeAll(); //注释12if (strTalker.length>0) { //注释13talkerarray = new Array();temparray = new Array();talkerarray = strTalker.split(\”;\”);for (i=0; i<talkerarray.length-1; i++) {temparray = talkerarray[i].split(\”,\”);_root.talkerlist.addItem(temparray[0], temparray[1]); //注释14}}}else {_root.txtcontent = \”连接超时……\”;}}}kickXml.sendAndLoad(\”http://localhost/xmlchat/kick.asp\”, xmlKickRepley); //注释15注释1：创建一个用于发送的XML对象。注释2：创建一个KICK结点对象。注释3：创建一个ID结点对象。注释4：创建一个TEXT NODE对象，用于存放ID。注释5：将场景中的下拉列表中的值赋给TEXT NODE对象。注释6：将创建的TEXT NODE对象添加到USERNAME结点对象中。注释7：将创建的KICK对象添加到KICK结点对象中。注释8：创建一个用于接收的XML对象。注释9：设置接收XML对象的响应函数。注释10：判断从服务器返回的值，根据判断结果做相应的操作。注释11：取得从服务器端返回的用户列表。注释12：清空场景中的下拉列表。注释13：判断从服务器端返回的用户列表是否为空。注释14：将从服务器端返回的用户列表分割，并添加到场景中的下拉列表中。注释15：利用sendAndLoad()函数，将Flash端的XML对象发送到服务器端，并接收从服务器端返回的XML对象。
C、Asp部分
新建一个文件，命名为kick.asp，在文件中添加如下内容：

您可能感兴趣的文章: