光电工程师社区

标题: 聊天室自做 Follow Me（制作聊天室是简单而有趣的课程！） [打印本页]

作者: neathosalo 时间: 2003-4-5 17:44
标题: 聊天室自做 Follow Me（制作聊天室是简单而有趣的课程！）
2003-1-9 ·来源：www.learnasp.com.cn

上网而没去过聊天室的人，可谓是凤毛麟角，下面，我们就自己来做个最简单的聊天室。　

　　目前聊天室显示对话的方式一般有两种。一是每隔 x 秒就把整个对话显示区刷新一遍，此方的弊端显而易见：数据传输量大且屏幕有闪烁感；其二是有新的发言时，才将该内容传递给客户端，并添加在原有对话的尾部，此法数据传输量就比较小且屏幕是平滑滚动，视觉效果好。第一种方法的实现已经有很多资料介绍，因此本文将介绍第二种刷新方式。

　　设计思路：

　　⑴服务器端只保留最新的30条发言作为缓冲区，新的发言内容将最旧的发言挤出。

　　⑵每句发言都分配一个递增的序号。客户端最后出现的发言的序号记录在 Session 中。

　　⑶利用隐藏框架进行刷新，刷新时，将 Session 值与缓冲区的每句发言的序号进行比较，如果序号大于 Session 值说明该发言是新的，就将该发言的数据取出，并将该发言的序号值赋给 Session。

　　⑷对话显示区使用 document.open() 打开后，就不再关闭，当隐藏框架刷新时有新数据取出并传到客户端时，将这些原始数据格式化为要显示的内容（此工作可以在服务器端执行，但为减轻服务器的负担，就将对话的合成工作移交给客户），然后调用 document.writeln 方法将发言的内容写到对话显示区的尾部。

　　⑸在对话显示区中放置一段自动滚屏的代码，使屏幕自动向下滚动，并可通过发言区的复选框来选择是否自动滚屏。

　　实现方法：

　　一、本程序只需要 4 个文件即可实现：

　　⑴chat.asp：聊天室框架文件，负责初始化程序运行环境并随机分配四位数的数字做为用户名，再把页面从上到下分成四部分，顶、底两个框架高度为 0。

　　⑵chatfyq.htm：发言区，提供输入姓名、发言的文本框，及一个发言按钮和一个自动滚屏的开关（复选框），并定义在客户端执行的 JavaScript：checksays()（对发言进行有效性检测）、cls()（清空对话显示区的内容）、write()（初始化对话显示区，定义页面颜色、文字大小，并放置滚屏代码）、sw(username)（在对话区点击人名时，将人名写到发言框中）、w(un,sa,tn,dt)（将原始数据合成为完整的发言内容，并添加到对话显示区的尾部）。

　　⑶chatt.asp：此文件位于顶部的隐藏框架（高度为 0）中定时刷新，把新的发言的原始数据使用＜script Language=JavaScriptparent.f2.w(姓名,发言内容,原始姓名,发言时间)＜/script 的格式输出到客户端，即可调用 chatfyq.htm 中定义的 w(un,sa,tn,dt) 函数来显示出发言内容。

　　⑷chatsay.asp：发言提交到此文件进行处理。此文件位于底部的隐藏框架中。将发言加入缓冲区后，立即执行和 chatt.asp 相同的代码段，将发言显示出来。（chatsay.asp 后面的代码和 chatt.asp 是相同的，之所以不在 chatsay.asp 后面使用 Response.Redirect chatt.asp 来调用，是为了加快速度，因为重定向方式需要建立两次连接：发言提交是连接一次，重定向时又要再连接一次，效率低。）

　　二、部分关键代码注释：

　　⑴初始化代码段：Application(chat_hh) 缓冲区中最后一句发言的序号、Session(chat_hh) 就是“设计思路⑶”中提到的 Session 值，用于记录客户端已显示的最后一句发言的序号：

’如果该序号为空，表明程序未初始化

If Application(chat_hh) =  Then

’定义缓冲区数组，共 30 句发言

’每句发言占用 5 个位置：序号、姓名、发言内容、原始姓名、发言时间

Dim sd(150)

Application.Lock

’将数组赋值给 Application(chat_sd)，即：发言只保留在服务器内存中

Application(chat_sd) = sd

’定义初始序号为 0

Application(chat_hh) = 0

Application.UnLock

End If

’为避免序号过大，每当序号增大到 65535 时就将序号复位为 0

If Application(chat_hh)  65535 Then

Application.Lock

Application(chat_hh) = 0

Application.UnLock

End If

’客户端用来记录已经显示到哪句发言的 Session(chat_hh)

’其值等于序号减去 12，即：新来的用户可以看到原有的 12 句发言

Session(chat_hh) = Application(chat_hh) - 12

　　⑵chatfyq.htm 中的 JavaScript 函数：write()：

function write(){

//使用 document.open() 打开对话显示区，打开后不关闭，这样就可以不断向里面添加新内容

parent.f1.document.open();

//向对话显示区中写入 HTML 文件头

parent.f1.document.writeln(＜html＜head＜title对话区＜/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 载入框架顶端的隐藏框架中，执行定时刷新功能

parent.t.location.href=chatt.asp;

}

　　⑶chatt.asp 定时刷新，并取得最新的发言的代码：

’将聊天室的对话内容的缓存取到 sd 数组中

sd = Application(chat_sd)

’取得最后显示的发言的序号

userhh = Session(chat_hh)

’定义 show 数组，用于存放要显示的发言内容

Dim show()

ReDim Preserve show(0)

j = 1

newuserhh = 0

’遍历缓冲区的发言内容

For i = 1 To 150 Step 5

newuserhh = sd(i)

’如果 sd(i)（每句发言的序号）大于用户端最后发言的序号且发言存在就将其存入 show 数组

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 数组的内容

For i = 1 To UBound(show) Step 4

’输出 parent.f2.w(show(i),show(i+1),show(i+2),show(i+3))，调用客户端 chatfyq.htm 的 w(un,sa,tn,dt) 函数来显示发言内容

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

’如果缓冲区最后一句发言的序号大于原来客户端最后一句发言的序号，就将该序号赋值给这个 Session(chat_hh)，以便下次刷新时进行新的检测，避免把相同的发言多次取出

If newuserhh  userhh Then Session(chat_hh) = newuserhh

　　⑷chatsay.asp 部分代码注释：

’如果发言长度超过 200 个字，就截断超出部分

If Len(says)  200 Then says = Left(says, 200)

’将发言进行编码，使其不支持 HTML 语法

says = Server.HTMLEncode(says)

’使发言能在客户端以 JavaScript 函数进行传递

says = Replace(says, \, \\)

says = Replace(says, /, \/)

says = Replace(says, Chr(34), \  Chr(34))

Application.Lock

’读出缓冲区的内容到 sd 中

sd = Application(chat_sd)

’取出当前缓冲区最后一句发言的序号

hh = Application(chat_hh)

’使这个序号递增

Application(chat_hh) = hh + 1

Dim newsd(150)

j = 1

’将原缓冲区的最旧的一句发言去掉

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

’将这次发言的内容添加到最后

newsd(146) = hh + 1

newsd(147) = un

newsd(148) = says

newsd(149) = username

newsd(150) = sj

’把新的发言内容放到缓冲区中

Application(chat_sd) = newsd

sd = newsd

Application.UnLock

欢迎光临光电工程师社区 (http://bbs.oecr.com/)