网页聊天室制作步骤分享

结合网页与Asp来实现一个简单的网页聊天室制作案例，有在线聊天、在线人员名单、在线时间等功能。在这篇教程的最后，还比较详细地介绍了Flash与Asp结合使用的平台环境和常用的调试手段。
一、原理
主要的流程是先在网页端发送一个请求到服务器端，然后等待从服务器端的返回值，当值返回网页端后，根据相应的值做相应的操作。在网页部 分，跟前面的教程一样，用到的主要都是loadVariables()函数和循环等待的技巧。在Asp部分，主要用到了global.asa文件和 application()属性，先定义几个application对象，然后将要保持的内容放在application对象中，要用的时候，直接从 application对象中取就是了。

二、登陆
登陆部分的基本原理是：在网页端输入用户名和密码，通过Asp查询数据库，如果用户名和密码正确，就跳转到网页聊天室主界面，否则就跳转到登陆失败界面。
A、asp部分
1、 新建一个空白文件，命名为global.asa，内容如下：
<script language=”vbscript” runat=”server”>
sub application_onstart
application(“VisitorNum”)=0
application(“VisitorName”)=””
application(“AllCanSee”)=”<br>”
end sub
</script>
注释：上面是一个global文件，定义了几个application对象，sub application_onstart 的意思是在启动服务的时候触发，初始化这些对象。Application对象可以在几个网页之间保持内 容，application(“VisitorNum”)中的是当前在线人数，application(“VisitorName”)中的是当前在线人员 名单，application(“AllCanSee”)中的是当前的聊天内容。
2、新建一个空白文件，命名为login.asp，跟global.asa保存在同一个目录中，内容如下：
<%
username = request(“username”) ‘注释1
userpwd = request(“userpwd”)
set conn=Server.CreateObject(“ADODB.Connection”)
conn.open “Driver={SQL Server};SERVER=127.0.0.1;DATABASE=pywz” ‘注释2
set rs=Server.CreateObject(“ADODB.Recordset”)
strSql=”select * from UserInfo where userid=’” & username & “’and password=’” & userpwd & “’” ‘注释3
rs.open strSql,conn, 1, 1
if not(rs.bof and rs.eof) then ‘注释4
application(“VisitorNum”) = application(“VisitorNum”) + 1
application(“VisitorName”) = application(“VisitorName”) & ” ” & username
Response.Write (“userlogin=success”)
Else
Response.Write (“userlogin=unsuccess”) ‘注释5
end if
rs.close
conn.close
%>
注释1：取得从Flash端传过来的用户名和密码。
注释2：打开一个数据库的连接，读者要根据数据库的类型，数据库所在的ip，数据库的实例名做相应的修改。
注释3：根据用户名和密码构造一个sql语句。
注释4：如果在数据库中存在所输入的用户名和密码，将application(“VisitorNum”)加1，将当前用户名保存在application(“VisitorName”)，返回登陆成功的标志位userlogin位success。
注释5：用户名或密码错误，返回登陆失败的标志位userlogin位unsuccess。

B、Flash部分
1、在属性面板上，将第一帧的“帧标签”设为“login”。在第一帧的Action面板中加上：
Stop();
2、如图1所示，在场景中放置两个文本框，两个button，其中上面一个文本框的设置如图2所示，另一个文本框的设置如图3所示。
3、新建一个组件，命名为“loginloop1”，在第一帧的Action面板中加上下面语句：
_root.count = 0;
stop();
在第5帧上插入关键帧，在Action面板上加入下面的语句：
if (!(_root.userlogin)) { //注释1
_root.count = _root.count + 1;
if (_root.count > 50) //注释2
{
_root.gotoAndPlay(“netfalse”);
_root.loginloop.gotoAndStop(1);
}
_root.loginloop.gotoAndPlay(2);
}
if (_root.userlogin == “success”) //注释3
{
_root.txttime = _root.userlogin;
_root.gotoAndPlay(“main”);
_root.loginloop.gotoAndStop(1);
}
if (_root.userlogin == “unsuccess”) //注释4
{
_root.gotoAndPlay(“loginfalse”);
_root.loginloop.gotoAndStop(1);
}
注释1：判断结果是否已经从服务器端返回，不是的话，计数器加一。
注释2：判断计数器是否已经到50，是的话，跳转到网络超时界面。
注释3：判断返回的结果是否位success，是则跳转到聊天的主界面。
注释4：若返回的结果为unsuccess，跳转到登陆出错界面。
4、将组件“loginloop1”从图库中拖到场景中，将其实例名设为“loginloop”。
5、在场景中登陆Button的Action面板中增加下面的语句：
on (release) {
if (length(_root.username) == 0) { //注释1
_root.username = “请输入名字”;
} else if (length(_root.userpwd) == 0) {
_root.username = “请输入密码”;
}
if ((length(_root.username) != 0)and (length(_root.userpwd) != 0)) { //注释1 loadVariables(“login.asp?username=” add _root.username add “&userpwd=” add _root.userpwd, this, “POST”);
_root.loginloop.gotoAndPlay(2);
timeflag = 0;
}
}
注释1：判断用户名和密码是否为空。
6、在主场景中的第5帧中插入关键帧，将此帧命名为“netfalse”，在此帧场景中添加“网络连接超时……”的信息。在帧的Action面板中增加下面的语句：
stop();
7、在主场景中的第10帧中插入关键帧，将此帧命名为“loginfalse”，在此帧场景中添加“用户名或密码错”的信息。在帧的Action面板中增加下面的语句：
stop();
C、小结与提高
在Asp部分要注意的是当登陆成功后，要在application(“VisitorName”)和application(“VisitorNum”) 对象中加上相应的值。在Flash部分中，先用loadVariables()发送请求，然后启动另外一个clip等待返回的值，这是一种比较好的操作方 法。 　　三、发送
发送部分的基本原理是从Flash端发送聊天内容到服务器端，在服务器端将聊天内容添加到application(“AllCanSee”)对象中，并将修改后的application(“AllCanSee”)对象的内容返回到Flash端。
A、asp部分
1、新建一个空白文件，命名为send.asp，其内容如下：
<%
username = request(“username”)
tempstr= username & ” say: ” & request(“content”) & “<br>”
application(“AllCanSee”) = application(“AllCanSee”) & tempstr ‘注释1
response.Write(“sflag=true&scontent=” & application(“AllCanSee”)) ‘注释2
%>
注释1：将从flash端发送来的内容添加到聊天的内容中。
注释2：将标志位sflag和聊天的内容发送回flash端。
B、Flash部分
1、在主场景的第15帧中添加关键帧，将此帧命名为“main”，在帧的Action面板中增加下面的语句：
now = new Date(); //注释1
starttime = now.getTime();
stop();
注释1：这是为计算在线时间而设的。
2、在主场景中拉一个对话框，属性设置如图4所示。
3、按Ctrl + F8，新建一个movie clip，命名为sendloop，在此clip的第一帧的action面板上增加下面的语句：
_root.countsend = 0;
stop();
在clip的第5帧上插入关键帧，在其action面板上面增加如下语句：
if (!(_root.sflag)) { //注释1
_root.countsend = _root.countsend + 1;
if (_root.countsend > 50) //注释2
{
_root.gotoAndPlay(“netfalse”);
_root.sendloop.gotoAndStop(1);
}
_root.txttime = _root.countsend;
_root.sendloop.gotoAndPlay(2);
}
if (_root.sflag == “true”) //注释3
{
_root.txtcontent = _root.scontent;
_root.txttime = “sssss”;
_root.sflag = “”;
_root.sendloop.gotoAndStop(1);
}
注释1：判断返回的标志位，若还没从服务器返回值，计数器加一。
注释2：当计数器加到50的时候，跳转到网络超时界面。
注释3：若返回的值为true，将返回的聊天内容显示在场景中。
4、将sendloop从图库拖到主场景main帧中，命名为sendloop。
5、在主场景main帧中增加一个button，显示的内容为“发送”。在button的action面板上面增加如下语句：
on (release) {
if (length(_root.txtsend) == 0) { //注释1
_root.txtsend = “请输入内容”;
}
if ((length(_root.txtsend) != 0)) { //注释2
loadVariables(“send.asp?content=” add _root.txtsend add “&username=” add _root.username, this, “POST”);
_root.sendloop.gotoAndPlay(2);
_root.txtsend = “”;
}
}
注释1：判断要发送的内容是否为空，为空则显示警告信息。
注释2：若发送的内容不为空，向服务器端发送聊天的内容和用户名。
C、小结与提高
跟登陆部分差不多的流程，先发送请求，然后等待返回的值，根据返回的值来执行相应的操作。这里要注意的是变量的命名不能跟前面重复，还有后面要用到的时间 变量也要先定义。这里的实现比较简单，只是简单介绍了流程，如果要考虑一下发送动作、发送图标、私聊等等，还有非常多的工作要做。
四、显示聊天内容
显示聊天内容的基本原理是从Flash端发送要显示聊天内容的请求，在服务器端将application(“AllCanSee”)的内容发送到网页端，网页端显示出来。
A、asp部分
1、新建一个空白文件，命名为content.asp，其内容如下：
<%
username = request(“username”)
tempstr = “cflag=true”
tempstr = tempstr & “&ccontent=” & application(“AllCanSee”) &bsp; //注释1
response.Write(tempstr)
%>
注释1：向网页端返回标志位和聊天内容。
B、网页部分
1、在主场景中拉一个对话框，属性设置如图5所示。
2、按Ctrl + F8，新建一个movie clip，命名为contentloop，在此clip的第一帧的action面板上增加下面的语句：
_root.ccount = 0;
stop();
在clip的第5帧上插入关键帧，在其action面板上面增加如下语句：
if (!(_root.cflag)) { //注释1
_root.ccount = _root.ccount + 1;
if (_root.ccount > 50) //注释2
{
_root.gotoAndPlay(“netfalse”);
_root.contentloop.gotoAndStop(1);
}
_root.contentloop.gotoAndPlay(2);
}
if (_root.cflag == “true”) //注释3
{
_root.txtcontent = _root.ccontent ;
_root.contentloop.gotoAndStop(1);
}
注释1：判断是否已经从服务器端返回值，还没有则计数器加一。
注释2：当计数器累计到50的时候，跳转到网络超时界面。
注释3：从服务器端返回的值为true，显示聊天的内容。
3、将contentloop从图库拖到主场景main帧中，命名为contentloop。
4、在主场景main帧中增加一个button，显示的内容为“更新”。在button的action面板上面增加如下语句：
on (release) { //注释1
loadVariables(“content.asp?username=” add _root.username add “&num=” add _root.num, this, “POST”);
_root.contentloop.gotoAndPlay(2);
loadVariables(“talker.asp”, this, “POST”); //注释2
_root.talkerloop.gotoAndPlay(2);
}
注释1：点击button后，向服务器端发送数据。
注释2：这是为显示在线人数列表做准备的。
C、小结与提高
注意后面要用到的显示在线人数列表也要在此处先定义。要进一步完善，可以考虑从过滤某些人的发言、踢人上去考虑。 五、显示在线人数列表
显示在线人数列表的基本原理是在网页端发送显示在线人数列表的请求，服务器端将application(“VisitorName”)对象的内容发送到网页端，在Flash端显示出来。
A、asp部分
1、新建一个空白文件，命名为talker.asp，其内容如下：
<%
tempstr = “tflag=true”
tempstr = tempstr & “&talker=” & application(“VisitorName”) ‘注释1
response.Write(tempstr)
%>
注释1：向Flash端发送标志位和在线人数列表。
B、Flash部分
1、在主场景中拉一个对话框，属性设置如图6所示。
2、按Ctrl + F8，新建一个movie clip，命名为talkerloop，在此clip的第一帧的action面板上增加下面的语句：
_root.tcount = 0;
stop();
在clip的第5帧上插入关键帧，在其action面板上面增加如下语句：
if (!(_root.tflag)) { //注释1
_root.tcount = _root.tcount + 1;
if (_root.tcount > 50) //注释2
{
_root.gotoAndPlay(“netfalse”);
_root.talkerloop.gotoAndStop(1);
}
_root.talkerloop.gotoAndPlay(2);
}
if (_root.tflag == “true”) //注释3
{
_root.txttalker = _root.talker;
_root.talkerloop.gotoAndStop(1);
}
注释1：判断是否已经从服务器端返回值，若未的话则计数器加一。
注释2：当计数器加到50的时候，跳转到网络超时界面。
注释3：若返回的标志位为true，在文本框中显示返回的列表。
3、将talkerloop从图库拖到主场景main帧中，命名为talkeloop。
C、小结与提高
这里实现的只是一个简单的处理，在实际应用中，要考虑用户id之间的分隔符，要考虑当用户退出网页聊天室时对application(“VisitorName”)对象的处理，要实现一个完善的处理还是比较复杂的
六、显示在线时间
显示在线时间的原理是在前面定义了一个时间变量，然后不断取得当前的时间值，两者相减并显示出来。
A、网页部分
1、在主场景中拉一个对话框，属性设置如图7所示。此时场景中布局如图8所示。
2、按Ctrl + F8，新建一个movie clip，命名为timeloop，将timeloop拖到场景中，在clip的Action面板上面增加如下语句：
onClipEvent (load) { //注释1
timedate = new Date();
}
onClipEvent (enterFrame) {
mytime = timedate.getTime(); //注释2
_root.txttime = Math.ceil((mytime – _root.starttime)/1000); //注释3
delete timedate; //注释4
timedate = new Date();
}
注释1：当load这个clip的时候，新建一个date对象。
注释2：取得当前时间。
注释3：用当前时间减在前面所取得的时间，显示在文本框中。
注释4：删除旧的时间对象，重新生成当前的时间对象。
B、小结与提高
这里用到的计时方法是一种很常用的技巧，其关键之处是在先定义一个时间变量，然后不断更新当前的时间变量，取两者之差。注意两者的差是毫秒，要除以1000。
七、运行平台与调试技巧
至此，一个简单的网页聊天室开发完成了，下面来介绍一下运行的平台和常用的调试技巧。
A、运行平台
Flash ＋ Asp结合使用的架构运行在Windows平台上面，可以用PWS服务器（Win98）或IIS服务器（Win2k，若找不到服务器，则需要 Windows安装光盘重新安装）。将上面所生成的文件放在服务器的一个虚拟目录下面，启动服务器，在浏览器中就可以看到效果了。
另外，在Web的应用中经常要用到数据库，常用的数据库有Sql server、Access和mysql。使用数据库的时候，要在控制面板的odbc数据源中设置相应的odbc参数。
B、调试技巧
虽然是Flash与Asp的结合使用，但在调试中最好将Flash和Asp分别调试。比如我是这样做的，先调试Asp部分，写好Asp部分后，在IE中输 入http://localhost/chat/send.asp?content=test，看看所显示的值是否是返回的值。其他的Asp部分都可以用 类似的方法。
在Flash部分，调试时最常用的方法是打印，可以用一个文本框将某些东西显示出来，也可以用trace()函数，将变量显示出来。另外也可以用网页所自带的debugger工具，查看相应变量的值。
其实，Flash也好，Asp也好，调试时最重要的是思路清晰，流程清楚，这样的话，程序的bug也会比较少。

注释2：用户名和密码不为空，向服务器端发送用户名和密码。