結合網頁與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：用戶名和密碼不為空，向服務器端發送用戶名和密碼。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。