一聚教程网:一个值得你收藏的教程网站

热门教程

聊天室自做 Follow Me(转)

时间:2022-07-02 23:23:35 编辑:袖梨 来源:一聚教程网

上网而没去过聊天室的人,可谓是凤毛麟角,下面,我们就自己来做个最简单的聊天室。
  目前聊天室显示对话的方式一般有两种。一是每隔 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)中定时刷新,把新的发言的原始数据使用 的格式输出到客户端,即可调用 chatfyq.htm 中定义的 w(un,sa,tn,dt) 函数来显示出发言内容。

热门栏目