现在剩下JSP页面的HTML代码和JS代码了。直接贴代码,哪天用到了可以回头看看。
chat.js文件,用到了Prototype.js
/**
*
ajax
聊天室
js
代码
*
聊天室
version
1.0
*
2007-6
*/
var
xhrGetMessages=
null
;
var
xhrListUsersInRoom=
null
;
var
defaultInterval=2000;
var
getMessagesInterval=2000;
var
getUsersInterval=4000;
//
最大延迟时间
var
maxInterval=4*1000;
var
delayEnabled=
false
;
var
delay=2;
var
getMessageUrl =
"/chatroom/getMessage"
;
var
getUsersUrl =
"/chatroom/getUserList"
;
var
sendMessageUrl=
"/chatroom/sendMessage"
;
//
保存上一次聊天信息
,
防止恶意发信息
var
oldSendMsg=
""
;
//
初始化
function
init()
{
setTimeout
(
"getMessages()"
, 2000);
setTimeout
(
"listUsers()"
, 3000);
}
//
发送聊天信息
function
sendMessage() {
var
inputText=fullTrim($(
"userInput"
).value);
if
(inputText !=
""
&& oldSendMsg!=inputText) {
oldSendMsg=inputText;
var
toSomebody=
""
+$(
'user'
).value;
if
($(
'user'
).value==
"all"
)toSomebody=
"
所有人
"
;
$(
"content"
).innerHTML+=
"
我对
"
+toSomebody+
"
说
: "
+inputText+
"<br>"
;
$(
'sendButton'
).disabled=
true
;
//var
url
=
"sendMessage";
var
params=
"to="
+$(
'user'
).value+
"&content="
+ inputText;
$(
"userInput"
).value=
""
;
var
myAjax =
new
Ajax.Updater({success:
'tips'
},sendMessageUrl,{method:
'get'
,parameters: params,onFailure: errorReport});
$(
'sendButton'
).disabled=
false
;
}
else
{
alert
(
"
请不要连续发送相同信息
"
);
}
return
false
;
}
//
错误提示
function
errorReport()
{
alert
(
'Sorry. There was an error.'
);
}
function
selectFont(elem)
{
$(
'content'
).style.fontSize=elem.value+
"px"
;
}
function
selectColor(elem)
{
$(
'content'
).style.color=elem.value;
}
//
获取聊天信息
function
getMessages() {
if
(xhrGetMessages ==
null
|| xhrGetMessages.readyState == 0 ||
xhrGetMessages.readyState == 4) {
try
{
if
(
window
.XMLHttpRequest){
xhrGetMessages =
new
XMLHttpRequest();
}
else
{
xhrGetMessages =
new
ActiveXObject(
'Microsoft.XMLHTTP'
);
}
xhrGetMessages.onreadystatechange = getMessagesHandler;
xhrGetMessages.
open
(
"get"
, getMessageUrl,
true
);
xhrGetMessages.send(
null
);
}
catch
(e) {
alert
(
"Error in getMessages() - "
+ e.message);
return
;
}
}
timerGetMessages =
setTimeout
(
"getMessages()"
, getMessagesInterval);
}
//
聊天信息处理方法
function
getMessagesHandler() {
var
newHTML =
""
;
if
(xhrGetMessages.readyState == 4) {
if
(xhrGetMessages.
status
== 200) {
msgDOM = xhrGetMessages.responseXML;
root = msgDOM.getElementsByTagName(
"messages"
)[0];
messages = root.getElementsByTagName(
"message"
);
for
(
var
i = 0; i < messages.
length
; i++) {
message = messages[i];
from = message.getElementsByTagName(
"from"
)[0].firstChild.nodeValue;
date = message.getElementsByTagName(
"date"
)[0].firstChild.nodeValue;
msg = message.getElementsByTagName(
"content"
)[0].firstChild.nodeValue;
newHTML +=
"["
+ date +
"] "
+ from +
"
说
: "
+ msg +
"<br/>"
;
}
var
content = $(
'content'
);
if
(newHTML !=
""
) {
content.innerHTML += newHTML;
}
if
(delayEnabled)
{
getMessagesInterval = getMessagesInterval<maxInterval ? getMessagesInterval*delay : defaultInterval;
}
if
($(
'autoScrool'
).checked==
true
)content.scrollTop = 1000000;
}
else
{
alert
(
"Error in getMessagesHandler() - "
+ xhrGetMessages.
status
);
}
}
}
//
清空聊天内容
function
clearContent() {
$(
'content'
).innerHTML=
""
;
}
//
清除空格
function
fullTrim(inString) {
return
(inString.replace(
/^/s*(.*/S|.*)/s*$/
,
'$1'
));
}
//
获取用户列表
function
listUsers() {
if
(xhrListUsersInRoom ==
null
|| xhrListUsersInRoom.readyState == 0 ||
xhrListUsersInRoom.readyState == 4) {
try
{
if
(
window
.XMLHttpRequest){
xhrListUsersInRoom =
new
XMLHttpRequest();
}
else
{
xhrListUsersInRoom =
new
ActiveXObject(
'Microsoft.XMLHTTP'
);
}
xhrListUsersInRoom.onreadystatechange = listUsersInRoomHandler;
xhrListUsersInRoom.
open
(
"get"
, getUsersUrl,
true
);
xhrListUsersInRoom.send(
null
);
}
catch
(e) {
alert
(
"Error in listUsersInRoom() - "
+ e.message);
}
}
setTimeout
(
"listUsers()"
, getUsersInterval);
}
//
用户列表处理方法
function
listUsersInRoomHandler() {
var
newHTML =
""
;
var
userHTML=
"<select id='user' name='user'><option value='all'>
所有人
</option>"
;
if
(xhrListUsersInRoom.readyState == 4) {
if
(xhrListUsersInRoom.
status
== 200) {
var
msgDOM = xhrListUsersInRoom.responseXML;
var
root = msgDOM.getElementsByTagName(
"users"
)[0];
var
users = root.getElementsByTagName(
"user"
);
for
(
var
i = 0; i < users.
length
; i++) {
var
name
=users[i].getAttribute(
"name"
);
newHTML +=
name
+
"<br/>"
;
userHTML+=
"<option value='"
+
name
+
"'>"
+
name
+
"</option>"
;
}
if
(newHTML!=
""
) {
$(
"userList"
).innerHTML = newHTML;
$(
"to"
).innerHTML=userHTML+
"</select>"
;
}
else
if
(delayEnabled)
{
getUsersInterval = getUsersInterval<maxInterval ? getUsersInterval*delay : defaultInterval;
}
}
/*
else
{
alert("Error
in
listUsersInRoomHandler()
-
"
+
xhrListUsersInRoom.status);
}
//*/
}
}
Event.observe(
window
,
'load'
, init,
false
);
聊天室的外观很差,下面这个JSP文件也只是实现功能效果而已。
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>
${room.name}--
聊天室
</
title
>
<
link
href
=
"css/chat.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"js/prototype.js"
language
=
"JavaScript"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/chat.js"
></
script
>
</
head
>
<
body
onunload
=
"levae()"
>
<
table
width
=
"100%"
height
=
"281"
border
=
"1"
cellspacing
=
"0"
bordercolor
=
"#FFFFFF"
>
<
tr
>
<
td
height
=
"25"
bordercolor
=
"#FFFFFF"
bgcolor
=
"#FFFFFF"
></
td
>
</
tr
>
<
tr
>
<
td
valign
=
"top"
>
<
table
width
=
"80%"
height
=
"376"
border
=
"1"
align
=
"center"
cellspacing
=
"0"
bordercolor
=
"#4A83EA"
>
<
tr
bordercolor
=
"#FFFFFF"
bgcolor
=
"#4A83EA"
>
<
td
height
=
"24"
colspan
=
"3"
style
=
"color: #FFFFFF;text-align:center;"
>
欢迎来到
~~${room.name}~~
</
td
>
</
tr
>
<
tr
>
<
td
height
=
"36"
colspan
=
"3"
bgcolor
=
"#DDE8FB"
>
<
div
align
=
"center"
>
${room.notice}
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
width
=
"75%"
height
=
"246"
colspan
=
"2"
bordercolor
=
"#4A83EA"
>
<
div
id
=
"content"
style
=
"overflow:scroll;width:100%;height:100%;"
>
</
div
>
</
td
>
<
td
width
=
"19%"
rowspan
=
"3"
bgcolor
=
"#DDE8FB"
>
<
div
id
=
"userList"
style
=
"overflow:scroll;width:100%;height:100%;"
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
height
=
"38"
bordercolor
=
"#DDE8FB"
bgcolor
=
"#DDE8FB"
>
字体
<
select
onchange
=
'selectFont(this)'
>
<
script
type
=
"text/javascript"
>
<!--
for
(
var
i=10;i<=34;i+=2)
document.write(
"<option value='"
+i+
"' >"
+i+
"</option>"
);
//-->
</
script
>
</
select
>
颜色
<
select
onchange
=
'selectColor(this)'
>
<%@
include
file
=
"inc/color_options.inc"
%>
</
select
>
<
input
type
=
"checkbox"
id
=
"autoScrool"
onclick
=
"checkScroll(this)"
checked
/>
自动滚屏
</
td
>
<
td
width
=
"8%"
bordercolor
=
"#DDE8FB"
bgcolor
=
"#DDE8FB"
>
<
div
align
=
"right"
><
input
type
=
"button"
name
=
"clear"
value
=
"
清屏
"
onclick
=
"clearContent()"
></
div
>
</
td
>
</
tr
>
<
tr
>
<
td
height
=
"30"
colspan
=
"2"
bordercolor
=
"#4A83EA"
bgcolor
=
"#DDE8FB"
>
你对
<
span
id
=
"to"
>
<
select
id
=
"user"
name
=
"user"
>
<
option
value
=
"all"
>
所有人
</
option
>
</
select
>
</
span
>
说:
<
input
type
=
"text"
style
=
"width:400px;background-color: #DDE8FB;"
type
=
"text"
id
=
"userInput"
name
=
"userInput"
onkeyDown
=
"javascript:if(event.keyCode==13)return sendMessage();"
/>
<
input
name
=
"sendButton"
id
=
"sendButton"
type
=
"button"
onclick
=
"sendMessage();"
value
=
"
发送
"
>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
</
table
>
</
body
>
<
div
id
=
"tips"
style
=
"display:none;"
></
div
>
</
html
>
其中包含color_options.inc文件,该文件内容如下:
<
option
value
=
"#f0f8ff"
style
=
"color:#f0f8ff;"
>
Alice Blue
</
option
>
<
option
value
=
"#faebd7"
style
=
"color:#faebd7;"
>
Antique White
</
option
>
......
登录界面也只是一个form表单而已。
<
form
id
=
"form_"
method
=
"post"
action
=
"/chatroom/login"
>
<
select
id
=
"roomName"
name
=
"roomName"
>
<
c:forEach
items
=
"${rooms}"var="room">
<
option
value
=
"${room.name}">${room.name}</option>
</
c:forEach
>
</
select
>
<
br
>
<
input
type
=
"text"
name
=
"userName"
value
=
""
/>
<
input
type
=
"submit"
value
=
"
进入聊天室
"
/>
</
form
>
这样基本把东西贴完了。下面说说功能扩展及其他。
对于判断用户离线使用HttpSessionBindingListener接口,其实不是十分可靠,可以在聊天室页面的onunload函数增加向服务台发出离开的信息。此外,也可以写一个后台守护进程,不断地检测用户的最后一次请求时间,若超时,则从用户列表中删除信息。
聊天室只有公聊私聊、改变字体大小和颜色、切换滚屏、清除屏幕等几个小功能。其实还可以增加屏蔽某人发言功能,实现起来也不难,但也要改最前面提到的三个类。仿照博客左边的这个聊天室,还可以增加一个休眠功能,直接在客户端的JS代码动手脚即可。
还是仿照博客左边的这个聊天室,增加发表情、图片、音乐等,实现起来也不会太难,主要是客户端写JS代码而已。当然,这个“而已”也是说说而已,暂时没兴趣玩这个了。
写了这么多,其实不是为了写什么教程入门文章,仅仅是想把自己做的一点小东西保存一下,以防哪天想要却找不到。好,现在就把全部代码上传。