結(jié)合網(wǎng)頁與Asp來實現(xiàn)一個簡單的網(wǎng)頁聊天室制作案例，有在線聊天、在線人員名單、在線時間等功能。在這篇教程的最后，還比較詳細(xì)地介紹了Flash與Asp結(jié)合使用的平臺環(huán)境和常用的調(diào)試手段。
一、原理
主要的流程是先在網(wǎng)頁端發(fā)送一個請求到服務(wù)器端，然后等待從服務(wù)器端的返回值，當(dāng)值返回網(wǎng)頁端后，根據(jù)相應(yīng)的值做相應(yīng)的操作。在網(wǎng)頁部 分，跟前面的教程一樣，用到的主要都是loadVariables()函數(shù)和循環(huán)等待的技巧。在Asp部分，主要用到了global.asa文件和 application()屬性，先定義幾個application對象，然后將要保持的內(nèi)容放在application對象中，要用的時候，直接從 application對象中取就是了。

二、登陸
登陸部分的基本原理是：在網(wǎng)頁端輸入用戶名和密碼，通過Asp查詢數(shù)據(jù)庫，如果用戶名和密碼正確，就跳轉(zhuǎn)到網(wǎng)頁聊天室主界面，否則就跳轉(zhuǎn)到登陸失敗界面。
A、asp部分
1、 新建一個空白文件，命名為global.asa，內(nèi)容如下：
<script language=”vbscript” runat=”server”>
sub application_onstart
application(“VisitorNum”)=0
application(“VisitorName”)=””
application(“AllCanSee”)=”<br>”
end sub
</script>
注釋：上面是一個global文件，定義了幾個application對象，sub application_onstart 的意思是在啟動服務(wù)的時候觸發(fā)，初始化這些對象。Application對象可以在幾個網(wǎng)頁之間保持內(nèi) 容，application(“VisitorNum”)中的是當(dāng)前在線人數(shù)，application(“VisitorName”)中的是當(dāng)前在線人員 名單，application(“AllCanSee”)中的是當(dāng)前的聊天內(nèi)容。
2、新建一個空白文件，命名為login.asp，跟global.asa保存在同一個目錄中，內(nèi)容如下：
<%
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：打開一個數(shù)據(jù)庫的連接，讀者要根據(jù)數(shù)據(jù)庫的類型，數(shù)據(jù)庫所在的ip，數(shù)據(jù)庫的實例名做相應(yīng)的修改。
注釋3：根據(jù)用戶名和密碼構(gòu)造一個sql語句。
注釋4：如果在數(shù)據(jù)庫中存在所輸入的用戶名和密碼，將application(“VisitorNum”)加1，將當(dāng)前用戶名保存在application(“VisitorName”)，返回登陸成功的標(biāo)志位userlogin位success。
注釋5：用戶名或密碼錯誤，返回登陸失敗的標(biāo)志位userlogin位unsuccess。

B、Flash部分
1、在屬性面板上，將第一幀的“幀標(biāo)簽”設(shè)為“l(fā)ogin”。在第一幀的Action面板中加上：
Stop();
2、如圖1所示，在場景中放置兩個文本框，兩個button，其中上面一個文本框的設(shè)置如圖2所示，另一個文本框的設(shè)置如圖3所示。
3、新建一個組件，命名為“l(fā)oginloop1”，在第一幀的Action面板中加上下面語句：
_root.count = 0;
stop();
在第5幀上插入關(guān)鍵幀，在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(“l(fā)oginfalse”);
_root.loginloop.gotoAndStop(1);
}
注釋1：判斷結(jié)果是否已經(jīng)從服務(wù)器端返回，不是的話，計數(shù)器加一。
注釋2：判斷計數(shù)器是否已經(jīng)到50，是的話，跳轉(zhuǎn)到網(wǎng)絡(luò)超時界面。
注釋3：判斷返回的結(jié)果是否位success，是則跳轉(zhuǎn)到聊天的主界面。
注釋4：若返回的結(jié)果為unsuccess，跳轉(zhuǎn)到登陸出錯界面。
4、將組件“l(fā)oginloop1”從圖庫中拖到場景中，將其實例名設(shè)為“l(fā)oginloop”。
5、在場景中登陸B(tài)utton的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(“l(fā)ogin.asp?username=” add _root.username add “&userpwd=” add _root.userpwd, this, “POST”);
_root.loginloop.gotoAndPlay(2);
timeflag = 0;
}
}
注釋1：判斷用戶名和密碼是否為空。
6、在主場景中的第5幀中插入關(guān)鍵幀，將此幀命名為“netfalse”，在此幀場景中添加“網(wǎng)絡(luò)連接超時……”的信息。在幀的Action面板中增加下面的語句：
stop();
7、在主場景中的第10幀中插入關(guān)鍵幀，將此幀命名為“l(fā)oginfalse”，在此幀場景中添加“用戶名或密碼錯”的信息。在幀的Action面板中增加下面的語句：
stop();
C、小結(jié)與提高
在Asp部分要注意的是當(dāng)?shù)顷懗晒?#xff0c;要在application(“VisitorName”)和application(“VisitorNum”) 對象中加上相應(yīng)的值。在Flash部分中，先用loadVariables()發(fā)送請求，然后啟動另外一個clip等待返回的值，這是一種比較好的操作方 法。 　　三、發(fā)送
發(fā)送部分的基本原理是從Flash端發(fā)送聊天內(nèi)容到服務(wù)器端，在服務(wù)器端將聊天內(nèi)容添加到application(“AllCanSee”)對象中，并將修改后的application(“AllCanSee”)對象的內(nèi)容返回到Flash端。
A、asp部分
1、新建一個空白文件，命名為send.asp，其內(nèi)容如下：
<%
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端發(fā)送來的內(nèi)容添加到聊天的內(nèi)容中。
注釋2：將標(biāo)志位sflag和聊天的內(nèi)容發(fā)送回flash端。
B、Flash部分
1、在主場景的第15幀中添加關(guān)鍵幀，將此幀命名為“main”，在幀的Action面板中增加下面的語句：
now = new Date(); //注釋1
starttime = now.getTime();
stop();
注釋1：這是為計算在線時間而設(shè)的。
2、在主場景中拉一個對話框，屬性設(shè)置如圖4所示。
3、按Ctrl + F8，新建一個movie clip，命名為sendloop，在此clip的第一幀的action面板上增加下面的語句：
_root.countsend = 0;
stop();
在clip的第5幀上插入關(guān)鍵幀，在其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：判斷返回的標(biāo)志位，若還沒從服務(wù)器返回值，計數(shù)器加一。
注釋2：當(dāng)計數(shù)器加到50的時候，跳轉(zhuǎn)到網(wǎng)絡(luò)超時界面。
注釋3：若返回的值為true，將返回的聊天內(nèi)容顯示在場景中。
4、將sendloop從圖庫拖到主場景main幀中，命名為sendloop。
5、在主場景main幀中增加一個button，顯示的內(nèi)容為“發(fā)送”。在button的action面板上面增加如下語句：
on (release) {
if (length(_root.txtsend) == 0) { //注釋1
_root.txtsend = “請輸入內(nèi)容”;
}
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：判斷要發(fā)送的內(nèi)容是否為空，為空則顯示警告信息。
注釋2：若發(fā)送的內(nèi)容不為空，向服務(wù)器端發(fā)送聊天的內(nèi)容和用戶名。
C、小結(jié)與提高
跟登陸部分差不多的流程，先發(fā)送請求，然后等待返回的值，根據(jù)返回的值來執(zhí)行相應(yīng)的操作。這里要注意的是變量的命名不能跟前面重復(fù)，還有后面要用到的時間 變量也要先定義。這里的實現(xiàn)比較簡單，只是簡單介紹了流程，如果要考慮一下發(fā)送動作、發(fā)送圖標(biāo)、私聊等等，還有非常多的工作要做。
四、顯示聊天內(nèi)容
顯示聊天內(nèi)容的基本原理是從Flash端發(fā)送要顯示聊天內(nèi)容的請求，在服務(wù)器端將application(“AllCanSee”)的內(nèi)容發(fā)送到網(wǎng)頁端，網(wǎng)頁端顯示出來。
A、asp部分
1、新建一個空白文件，命名為content.asp，其內(nèi)容如下：
<%
username = request(“username”)
tempstr = “cflag=true”
tempstr = tempstr & “&ccontent=” & application(“AllCanSee”) &bsp; //注釋1
response.Write(tempstr)
%>
注釋1：向網(wǎng)頁端返回標(biāo)志位和聊天內(nèi)容。
B、網(wǎng)頁部分
1、在主場景中拉一個對話框，屬性設(shè)置如圖5所示。
2、按Ctrl + F8，新建一個movie clip，命名為contentloop，在此clip的第一幀的action面板上增加下面的語句：
_root.ccount = 0;
stop();
在clip的第5幀上插入關(guān)鍵幀，在其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：判斷是否已經(jīng)從服務(wù)器端返回值，還沒有則計數(shù)器加一。
注釋2：當(dāng)計數(shù)器累計到50的時候，跳轉(zhuǎn)到網(wǎng)絡(luò)超時界面。
注釋3：從服務(wù)器端返回的值為true，顯示聊天的內(nèi)容。
3、將contentloop從圖庫拖到主場景main幀中，命名為contentloop。
4、在主場景main幀中增加一個button，顯示的內(nèi)容為“更新”。在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后，向服務(wù)器端發(fā)送數(shù)據(jù)。
注釋2：這是為顯示在線人數(shù)列表做準(zhǔn)備的。
C、小結(jié)與提高
注意后面要用到的顯示在線人數(shù)列表也要在此處先定義。要進(jìn)一步完善，可以考慮從過濾某些人的發(fā)言、踢人上去考慮。 五、顯示在線人數(shù)列表
顯示在線人數(shù)列表的基本原理是在網(wǎng)頁端發(fā)送顯示在線人數(shù)列表的請求，服務(wù)器端將application(“VisitorName”)對象的內(nèi)容發(fā)送到網(wǎng)頁端，在Flash端顯示出來。
A、asp部分
1、新建一個空白文件，命名為talker.asp，其內(nèi)容如下：
<%
tempstr = “tflag=true”
tempstr = tempstr & “&talker=” & application(“VisitorName”) ‘注釋1
response.Write(tempstr)
%>
注釋1：向Flash端發(fā)送標(biāo)志位和在線人數(shù)列表。
B、Flash部分
1、在主場景中拉一個對話框，屬性設(shè)置如圖6所示。
2、按Ctrl + F8，新建一個movie clip，命名為talkerloop，在此clip的第一幀的action面板上增加下面的語句：
_root.tcount = 0;
stop();
在clip的第5幀上插入關(guān)鍵幀，在其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：判斷是否已經(jīng)從服務(wù)器端返回值，若未的話則計數(shù)器加一。
注釋2：當(dāng)計數(shù)器加到50的時候，跳轉(zhuǎn)到網(wǎng)絡(luò)超時界面。
注釋3：若返回的標(biāo)志位為true，在文本框中顯示返回的列表。
3、將talkerloop從圖庫拖到主場景main幀中，命名為talkeloop。
C、小結(jié)與提高
這里實現(xiàn)的只是一個簡單的處理，在實際應(yīng)用中，要考慮用戶id之間的分隔符，要考慮當(dāng)用戶退出網(wǎng)頁聊天室時對application(“VisitorName”)對象的處理，要實現(xiàn)一個完善的處理還是比較復(fù)雜的
六、顯示在線時間
顯示在線時間的原理是在前面定義了一個時間變量，然后不斷取得當(dāng)前的時間值，兩者相減并顯示出來。
A、網(wǎng)頁部分
1、在主場景中拉一個對話框，屬性設(shè)置如圖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：當(dāng)load這個clip的時候，新建一個date對象。
注釋2：取得當(dāng)前時間。
注釋3：用當(dāng)前時間減在前面所取得的時間，顯示在文本框中。
注釋4：刪除舊的時間對象，重新生成當(dāng)前的時間對象。
B、小結(jié)與提高
這里用到的計時方法是一種很常用的技巧，其關(guān)鍵之處是在先定義一個時間變量，然后不斷更新當(dāng)前的時間變量，取兩者之差。注意兩者的差是毫秒，要除以1000。
七、運行平臺與調(diào)試技巧
至此，一個簡單的網(wǎng)頁聊天室開發(fā)完成了，下面來介紹一下運行的平臺和常用的調(diào)試技巧。
A、運行平臺
Flash ＋ Asp結(jié)合使用的架構(gòu)運行在Windows平臺上面，可以用PWS服務(wù)器（Win98）或IIS服務(wù)器（Win2k，若找不到服務(wù)器，則需要 Windows安裝光盤重新安裝）。將上面所生成的文件放在服務(wù)器的一個虛擬目錄下面，啟動服務(wù)器，在瀏覽器中就可以看到效果了。
另外，在Web的應(yīng)用中經(jīng)常要用到數(shù)據(jù)庫，常用的數(shù)據(jù)庫有Sql server、Access和mysql。使用數(shù)據(jù)庫的時候，要在控制面板的odbc數(shù)據(jù)源中設(shè)置相應(yīng)的odbc參數(shù)。
B、調(diào)試技巧
雖然是Flash與Asp的結(jié)合使用，但在調(diào)試中最好將Flash和Asp分別調(diào)試。比如我是這樣做的，先調(diào)試Asp部分，寫好Asp部分后，在IE中輸 入http://localhost/chat/send.asp?content=test，看看所顯示的值是否是返回的值。其他的Asp部分都可以用 類似的方法。
在Flash部分，調(diào)試時最常用的方法是打印，可以用一個文本框?qū)⒛承〇|西顯示出來，也可以用trace()函數(shù)，將變量顯示出來。另外也可以用網(wǎng)頁所自帶的debugger工具，查看相應(yīng)變量的值。
其實，Flash也好，Asp也好，調(diào)試時最重要的是思路清晰，流程清楚，這樣的話，程序的bug也會比較少。

注釋2：用戶名和密碼不為空，向服務(wù)器端發(fā)送用戶名和密碼。

總結(jié)

以上是生活随笔為你收集整理的网页聊天室制作步骤分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。