书本最后是一个聊天室的小项目,我就将之作为java web学习小阶段的结束。书本上提供了完整的解决方案,实际上我参考的也不多,更多的还是自己思考设计的。过程之中发现我会的东西还是太少了,要做web后端必须也很熟悉前端才行。只能以我当前会的东西做一个简陋的聊天室了。
先看一下界面
登陆界面
聊天界面
再说一下逻辑
数据存储
name | content | scope |
---|---|---|
name | 当前用户的名字 | session |
usernum | 在线用户数量 | application |
username | 在线用户的名字集合 | application |
begin | 聊天记录的开始位置 | application |
end | 聊天记录的结束位置 | application |
talk1 | 1号位置 | application |
talkx | x号位置 | application |
在application中分配50个位置来存储聊天记录,分别为1-50,这相当于一个队列,FIFO,begin和end来记录队列的起始和结束。
流程
login.html,输入名字→check.jsp,将名字写入session和application→charroom.jsp,聊天界面。
聊天界面由3个frame构成,users.jsp负责显示在线用户列表,input.jsp负责用户输入信息,chats.jsp负责显示所有聊天记录。
input.jsp将用户输入的内容post给talk.jsp,talk.jsp负责将这些内容存到application中。
代码
login.html,登陆界面
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
// 从url 字符串中提取变量的值
function GetQueryValue(sorStr, panStr)
{
var vStr = "";
if (sorStr==null || sorStr=="" || panStr==null || panStr=="") return vStr;
sorStr = sorStr.toLowerCase();
panStr += "=";
var itmp = sorStr.indexOf(panStr);
if (itmp < 0) return vStr;
sorStr = sorStr.substr(itmp + panStr.length);
itmp = sorStr.indexOf("&");
if (itmp < 0) return sorStr;
else
{
sorStr = sorStr.substr(0, itmp);
return sorStr;
}
}
</script>
<body><br><br><br><br><center>
大侠请输入你的名号<br>
<form action="check.jsp" method="post">
<input type=text name="name">
<input type=submit value="开始">
</form>
<p id="alert"></p>
<script>
// 获得url字符串
var strGetQuery = document.location.search;
// 获得alert参数的值
var stylevalue = GetQueryValue(strGetQuery,'alert');
// 输出
document.getElementById("alert").innerHTML = stylevalue;
</script>
</center></body>
</html>
它可以接受alert参数,并将参数内容输出。
check.jsp,用来检查名字有效性
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
<%
request.setCharacterEncoding("utf-8");
//名字为空
String name = request.getParameter("name");
if(name == null || name == "") {
response.sendRedirect("login.html");
return;
}
//这是第一个用户
String strusernum = (String)application.getAttribute("usernum");
int usernum = 0;
if(strusernum != null) usernum = Integer.parseInt(strusernum);
if(strusernum == null || usernum == 0) {
application.setAttribute("username", name+";");
application.setAttribute("usernum", "1");
session.setAttribute("name", name);
response.sendRedirect("chatroom.jsp");
return;
}
//已有用户
String username = (String)application.getAttribute("username");
if(username.contains(name)) {
response.sendRedirect("login.html?alert=The_name_already_exists.");
return;
}
//新用户
++usernum;
application.setAttribute("username", username+name+";");
application.setAttribute("usernum", ""+usernum);
session.setAttribute("name", name);
response.sendRedirect("chatroom.jsp");
%>
</body>
</html>
chatroom.jsp,这是聊天室主界面
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>chat room</title>
</head>
<%response.setHeader("refresh","5");%>
<%if(request.getSession().getAttribute("name") == null){%>
<jsp:forward page="login.html"/>
<%}%>
<frameset cols="80%,*">
<frameset rows="70%,*" >
<frame src="chats.jsp" name="frachats" scrolling="no">
<frame src="input.jsp" scrolling="no">
</frameset>
<frame src="users.jsp" frameborder=0>
</frameset>
</html>
users.jsp,显示当前在线用户
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
<%String strusernum = (String)application.getAttribute("usernum");%>
共<%=strusernum%>位在线用户:
<hr>
<%
int usernum = Integer.parseInt(strusernum);
String username = (String)application.getAttribute("username");
String[] names = username.split(";");
for (int i=0; i<usernum; ++i) out.print(names[i]+"<br>");
%>
</body>
</html>
input.jsp,用户输入消息的界面
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<script language="javascript">
function chk()
{
if(content.txttalk.valu == "") return;
content.submit();
content.txttalk.value = "";
}
</script>
</head>
<body>
<p>你好,<%=(String)request.getSession().getAttribute("name")%></p>
<form name=content action="talk.jsp" method="post" target="frachats">
<textarea name="txttalk" rows="4" cols="100"></textarea>
<input type="button" value="发言" onclick="chk()">
<input name="" type="reset" value="清除">
</form>
</body>
</html>
chats.jsp,显示所有聊天记录的界面
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
function pagescrolltoend() {
var c = window.document.body.scrollHeight;
window.scroll(0,c);
}
function divscrolltoend() {
var div = document.getElementById('scrolldIV');
div.scrollTop = div.scrollHeight;
}
</script>
<body onload="divscrolltoend()">
<marquee>通知:本聊天室正式开放</marquee>
<br>
<br>
<div id="scrolldIV" style="overflow:scroll; height: 500px; width: auto; border: 1px solid #999;">
<%
String strbegin = (String)application.getAttribute("begin");
if(strbegin == null){
out.println("nothing");
return;
} else {
int begin = Integer.parseInt(strbegin);
int end = Integer.parseInt((String)application.getAttribute("end"));
if (begin < end) {
for (int i=begin; i<end; ++i) {
out.print((String)application.getAttribute("talk"+i)+"<br>");
}
}
else {
for(int i=begin; i<102; ++i) out.println((String)application.getAttribute("talk"+i)+"<br>");
for(int i=1; i<end; ++i) out.println((String)application.getAttribute("talk"+i)+"<br>");
}
}
%>
</div>
</body>
</html>
talk.jsp,处理用户消息,将其插入消息记录的页面
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
<%
request.setCharacterEncoding("utf-8");
String text = request.getParameter("txttalk");
if(text == null || text == "") {
response.sendRedirect("chats.jsp");
return;
}
String name = (String)session.getAttribute("name");
Date date=new Date();
SimpleDateFormat f=new SimpleDateFormat(" [HH:mm:ss]");
String time=f.format(date);
String strbegin = (String)application.getAttribute("begin");
text = name+time+"<br>"+text;
if(strbegin == null) {
application.setAttribute("begin", "1");
application.setAttribute("end", "2");
application.setAttribute("talk1", text);
} else {
String strend = (String)application.getAttribute("end");
int end = Integer.parseInt(strend);
int begin = Integer.parseInt(strbegin);
application.setAttribute("talk"+end, text);
++end;
if(end == 102) end = 1;
if(end == begin) {
++begin;
if(begin ==102) begin = 1;
application.setAttribute("begin", ""+begin);
}
application.setAttribute("end", ""+end);
}
response.sendRedirect("chats.jsp");
%>
</body>
</html>
bugs
信息的实时显示,通过设定页面自动更新response.setHeader("refresh","5");
来实现,没办法,前端的东西不懂,只能这样实现了。
重要问题!用户关闭浏览器或因其他原因退出聊天室的时候,服务器是没响应的!预期解决方法:将session的有效期设置为一个较小的值,并为session的销毁设定一个监听器,session销毁时,将application中存储的此用户删去。
关于session和监听器的内容,后面的文章再说。在线用户删除功能就不实现了吧。