聊天室自做 Follow Me
發(fā)表時(shí)間：2024-06-20 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]上網(wǎng)而沒去過聊天室的人，可謂是鳳毛麟角，下面，我們就自己來做個(gè)最簡(jiǎn)單的聊天室�！ ∧壳傲奶焓绎@示對(duì)話的方式一般有兩種。一是每隔 x 秒就把整個(gè)對(duì)話顯示區(qū)刷新一遍，此方的弊端顯而易見：數(shù)據(jù)傳輸量大且屏幕有閃爍感；其二是有新的發(fā)言時(shí)，才將該內(nèi)容傳遞給客戶端，并添加在原有對(duì)話的尾部，此法數(shù)據(jù)傳輸量就比較...
上網(wǎng)而沒去過聊天室的人，可謂是鳳毛麟角，下面，我們就自己來做個(gè)最簡(jiǎn)單的聊天室。
目前聊天室顯示對(duì)話的方式一般有兩種。一是每隔 x 秒就把整個(gè)對(duì)話顯示區(qū)刷新一遍，此方的弊端顯而易見：數(shù)據(jù)傳輸量大且屏幕有閃爍感；其二是有新的發(fā)言時(shí)，才將該內(nèi)容傳遞給客戶端，并添加在原有對(duì)話的尾部，此法數(shù)據(jù)傳輸量就比較小且屏幕是平滑滾動(dòng)，視覺效果好。第一種方法的實(shí)現(xiàn)已經(jīng)有很多資料介紹，因此本文將介紹第二種刷新方式。
設(shè)計(jì)思路：
�、欧⻊�(wù)器端只保留最新的30條發(fā)言作為緩沖區(qū)，新的發(fā)言內(nèi)容將最舊的發(fā)言擠出。
⑵每句發(fā)言都分配一個(gè)遞增的序號(hào)。客戶端最后出現(xiàn)的發(fā)言的序號(hào)記錄在 Session 中。
⑶利用隱藏框架進(jìn)行刷新，刷新時(shí)，將 Session 值與緩沖區(qū)的每句發(fā)言的序號(hào)進(jìn)行比較，如果序號(hào)大于 Session 值說明該發(fā)言是新的，就將該發(fā)言的數(shù)據(jù)取出，并將該發(fā)言的序號(hào)值賦給 Session。
�、葘�(duì)話顯示區(qū)使用 document.open() 打開后，就不再關(guān)閉，當(dāng)隱藏框架刷新時(shí)有新數(shù)據(jù)取出并傳到客戶端時(shí)，將這些原始數(shù)據(jù)格式化為要顯示的內(nèi)容（此工作可以在服務(wù)器端執(zhí)行，但為減輕服務(wù)器的負(fù)擔(dān)，就將對(duì)話的合成工作移交給客戶），然后調(diào)用 document.writeln 方法將發(fā)言的內(nèi)容寫到對(duì)話顯示區(qū)的尾部。
�、稍趯�(duì)話顯示區(qū)中放置一段自動(dòng)滾屏的代碼，使屏幕自動(dòng)向下滾動(dòng)，并可通過發(fā)言區(qū)的復(fù)選框來選擇是否自動(dòng)滾屏。
實(shí)現(xiàn)方法：
一、本程序只需要 4 個(gè)文件即可實(shí)現(xiàn)：
⑴chat.asp：聊天室框架文件，負(fù)責(zé)初始化程序運(yùn)行環(huán)境并隨機(jī)分配四位數(shù)的數(shù)字做為用戶名，再把頁(yè)面從上到下分成四部分，頂、底兩個(gè)框架高度為 0。
�、芻hatfyq.htm：發(fā)言區(qū)，提供輸入姓名、發(fā)言的文本框，及一個(gè)發(fā)言按鈕和一個(gè)自動(dòng)滾屏的開關(guān)（復(fù)選框），并定義在客戶端執(zhí)行的 JavaScript：checksays()（對(duì)發(fā)言進(jìn)行有效性檢測(cè)）、cls()（清空對(duì)話顯示區(qū)的內(nèi)容）、write()（初始化對(duì)話顯示區(qū)，定義頁(yè)面顏色、文字大小，并放置滾屏代碼）、sw(username)（在對(duì)話區(qū)點(diǎn)擊人名時(shí)，將人名寫到發(fā)言框中）、w(un,sa,tn,dt)（將原始數(shù)據(jù)合成為完整的發(fā)言內(nèi)容，并添加到對(duì)話顯示區(qū)的尾部）。
�、莄hatt.asp：此文件位于頂部的隱藏框架（高度為 0）中定時(shí)刷新，把新的發(fā)言的原始數(shù)據(jù)使用 <script Language=JavaScript>parent.f2.w("姓名","發(fā)言內(nèi)容","原始姓名","發(fā)言時(shí)間")</script> 的格式輸出到客戶端，即可調(diào)用 chatfyq.htm 中定義的 w(un,sa,tn,dt) 函數(shù)來顯示出發(fā)言內(nèi)容。
�、萩hatsay.asp：發(fā)言提交到此文件進(jìn)行處理。此文件位于底部的隱藏框架中。將發(fā)言加入緩沖區(qū)后，立即執(zhí)行和 chatt.asp 相同的代碼段，將發(fā)言顯示出來。（chatsay.asp 后面的代碼和 chatt.asp 是相同的，之所以不在 chatsay.asp 后面使用 Response.Redirect "chatt.asp" 來調(diào)用，是為了加快速度，因?yàn)橹囟ㄏ蚍绞叫枰纱芜B接：發(fā)言提交是連接一次，重定向時(shí)又要再連接一次，效率低。）
二、部分關(guān)鍵代碼注釋：
�、懦跏蓟a段：Application("chat_hh") 緩沖區(qū)中最后一句發(fā)言的序號(hào)、Session("chat_hh") 就是“設(shè)計(jì)思路⑶”中提到的 Session 值，用于記錄客戶端已顯示的最后一句發(fā)言的序號(hào)：
'如果該序號(hào)為空，表明程序未初始化
If Application("chat_hh") = "" Then
'定義緩沖區(qū)數(shù)組，共 30 句發(fā)言
'每句發(fā)言占用 5 個(gè)位置：序號(hào)、姓名、發(fā)言內(nèi)容、原始姓名、發(fā)言時(shí)間
Dim sd(150)
Application.Lock
'將數(shù)組賦值給 Application("chat_sd")，即：發(fā)言只保留在服務(wù)器內(nèi)存中
Application("chat_sd") = sd
'定義初始序號(hào)為 0
Application("chat_hh") = 0
Application.UnLock
End If
'為避免序號(hào)過大，每當(dāng)序號(hào)增大到 65535 時(shí)就將序號(hào)復(fù)位為 0
If Application("chat_hh") > 65535 Then
Application.Lock
Application("chat_hh") = 0
Application.UnLock
End If
'客戶端用來記錄已經(jīng)顯示到哪句發(fā)言的 Session("chat_hh")
'其值等于序號(hào)減去 12，即：新來的用戶可以看到原有的 12 句發(fā)言
Session("chat_hh") = Application("chat_hh") - 12
�、芻hatfyq.htm 中的 JavaScript 函數(shù)：write()：
function write(){
//使用 document.open() 打開對(duì)話顯示區(qū)，打開后不關(guān)閉，這樣就可以不斷向里面添加新內(nèi)容
parent.f1.document.open();
//向?qū)υ掞@示區(qū)中寫入 HTML 文件頭
parent.f1.document.writeln("<html><head><title>對(duì)話區(qū)</title><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\">");
//寫入樣式表定義
parent.f1.document.writeln("<style type=text/css>.t{color:AAAAAA;font-size:9pt;}body{font-family:\"宋體\";font-size:10.5pt;line-height:160%}A{text-decoration:none}A:Hover{text-decoration:underline}A:visited{color:blue}</style></head><\Script Language=\"JavaScript1.1\">");
//寫入自動(dòng)滾屏代碼
//......（注意：此處省略的代碼請(qǐng)參見完整的源程序）
parent.f1.document.writeln("StartUp();</\script>");
parent.f1.document.writeln("<body bgcolor=CDE0FC text=000000>");
parent.f1.document.writeln("<hr size=1>【歡迎光臨】紅蜻蜓聊天室恭候您的光臨。<hr size=1>");
//將 chatt.asp 載入框架頂端的隱藏框架中，執(zhí)行定時(shí)刷新功能
parent.t.location.href="chatt.asp";
}
�、莄hatt.asp 定時(shí)刷新，并取得最新的發(fā)言的代碼：
'將聊天室的對(duì)話內(nèi)容的緩存取到 sd 數(shù)組中
sd = Application("chat_sd")
'取得最后顯示的發(fā)言的序號(hào)
userhh = Session("chat_hh")
'定義 show 數(shù)組，用于存放要顯示的發(fā)言內(nèi)容
Dim show()
ReDim Preserve show(0)
j = 1
newuserhh = 0
'遍歷緩沖區(qū)的發(fā)言內(nèi)容
For i = 1 To 150 Step 5
newuserhh = sd(i)
'如果 sd(i)（每句發(fā)言的序號(hào)）大于用戶端最后發(fā)言的序號(hào)且發(fā)言存在就將其存入 show 數(shù)組
If sd(i) > userhh And sd(i) > 0 Then
ReDim Preserve show(j), show(j + 1), show(j + 2), show(j + 3)
show(j) = sd(i + 1)
show(j + 1) = sd(i + 2)
show(j + 2) = sd(i + 3)
show(j + 3) = sd(i + 4)
j = j + 4
End If
Next
'輸出 javascript 到客戶端
Response.Write "<script Language=JavaScript>"
'輸出 show 數(shù)組的內(nèi)容
For i = 1 To UBound(show) Step 4
'輸出 parent.f2.w(show(i),show(i+1),show(i+2),show(i+3))，調(diào)用客戶端 chatfyq.htm 的 w(un,sa,tn,dt) 函數(shù)來顯示發(fā)言內(nèi)容
Response.Write "parent.f2.w(" & Chr(34) & show(i) & Chr(34) & "," & Chr(34) & show(i + 1) & Chr(34) & "," & Chr(34) & show(i + 2) & Chr(34) & "," & Chr(34) & show(i + 3) & Chr(34) & ");" & Chr(13) & Chr(10)
Next
'寫出定時(shí)刷新的代碼，使 chatt.asp 在 5000 毫秒（5秒）后進(jìn)行刷新
Response.Write "setTimeout('this.location.reload()',5000);</script>"
'如果緩沖區(qū)最后一句發(fā)言的序號(hào)大于原來客戶端最后一句發(fā)言的序號(hào)，就將該序號(hào)賦值給這個(gè) Session("chat_hh")，以便下次刷新時(shí)進(jìn)行新的檢測(cè)，避免把相同的發(fā)言多次取出
If newuserhh > userhh Then Session("chat_hh") = newuserhh
⑷chatsay.asp 部分代碼注釋：
'如果發(fā)言長(zhǎng)度超過 200 個(gè)字，就截?cái)喑霾糠?br>If Len(says) > 200 Then says = Left(says, 200)
'將發(fā)言進(jìn)行編碼，使其不支持 HTML 語(yǔ)法
says = Server.HTMLEncode(says)
'使發(fā)言能在客戶端以 JavaScript 函數(shù)進(jìn)行傳遞
says = Replace(says, "\", "\\")
says = Replace(says, "/", "\/")
says = Replace(says, Chr(34), "\" & Chr(34))
Application.Lock
'讀出緩沖區(qū)的內(nèi)容到 sd 中
sd = Application("chat_sd")
'取出當(dāng)前緩沖區(qū)最后一句發(fā)言的序號(hào)
hh = Application("chat_hh")
'使這個(gè)序號(hào)遞增
Application("chat_hh") = hh + 1
Dim newsd(150)
j = 1
'將原緩沖區(qū)的最舊的一句發(fā)言去掉
For i = 6 To 150 Step 5
newsd(j) = sd(i)
newsd(j + 1) = sd(i + 1)
newsd(j + 2) = sd(i + 2)
newsd(j + 3) = sd(i + 3)
newsd(j + 4) = sd(i + 4)
j = j + 5
Next
'將這次發(fā)言的內(nèi)容添加到最后
newsd(146) = hh + 1
newsd(147) = un
newsd(148) = says
newsd(149) = username
newsd(150) = sj
'把新的發(fā)言內(nèi)容放到緩沖區(qū)中
Application("chat_sd") = newsd
sd = newsd
Application.UnLock
