聊天室自做 Follow Me
程序员文章站
2022-03-10 15:05:26
上网而没去过聊天室的人，可谓是凤毛麟角，下面，我们就自己来做个最简单的聊天室。 目前聊天室显示对话的方式一般有两种。一是每隔 x 秒就把整个对话显示...
上网而没去过聊天室的人，可谓是凤毛麟角，下面，我们就自己来做个最简单的聊天室。
目前聊天室显示对话的方式一般有两种。一是每隔 x 秒就把整个对话显示区刷新一遍，此方的弊端显而易见：数据传输量大且屏幕有闪烁感；其二是有新的发言时，才将该内容传递给客户端，并添加在原有对话的尾部，此法数据传输量就比较小且屏幕是平滑滚动，视觉效果好。第一种方法的实现已经有很多资料介绍，因此本文将介绍第二种刷新方式。
设计思路：
⑴服务器端只保留最新的30条发言作为缓冲区，新的发言内容将最旧的发言挤出。
⑵每句发言都分配一个递增的序号。客户端最后出现的发言的序号记录在 session 中。
⑶利用隐藏框架进行刷新，刷新时，将 session 值与缓冲区的每句发言的序号进行比较，如果序号大于 session 值说明该发言是新的，就将该发言的数据取出，并将该发言的序号值赋给 session。
⑷对话显示区使用 document.open() 打开后，就不再关闭，当隐藏框架刷新时有新数据取出并传到客户端时，将这些原始数据格式化为要显示的内容（此工作可以在服务器端执行，但为减轻服务器的负担，就将对话的合成工作移交给客户），然后调用 document.writeln 方法将发言的内容写到对话显示区的尾部。
⑸在对话显示区中放置一段自动滚屏的代码，使屏幕自动向下滚动，并可通过发言区的复选框来选择是否自动滚屏。
实现方法：
一、本程序只需要 4 个文件即可实现：
⑴chat.：聊天室框架文件，负责初始化程序运行环境并随机分配四位数的数字做为用户名，再把页面从上到下分成四部分，顶、底两个框架高度为 0。
⑵chatfyq.htm：发言区，提供输入姓名、发言的文本框，及一个发言按钮和一个自动滚屏的开关（复选框），并定义在客户端执行的 javascript：checksays()（对发言进行有效性检测）、cls()（清空对话显示区的内容）、write()（初始化对话显示区，定义页面颜色、文字大小，并放置滚屏代码）、sw(username)（在对话区点击人名时，将人名写到发言框中）、w(un,sa,tn,dt)（将原始数据合成为完整的发言内容，并添加到对话显示区的尾部）。
⑶chatt.asp：此文件位于顶部的隐藏框架（高度为 0）中定时刷新，把新的发言的原始数据使用 <script language=javascript>parent.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
目前聊天室显示对话的方式一般有两种。一是每隔 x 秒就把整个对话显示区刷新一遍，此方的弊端显而易见：数据传输量大且屏幕有闪烁感；其二是有新的发言时，才将该内容传递给客户端，并添加在原有对话的尾部，此法数据传输量就比较小且屏幕是平滑滚动，视觉效果好。第一种方法的实现已经有很多资料介绍，因此本文将介绍第二种刷新方式。
设计思路：
⑴服务器端只保留最新的30条发言作为缓冲区，新的发言内容将最旧的发言挤出。
⑵每句发言都分配一个递增的序号。客户端最后出现的发言的序号记录在 session 中。
⑶利用隐藏框架进行刷新，刷新时，将 session 值与缓冲区的每句发言的序号进行比较，如果序号大于 session 值说明该发言是新的，就将该发言的数据取出，并将该发言的序号值赋给 session。
⑷对话显示区使用 document.open() 打开后，就不再关闭，当隐藏框架刷新时有新数据取出并传到客户端时，将这些原始数据格式化为要显示的内容（此工作可以在服务器端执行，但为减轻服务器的负担，就将对话的合成工作移交给客户），然后调用 document.writeln 方法将发言的内容写到对话显示区的尾部。
⑸在对话显示区中放置一段自动滚屏的代码，使屏幕自动向下滚动，并可通过发言区的复选框来选择是否自动滚屏。
实现方法：
一、本程序只需要 4 个文件即可实现：
⑴chat.：聊天室框架文件，负责初始化程序运行环境并随机分配四位数的数字做为用户名，再把页面从上到下分成四部分，顶、底两个框架高度为 0。
⑵chatfyq.htm：发言区，提供输入姓名、发言的文本框，及一个发言按钮和一个自动滚屏的开关（复选框），并定义在客户端执行的 javascript：checksays()（对发言进行有效性检测）、cls()（清空对话显示区的内容）、write()（初始化对话显示区，定义页面颜色、文字大小，并放置滚屏代码）、sw(username)（在对话区点击人名时，将人名写到发言框中）、w(un,sa,tn,dt)（将原始数据合成为完整的发言内容，并添加到对话显示区的尾部）。
⑶chatt.asp：此文件位于顶部的隐藏框架（高度为 0）中定时刷新，把新的发言的原始数据使用 <script language=javascript>parent.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