Flash 与 Asp结合使用实例之二 聊天室的实现

2004-5-15　作者：翅膀　网友评论 0 条　点击进入论坛

　　前面几篇教程我们介绍了Flash与Asp结合使用的原理以及一个论坛的实现，下面我们继续结合Flash与Asp来实现一个简单的聊天室，有在线聊天、在线人员名单、在线时间等功能。在这篇教程的最后，还比较详细地介绍了Flash与Asp结合使用的平台环境和常用的调试手段。

　　一、原理

　　主要的流程是先在Flash端发送一个请求到服务器端，然后等待从服务器端的返回值，当值返回Flash端后，根据相应的值做相应的操作。在Flash部分，跟前面的教程一样，用到的主要都是loadVariables()函数和循环等待的技巧。在Asp部分，主要用到了global.asa文件和application()属性，先定义几个application对象，然后将要保持的内容放在application对象中，要用的时候，直接从application对象中取就是了。

　　二、登陆

　　登陆部分的基本原理是：在Flash端输入用户名和密码，通过Asp查询数据库，如果用户名和密码正确，就跳转到聊天主界面，否则就跳转到登陆失败界面。

　　A、asp部分

　　1、 新建一个空白文件，命名为global.asa，内容如下：

　　注释：上面是一个global文件，定义了几个application对象，sub application_onstart的意思是在启动服务的时候触发，初始化这些对象。Application对象可以在几个网页之间保持内容，application("VisitorNum")中的是当前在线人数，application("VisitorName")中的是当前在线人员名单，application("AllCanSee")中的是当前的聊天内容。

　　2、新建一个空白文件，命名为login.asp，跟global.asa保存在同一个目录中，内容如下：

　　注释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)) {                                file://注释1
 _root.count = _root.count + 1;
 if (_root.count > 50)                              file://注释2
  {
   _root.gotoAndPlay("netfalse");
   _root.loginloop.gotoAndStop(1);
  }
 _root.loginloop.gotoAndPlay(2);
}
  if (_root.userlogin == "success")               file://注释3
 {
  _root.txttime = _root.userlogin;
  _root.gotoAndPlay("main");
  _root.loginloop.gotoAndStop(1);
 }
 if (_root.userlogin == "unsuccess")                 file://注释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) {                            file://注释1
  _root.username = "请输入名字";
 } else if (length(_root.userpwd) == 0) {
  _root.username = "请输入密码";
 }
 if ((length(_root.username) != 0)and (length(_root.userpwd) != 0)) {         file://注释1  loadVariables("login.asp?username=" add _root.username add "&userpwd=" add _root.userpwd, this, "POST");
  _root.loginloop.gotoAndPlay(2); 
  timeflag = 0;
 }
}

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

 

[下一页]

 

　　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") & "
"
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();     file://注释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)) {                                  file://注释1
 _root.countsend = _root.countsend + 1;
 if (_root.countsend > 50)                         file://注释2
  {
   _root.gotoAndPlay("netfalse");
   _root.sendloop.gotoAndStop(1);
  }
  _root.txttime = _root.countsend;
 _root.sendloop.gotoAndPlay(2);
}
if (_root.sflag == "true")                            file://注释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) {              file://注释1
  _root.txtsend = "请输入内容";
 }
 if ((length(_root.txtsend) != 0)) {            file://注释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")的内容发送到Flash端，Flash端显示出来。

　　A、asp部分

　　1、新建一个空白文件，命名为content.asp，其内容如下：

<%
username = request("username")
tempstr = "cflag=true"
tempstr = tempstr & "&ccontent=" & application("AllCanSee")       &bsp;  file://注释1
response.Write(tempstr)
%>

　　注释1：向Flash端返回标志位和聊天内容。

 

[下一页]

 

　　B、Flash部分

　　1、在主场景中拉一个对话框，属性设置如图5所示。

　　2、按Ctrl + F8，新建一个movie clip，命名为contentloop，在此clip的第一帧的action面板上增加下面的语句：

_root.ccount = 0;
stop();
在clip的第5帧上插入关键帧，在其action面板上面增加如下语句：
if (!(_root.cflag)) {                                          file://注释1
 _root.ccount = _root.ccount + 1;
 if (_root.ccount > 50)                                    file://注释2
  {
   _root.gotoAndPlay("netfalse");
   _root.contentloop.gotoAndStop(1);
  }
 _root.contentloop.gotoAndPlay(2);
}
if (_root.cflag == "true")                                      file://注释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) {                                       file://注释1
  loadVariables("content.asp?username=" add _root.username add "&num=" add _root.num, this, "POST");
  _root.contentloop.gotoAndPlay(2);
  loadVariables("talker.asp", this, "POST");                    file://注释2
  _root.talkerloop.gotoAndPlay(2);
}

　　注释1：点击button后，向服务器端发送数据。
　　注释2：这是为显示在线人数列表做准备的。

　　C、小结与提高

　　注意后面要用到的显示在线人数列表也要在此处先定义。要进一步完善，可以考虑从过滤某些人的发言、踢人上去考虑。

　　五、显示在线人数列表

　　显示在线人数列表的基本原理是在Flash端发送显示在线人数列表的请求，服务器端将application("VisitorName")对象的内容发送到Flash端，在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)) {                                              file://注释1
 _root.tcount = _root.tcount + 1;
 if (_root.tcount > 50)                                        file://注释2
  {
   _root.gotoAndPlay("netfalse");
   _root.talkerloop.gotoAndStop(1);
  }
 _root.talkerloop.gotoAndPlay(2);
}
if (_root.tflag == "true")                                        file://注释3
{
 _root.txttalker = _root.talker;
 _root.talkerloop.gotoAndStop(1);
}

　　注释1：判断是否已经从服务器端返回值，若未的话则计数器加一。
　　注释2：当计数器加到50的时候，跳转到网络超时界面。
　　注释3：若返回的标志位为true，在文本框中显示返回的列表。

　　3、将talkerloop从图库拖到主场景main帧中，命名为talkeloop。

　　C、小结与提高

　　这里实现的只是一个简单的处理，在实际应用中，要考虑用户id之间的分隔符，要考虑当用户退出聊天室时对application("VisitorName")对象的处理，要实现一个完善的处理还是比较复杂的。

 

[下一页]

 

　　六、显示在线时间

　　显示在线时间的原理是在前面定义了一个时间变量，然后不断取得当前的时间值，两者相减并显示出来。

　　A、Flash部分

　　1、在主场景中拉一个对话框，属性设置如图7所示。此时场景中布局如图8所示。

　　2、按Ctrl + F8，新建一个movie clip，命名为timeloop，将timeloop拖到场景中，在clip的Action面板上面增加如下语句：

onClipEvent (load) {                                         file://注释1
 timedate = new Date();
}
onClipEvent (enterFrame) {
mytime = timedate.getTime();                                   file://注释2
_root.txttime = Math.ceil((mytime - _root.starttime)/1000);           file://注释3
 delete timedate;                                           file://注释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()函数，将变量显示出来。另外也可以用flash所自带的debugger工具，查看相应变量的值。

　　其实，Flash也好，Asp也好，调试时最重要的是思路清晰，流程清楚，这样的话，程序的bug也会比较少。

今日推荐

• ·2008年十大IT技术
• ·中间件标准将推动我国数字电视市场发展
• ·解决生产企业的订单管理问题[图]
• ·大型格式化打印技术
• ·高质量显示技术

• ·开源历史回顾 Linux操作系统的发展与文化
• ·新手学堂：安装Linux应该了解的六个问题
• ·给初学者的建议 谈一谈怎样走入Linux大门
• ·Linux与其他操作系统区别
• ·重复数据删除技术在数据保护过程中的应用

重点推荐

领军企业技术文库

最新专题

电子杂志订阅

技术热点