1
11.4 聊天室
11.4.1 认识聊天室 (Chatroom)
11.4.2 组成网页的文件清单
11.4.3 网页的执行流程
11.4.4 必须具备的知识
11.4.5 完整程序代码清单
2
11.4 聊天室
11.4.1 认识聊天室 (Chatroom)
许多网站会提供聊天室让用户从事在线聊天,而且多数聊天室不仅会提供文本模式交谈,还允许用户选择代表自己的颜色与图案,并统计在线人数、在线名单及在线传讯。
现在,我们来看个实例,图 a、图 b (见下页 ) 是我们即将要制作的聊天室。这个聊天室有两个画面,第一个画面是要求用户输入名字并选择代表自己的颜色与图案,然后单击“登录”按钮进入第二个画面,里面会列出目前加入聊天的名单及内容,用户可以发表自己的谈话。
3
11.4 聊天室
11.4.1 认识聊天室 (Chatroom)
1,输入名字
2,选择颜色
3,选择图案
4,单击“登录”
图 a
4
11.4 聊天室
11.4.1 认识聊天室 (Chatroom)
聊天的内容
5,进入聊天室,目前加入聊天的名单图 b
若要发表谈话,请在此输入,然后按“发送”按钮
“发送”按钮
5
11.4 聊天室
11.4.2 组成网页的文件清单制作这个聊天室需要如下文件,见下表。
文件名称 说 明
1.gif ~ 6.gif 这 6 个 GIF 动画图形文件放在聊天室的第一个画面中
Fig.jpg 这个 JPEG图形文件是聊天室第一个画面的标题图片
Fig1.jpg,Fig2.jpg 这两个 JPEG图形文件放在聊天室的第二个画面中
Global.asa
这个初始化文件必须放在 Web 服务器的主目录中,其任务是将用来存放聊天内容的 21 个字符串变量
Application("Msg1")~ Application("Msg21") 初设为空字符串
6
11.4 聊天室
11.4.2 组成网页的文件清单续上表。
文件名称 说 明
Login.asp
这个网页为聊天室的第一个画面,提供表单让用户输入名字、选择颜色和图案,按下“登录”按钮之后会调用表单处理程序 <Chatroom.asp>
Chatroom.asp
这个网页是构成聊天室第二个画面的框架网页,它除了指定各个框架的大小和来源网页 (共有 4个,分别是上下各一个,中间有两个 ),还会在用户进入聊天室时,
读取用户输入的名字及所选取的颜色、图案,并初始化一个问候的字符串“大家好,我是 XXX,请多多指教!”
UserInfo.asp 第二个画面上方框架的来源网页,用来显示用户的名字、进入时间,IP,若要离开聊天室,可以按下 图案
7
11.4 聊天室
11.4.2 组成网页的文件清单续上表。
文件名称 说 明
UserList.asp 第二个画面中间左方框架的来源网页,用来显示聊天室的名单,每 10 秒钟会自动更新一次
ChatList.asp
第二个画面中间右方框架的来源网页,用来显示存放聊天内容的 21 个字符串变量 Application("Msg1")~
Application("Msg21"),每 10 秒钟会自动更新一次
InputMsg.asp 第二个画面下方框架的来源网页,提供一个单行文字方块让用户输入聊天内容,按下“发送”按钮后会调用表单处理程序 <GetChat.asp>
GetChat.asp
这个程序用来读取用户输入的聊天内容,然后将聊天内容加上代表该用户的颜色及图案,再存放到字符串变量
Application("Msg1")
8
11.4 聊天室
11.4.3 网页的执行流程首先,执行 <Login.asp>,要求用户输入名字、选择颜色及图案,然后按下“登录”按钮,就调用表单处理程序 <Chatroom.asp>。 <Chatroom.asp> 会读取用户输入的名字、颜色及图案。若名字字段是空白的,
就结束程序,否则就初始化一个问候字符串并执行框架网页的各个来源网页,如下页图所示。
9
11.4 聊天室
11.4.3 网页的执行流程
10
11.4 聊天室
11.4.4 必须具备的知识首先,读者必须熟悉 HTML 语法或其他网页编辑软件 (如 Macromedia Dreamweaver MX 2004),因为我们将用到框架、表单及读取表单数据等技巧。其次,您必须了解 Application变量和 Session变量的意义及用法。
11
11.4 聊天室
11.4.5 完整程序代码清单
<Global.asa>
在解释 <Global.asa>的用途之前,我们先来说明
Application("Msg1")~ Application("Msg21") 等 21个
Application变量的意义,这些变量用来存放聊天内容。
当用户在 <InputMsg.asp> 输入聊天内容并按下“发送”
时,表单处理程序 <GetChat.asp> 会先把
Application("Msg20") 存放到 Application("Msg21")中、
把 Application("Msg19") 存放到 Application("Msg20")中,
然后依此类推,直到把 Application("Msg1") 存放到
Application("Msg2")中,再去读取聊天内容,然后加上代表该用户的颜色及图案并存放在
Application("Msg1")中。
12
11.4 聊天室
11.4.5 完整程序代码清单
<Global.asa>
<Global.asa> 这个初始化文件必须放在 Web 服务器的主目录,其任务则是将用来存放聊天内容的 21个字符串变量 Application("Msg1")~ Application("Msg21")
初设为空字符串。
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
SUB Application_OnStart
For I = 1 to 21
Application("Msg"&I) = ""
Next
END SUB
</SCRIPT>
13
11.4 聊天室
11.4.5 完整程序代码清单
<Login.asp>
这个网页为聊天室的第一个画面,提供表单让用户输入名字、选择颜色和图案。按下“登录”按钮后会调用表单处理程序 <Chatroom.asp>。其程序代码如下:
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;
CHARSET=GB2312">
<TITLE>快乐聊天室 </TITLE>
</HEAD>
<BODY BGCOLOR="White">
<CENTER><IMG SRC="../images/fig.jpg"></CENTER>
<FORM METHOD="POST" ACTION="Chatroom.asp">
<P>请输入您的名字,<INPUT TYPE="TEXT" NAME="UserName" SIZE="20"></P>
<P>请选择您的颜色:
<SELECT NAME="UserColor">
<OPTION VALUE="White" STYLE="Background=White" SELECTED>白色
14
11.4 聊天室
11.4.5 完整程序代码清单
<Login.asp>
<OPTION VALUE="Yellow" STYLE="Background=Yellow">黄色
<OPTION VALUE="Pink" STYLE="Background=Pink">粉红色
<OPTION VALUE="Plum" STYLE="Background=Plum">紫红色
<OPTION VALUE="Cyan" STYLE="Background=Cyan">粉蓝色
<OPTION VALUE="Lime" STYLE="Background=Lime">萤光绿色
</SELECT></P>
<P>请选择您的图案:
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="1.gif" CHECKED>
<IMG SRC="1.gif">
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="2.gif"><IMG SRC="2.gif">
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="3.gif"><IMG SRC="3.gif">
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="4.gif"><IMG SRC="4.gif">
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="5.gif"><IMG SRC="5.gif">
<INPUT TYPE="RADIO" NAME="UserFig" VALUE="6.gif"><IMG SRC="6.gif"></P>
<INPUT TYPE="SUBMIT" VALUE="登录 ">
<INPUT TYPE="RESET" VALUE="重新输入 ">
</FORM>
</BODY>
</HTML>
15
11.4 聊天室
11.4.5 完整程序代码清单
<Chatroom.asp>
这个网页是构成聊天室第二个画面的框架网页,它有下列两个任务:
* 在用户进入聊天室的时候,读取用户输入的名字及所选取的颜色、
图案,然后初始化一个问候的字符串“大家好,我是 XXX,请多多指教!”,再把这个字符串存放在 Application("Msg1") 变量中。
* 声明构成聊天室的框架网页,上方框架的高度为 60像素点、名称为 Top、来源网页为 <UserInfo.asp>,下方框架的高度也为 60像素点、
名称为 Bottom、来源网页为 <InputMsg.asp>,其他为中间框架的高度;
中间左方框架的宽度为 160像素点、名称为 Lmiddle、来源网页为
<UserList.asp>,其他为中间右方框架的宽度、名称为 Rmiddle、来源网页为 <ChatList.asp>。
<%
'读取浏览者在 <Login.asp> 网页所输入的名字 \颜色及图案
Session("UserName") = Request("UserName")
Session("UserColor") = Request("UserColor")
16
11.4 聊天室
11.4.5 完整程序代码清单
<Chatroom.asp>续
Session("UserFig") = Request("UserFig")
'若尚未输入名字,显示错误信息并结束网页
If Session("UserName") = "" Then
Response.Write "很抱歉,您尚未登录,无法进入聊天室! "
Response.End
End If
Application.Lock
For I = 21 To 2 Step -1
J = I - 1
Application("Msg"&I) = Application("Msg"&J)
Next
'取得目前时间的小时及分钟
strHour = Hour(Time())
If Len(strHour) = 1 then strHour = "0" & strHour
strMinute = Minute(Time())
If Len(strMinute) = 1 then strMinute = "0" & strMinute
strTime = "<" & strHour & ":" & strMinute & ">&nbsp;“
'初始化一个问候字符串,然后存放在 Application("Msg1")
strTmp = "<FONT COLOR='" & Session("UserColor") & "'>" & "大家好,我是 " &
Session("UserName") & ",请多多指教! " & strTime & "</FONT>"
17
11.4 聊天室
11.4.5 完整程序代码清单
<Chatroom.asp>续
Application("Msg1") = strTmp
Application.Unlock
%>
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;
CHARSET=GB2312">
<TITLE>快乐聊天室 </TITLE>
</HEAD>
<FRAMESET ROWS="60,*,60">
<FRAME NAME="Top" NORESIZE SCROLLING="No"
SRC="UserInfo.asp?Logout=No">
<FRAMESET COLS="160,*">
<FRAME NAME="LMiddle" NORESIZE SRC="UserList.asp?
UserName=<%= Session("UserName") %>">
<FRAME NAME="RMiddle" NORESIZE SRC="ChatList.asp">
</FRAMESET>
<FRAME NAME="Bottom" NORESIZE SCROLLING="No" SRC="InputMsg.asp">
</FRAMESET><noframes></noframes>
</HTML>
18
11.4 聊天室
11.4.5 完整程序代码清单
<Chatroom.asp>续其中,12 ~ 15行:把 Application("Msg20")存放到
Application("Msg21")中、把 Application ("Msg19") 存放到 Application("Msg20")中,然后依此类推,直到把
Application("Msg1") 存放到 Application("Msg2")中。
35行:设置上方框架的来源网页为 <UserInfo.asp> 并传送一个值为 No的参数 Logout。
37行:设置中间左方框架的来源网页为 <UserList.asp>
并将用户名作为参数传送。
19
11.4 聊天室
11.4.5 完整程序代码清单
<UserInfo.asp>
这是第二个画面上方框架的来源网页,用来显示用户的名字、进入时间,IP地址。若按下 图案,会再度调用 <UserInfo.asp> 并传送一个值为 Yes的参数
Logout。一旦 <UserInfo.asp> 检查到 Logout变量的值为
Yes,就会初始化一个向大家说 Bye!Bye! 的字符串,然后存放在 Application("Msg1") 中并关闭窗口。
<%
If Request(“Logout”) =,Yes” Then?检查用户是否按下 EXIT 图案要离开聊天室
Application.Lock
For I = 21 To 2 Step -1
J = I - 1
Application("Msg"&I) = Application("Msg"&J)
Next
20
11.4 聊天室
11.4.5 完整程序代码清单
<UserInfo.asp>续
strHour = Hour(Time())
If Len(strHour) = 1 Then strHour = "0" & strHour
strMinute = Minute(Time())
If Len(strMinute) = 1 Then strMinute = "0" & strMinute
strTime = "<" & strHour & ":" & strMinute & ">"
strTmp = "<FONT COLOR='" & Session("UserColor") & "'>" &
"<IMG
SRC=?,& Session(”UserFig“) &,?>“& Session(”UserName“) &,说:
我要离开聊天室了,Bye! Bye! " & strTime & "</FONT>"
Application("Msg1") = strTmp
Application.Unlock
%>
<SCRIPT LANGUAGE="VBScript">
Parent.Window.Close?关闭父窗口
</SCRIPT>
21
11.4 聊天室
11.4.5 完整程序代码清单
<UserInfo.asp>续
<% End If %>
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;
CHARSET=GB2312">
</HEAD>
<BODY BGCOLOR="Navy" TEXT="White">
<IMG SRC="../images/fig1.jpg" ALIGN="Left">
<%= Session("UserName") %>于 <%= Now() %>进入快乐聊天室。
IP为 <%= Request.ServerVariables ("REMOTE_HOST") %>
<A HREF="UserInfo.asp?Logout=Yes"><IMG
SRC="../images/fig2.jpg"
BORDER="0" ALIGN="Center">
</A>?将图片设置为超级链接并传送 Logout变量的值为 Yes
</BODY>
</HTML>
22
11.4 聊天室
11.4.5 完整程序代码清单
<UserList.asp>
这是第二个画面中间左方框架的来源网页,在这个聊天室中,我们只加入在线名单的功能。事实上,您也可以加入在线传输的功能,会有越来越多的聊天室提供这项功能,有关在线传输的编写方法,在此不另作说明。
由于这个网页每 10秒钟会自动更新一次,闲置时间则为
30秒,所以一旦有新用户加入,会在 10秒钟之内反映出来,而一旦有人离线,会在 30秒钟之内反映出来。
<%
Dim RefreshTime,IdleTime,TotalUsers,OnlineUser(),Tmp(),Num,I,
NewUser,User,UserName
RefreshTime = 10 '设置网页自动更新时间为 10 秒
IdleTime = RefreshTime * 3 '设置闲置时间为自动更新时间的 3 倍
23
11.4 聊天室
11.4.5 完整程序代码清单
<UserList.asp>续
NewUser = Request("UserName")
Application.Lock
'OnlineUser 数组记录了所有联机到此网页的用户名称
'清点所有联机到此网页的用户,然后将目前的用户名称放入数组的最后
If Application(NewUser & "LastAccessTime") = Empty Then
If Application("TotalUsers") = Empty Then Application("TotalUsers") = 0
ReDim Tmp(Application("TotalUsers") + 1)
Num = 0
If Application("TotalUsers") > 0 Then
For I = LBOUND(Application("OnlineUser")) To
UBOUND(Application("OnlineUser"))
User = Application("OnlineUser")(I)
If User <> NewUser AND User <> Session("UserName") Then
Tmp(Num) = User
Num = Num + 1
Else
Application(User & "LastAccessTime") = Empty
24
11.4 聊天室
11.4.5 完整程序代码清单
<UserList.asp>续
End If
Next
End If
Session("UserName") = NewUser
Tmp(Num) = Session("UserName")
Application("TotalUsers") = Num + 1
ReDim Preserve Tmp(Application("TotalUsers"))
Application("OnlineUser") = Tmp
End If
'记录目前用户的最近存取时间
Application(Session("UserName") & "LastAccessTime") = Timer
检查所有联机到此网页的用户的最近存取时间,若与目前时间相差
30秒以上,表示结束联机
ReDim Tmp(Application("TotalUsers"))
Num = 0
For I = 0 To Application("TotalUsers") - 1
User = Application("OnlineUser")(I)
25
11.4 聊天室
11.4.5 完整程序代码清单
<UserList.asp>续
If (Timer - Application(User & "LastAccessTime")) < IdleTime Then
Tmp(Num) = User
Num = Num + 1
Else
Application(User & "LastAccessTime") = Empty
End If
Next
Num 表示目前在线人数,若与 Application(“TotalUsers”) 不同,表示中间有人断线
If Num <> Application("TotalUsers") Then
ReDim Preserve Tmp(Num)
Application("OnlineUser") = Tmp
Application("TotalUsers") = Num
End If
Application.UnLock
%>
<HTML>
26
11.4 聊天室
11.4.5 完整程序代码清单
<UserList.asp>续
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;
CHARSET=GB2312">
<META HTTP-EQUIV="Refresh" CONTENT="<%= RefreshTime %>,
URL=<%=Request.ServerVariables("PATH_INFO") %>?
UserName=<%= Request("UserName") %>">
</HEAD>
<BODY BGCOLOR="Black" TEXT="White">
目前在线人数,<%= Application("TotalUsers") %><BR>
<OL TYPE="1">
<% For I = 0 To (Application("TotalUsers") - 1)
Response.Write "<LI>" & Application("OnlineUser")(I) & "</LI>"
Next %>
</OL>
</BODY>
</HTML>
27
11.4 聊天室
11.4.5 完整程序代码清单
<ChatList.asp>
这是第二个画面中间右方框架的来源网页,用来显示存放聊天内容的 21个字符串变量 Application("Msg1")~
Application("Msg21")。此网页每 10秒钟会自动更新一次,换句话说,任何新的聊天内容都会在 10秒钟之内显示出来。
<% RefreshTime = 10 %>
<HTML>
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="<%= RefreshTime %>,
URL=ChatList.asp">
</HEAD>
<BODY BGCOLOR="Black">
<%
For I = 1 to 21
Response.Write Application("Msg"&I) & "<BR>"
Next
%>
</BODY>
</HTML>
设置网页自动更新时间,您可以视实际情况进行调整
28
11.4 聊天室
11.4.5 完整程序代码清单
<InputMsg.asp>
这是第二个画面下方框架的来源网页,提供一个单行文字方块让用户输入聊天内容,按下“发送”按钮之后会调用表单处理程序 <GetChat.asp>。
<HTML>
<BODY BGCOLOR="Navy" TEXT="White">
<FORM METHOD="POST" ACTION="GetChat.asp"
TARGET="RMiddle">
请输入谈话内容,<INPUT TYPE="TEXT" NAME="ChatMsg“
SIZE="50">
<INPUT TYPE="SUBMIT" VALUE="发送 ">
<INPUT TYPE="RESET" VALUE="清除 ">
</FORM>
</BODY>
</HTML>
29
11.4 聊天室
11.4.5 完整程序代码清单
<GetChat.asp>
当用户在 <InputMsg.asp> 输入聊天内容并按下“发送”时,表单处理程序 <GetChat.asp> 会先把 Application("Msg20") 存放到
Application("Msg21")中、把 Application("Msg19") 存放到
Application("Msg20")中,然后依此类推,直到把 Application("Msg1")
存放到 Application("Msg2")中,再去读取聊天内容,然后加上代表该用户的颜色及图案并存放在 Application("Msg1")中。
<%
Application.Lock
For I = 21 To 2 Step -1
J = I - 1
Application("Msg"&I) = Application("Msg"&J)
Next
'读取目前时间的小时与分钟
strHour = Hour(Time())
30
11.4 聊天室
11.4.5 完整程序代码清单
<GetChat.asp>(续 )
If Len(strHour) = 1 Then strHour = "0" & strHour
strMinute = Minute(Time())
If Len(strMinute) = 1 Then strMinute = "0" & strMinute
strTime = "<" & strHour & ":" & strMinute & ">"
'初始化一个向大家说再见的字符串,然后存放在 Application("Msg1")
strTmp = "<FONT COLOR='" & Session("UserColor") & "'>" & "<IMG
SRC='" & Session("UserFig") & "'>" & Session("UserName") & "说," &
Request("ChatMsg") & strTime & "</FONT>"
Application("Msg1") = strTmp
Application.Unlock
'将网页重新导向
Response.Redirect "ChatList.asp"
%>