明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

聊天室自做 Follow Me

發(fā)表時間：2024-02-24 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]上網(wǎng)而沒去過聊天室的人，可謂是鳳毛麟角，下面，我們就自己來做個最簡單的聊天室�！　∧壳傲奶焓绎@示對話的方式一般有兩種。一是每隔 x 秒就把整個對話顯示區(qū)刷新一遍，此方的弊端顯而易見：數(shù)據(jù)傳輸量大且屏幕有閃爍感；其二是有新的發(fā)言時，才將該內(nèi)容傳遞給客戶端，并添加在原有對話的尾部，此法數(shù)據(jù)傳輸量就比較...
    上網(wǎng)而沒去過聊天室的人，可謂是鳳毛麟角，下面，我們就自己來做個最簡單的聊天室。
　　目前聊天室顯示對話的方式一般有兩種。一是每隔 x 秒就把整個對話顯示區(qū)刷新一遍，此方的弊端顯而易見：數(shù)據(jù)傳輸量大且屏幕有閃爍感；其二是有新的發(fā)言時，才將該內(nèi)容傳遞給客戶端，并添加在原有對話的尾部，此法數(shù)據(jù)傳輸量就比較小且屏幕是平滑滾動，視覺效果好。第一種方法的實現(xiàn)已經(jīng)有很多資料介紹，因此本文將介紹第二種刷新方式。
　　設(shè)計思路：
　�、欧⻊�(wù)器端只保留最新的30條發(fā)言作為緩沖區(qū)，新的發(fā)言內(nèi)容將最舊的發(fā)言擠出。
　　⑵每句發(fā)言都分配一個遞增的序號。客戶端最后出現(xiàn)的發(fā)言的序號記錄在 Session 中。
　�、抢秒[藏框架進行刷新，刷新時，將 Session 值與緩沖區(qū)的每句發(fā)言的序號進行比較，如果序號大于 Session 值說明該發(fā)言是新的，就將該發(fā)言的數(shù)據(jù)取出，并將該發(fā)言的序號值賦給 Session。
　�、葘υ掞@示區(qū)使用 document.open() 打開后，就不再關(guān)閉，當(dāng)隱藏框架刷新時有新數(shù)據(jù)取出并傳到客戶端時，將這些原始數(shù)據(jù)格式化為要顯示的內(nèi)容（此工作可以在服務(wù)器端執(zhí)行，但為減輕服務(wù)器的負擔(dān)，就將對話的合成工作移交給客戶），然后調(diào)用 document.writeln 方法將發(fā)言的內(nèi)容寫到對話顯示區(qū)的尾部。
　�、稍趯υ掞@示區(qū)中放置一段自動滾屏的代碼，使屏幕自動向下滾動，并可通過發(fā)言區(qū)的復(fù)選框來選擇是否自動滾屏。
　　實現(xiàn)方法：
　　一、本程序只需要 4 個文件即可實現(xiàn)：
　　⑴chat.asp：聊天室框架文件，負責(zé)初始化程序運行環(huán)境并隨機分配四位數(shù)的數(shù)字做為用戶名，再把頁面從上到下分成四部分，頂、底兩個框架高度為 0。
　　⑵chatfyq.htm：發(fā)言區(qū)，提供輸入姓名、發(fā)言的文本框，及一個發(fā)言按鈕和一個自動滾屏的開關(guān)（復(fù)選框），并定義在客戶端執(zhí)行的 JavaScript：checksays()（對發(fā)言進行有效性檢測）、cls()（清空對話顯示區(qū)的內(nèi)容）、write()（初始化對話顯示區(qū)，定義頁面顏色、文字大小，并放置滾屏代碼）、sw(username)（在對話區(qū)點擊人名時，將人名寫到發(fā)言框中）、w(un,sa,tn,dt)（將原始數(shù)據(jù)合成為完整的發(fā)言內(nèi)容，并添加到對話顯示區(qū)的尾部）。
　�、莄hatt.asp：此文件位于頂部的隱藏框架（高度為 0）中定時刷新，把新的發(fā)言的原始數(shù)據(jù)使用 <script Language=JavaScript>parent.f2.w("姓名","發(fā)言內(nèi)容","原始姓名","發(fā)言時間")</script> 的格式輸出到客戶端，即可調(diào)用 chatfyq.htm 中定義的 w(un,sa,tn,dt) 函數(shù)來顯示出發(fā)言內(nèi)容。
　�、萩hatsay.asp：發(fā)言提交到此文件進行處理。此文件位于底部的隱藏框架中。將發(fā)言加入緩沖區(qū)后，立即執(zhí)行和 chatt.asp 相同的代碼段，將發(fā)言顯示出來。（chatsay.asp 后面的代碼和 chatt.asp 是相同的，之所以不在 chatsay.asp 后面使用 Response.Redirect "chatt.asp" 來調(diào)用，是為了加快速度，因為重定向方式需要建立兩次連接：發(fā)言提交是連接一次，重定向時又要再連接一次，效率低。）
　　二、部分關(guān)鍵代碼注釋：
　�、懦跏蓟a段：Application("chat_hh") 緩沖區(qū)中最后一句發(fā)言的序號、Session("chat_hh") 就是“設(shè)計思路⑶”中提到的 Session 值，用于記錄客戶端已顯示的最后一句發(fā)言的序號：


'如果該序號為空，表明程序未初始化
If Application("chat_hh") = "" Then
  '定義緩沖區(qū)數(shù)組，共 30 句發(fā)言
  '每句發(fā)言占用 5 個位置：序號、姓名、發(fā)言內(nèi)容、原始姓名、發(fā)言時間
  Dim sd(150)
  Application.Lock
  '將數(shù)組賦值給 Application("chat_sd")，即：發(fā)言只保留在服務(wù)器內(nèi)存中
  Application("chat_sd") = sd
  '定義初始序號為 0
  Application("chat_hh") = 0
  Application.UnLock
End If
'為避免序號過大，每當(dāng)序號增大到 65535 時就將序號復(fù)位為 0
If Application("chat_hh") > 65535 Then
  Application.Lock
  Application("chat_hh") = 0
  Application.UnLock
End If
'客戶端用來記錄已經(jīng)顯示到哪句發(fā)言的 Session("chat_hh")
'其值等于序號減去 12，即：新來的用戶可以看到原有的 12 句發(fā)言
Session("chat_hh") = Application("chat_hh") - 12


　�、芻hatfyq.htm 中的 JavaScript 函數(shù)：write()：


function write(){
  //使用 document.open() 打開對話顯示區(qū)，打開后不關(guān)閉，這樣就可以不斷向里面添加新內(nèi)容
  parent.f1.document.open();
  //向?qū)υ掞@示區(qū)中寫入 HTML 文件頭
  parent.f1.document.writeln("<html><head><title>對話區(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\">");
  //寫入自動滾屏代碼
  //......（注意：此處省略的代碼請參見完整的源程序）
  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í)行定時刷新功能
  parent.t.location.href="chatt.asp";
}


　　⑶chatt.asp 定時刷新，并取得最新的發(fā)言的代碼：


'將聊天室的對話內(nèi)容的緩存取到 sd 數(shù)組中
sd = Application("chat_sd")
'取得最后顯示的發(fā)言的序號
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ā)言的序號）大于用戶端最后發(fā)言的序號且發(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
'寫出定時刷新的代碼，使 chatt.asp 在 5000 毫秒（5秒）后進行刷新
Response.Write "setTimeout('this.location.reload()',5000);</script>"
'如果緩沖區(qū)最后一句發(fā)言的序號大于原來客戶端最后一句發(fā)言的序號，就將該序號賦值給這個 Session("chat_hh")，以便下次刷新時進行新的檢測，避免把相同的發(fā)言多次取出
If newuserhh > userhh Then Session("chat_hh") = newuserhh


　�、萩hatsay.asp 部分代碼注釋：


'如果發(fā)言長度超過 200 個字，就截斷超出部分
If Len(says) > 200 Then says = Left(says, 200)
'將發(fā)言進行編碼，使其不支持 HTML 語法
says = Server.HTMLEncode(says)
'使發(fā)言能在客戶端以 JavaScript 函數(shù)進行傳遞
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ā)言的序號
  hh = Application("chat_hh")
  '使這個序號遞增
  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





標(biāo)簽：聊天室自做 Follow Me