效果
根据session判断是否是一个用户,所以用了两个浏览器来测试,效果是自己加的js效果
login.jsp
<%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 10:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
</head>
<body>
<h1 style="color:cornflowerblue">登录</h1>
<form id="submitForm" name="submitForm" action="check.jsp" method="post">
<table>
<tr>
<td>账号：</td>
<td><label>
<input type="text" name="username">
</label></td>
</tr>
<tr>
<td>密码：</td>
<td><label>
<input type="password" name="password">
</label></td>
</tr>
</table>
<br>
<input type="submit" value="登录" style="color:lightblue">
</form>
<form action="register.jsp">
<input type="submit" value="注册" style="color:lightblue">
</form>
</body>
</html>
resister.jsp
注册页面
<%@ page import="top.sehnsucht.chat.pojo.User" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 14:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
</head>
<body>
<form id="submitForm" name="submitForm" action="storage.jsp" method="post">
<table>
<tr>
<td>账号：</td>
<td><label>
<input type="text" name="username">
</label></td>
</tr>
<tr>
<td>密码：</td>
<td><label>
<input type="password" name="password">
</label></td>
</tr>
</table>
<br>
<input type="submit" value="注册" style="color:lightblue">
</form>
</body>
</html>
storage.jsp
我并没有将数据存入数据库,反正老师没有要求,逃…
我直接将user名字存到session中,以便后来取用,然后用application存总体的名字,(我看到网上有直接用这里的字段来判断有多少个人在线的,但是我用了监听器,因为上次写过了直接搬过来)
<%@ page import="top.sehnsucht.chat.pojo.User" %>
<%@ page import="top.sehnsucht.chat.Utils" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 14:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>asd</title>
</head>
<body>
注册成功
<a href="login.jsp">点击跳转</a>
<%
System.out.println();
User user = new User(request.getParameter("username"), request.getParameter("password"));
session.setAttribute("user", user.getUserName());
String users = (String) application.getAttribute("users");
if (users == null) {
application.setAttribute("users",user.getUserName());
} else {
application.setAttribute("users",users + ',' + user.getUserName());
}
Utils.users.add(user);
%>
</body>
</html>
跳转回到登录页面
然后继续登录
check.jsp
进行判断,如果正确就跳转到index,错误应该提示错误的,但是我直接跳转,就偷懒了
<%@ page import="java.sql.ResultSet" %>
<%@ page import="top.sehnsucht.chat.Utils" %>
<%@ page import="top.sehnsucht.chat.pojo.User" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/9/17
Time: 10:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Check</title>
</head>
<body>
<%
try {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("username");
String password = request.getParameter("password");
for (User user : Utils.users) {
if (user.getUserName().equals(name) && user.getPasswd().equals(password)) {
request.getRequestDispatcher("index.jsp").forward(request, response);
}
}
request.getRequestDispatcher("login.jsp").forward(request, response);
} catch (Exception e) {
System.out.println("出现错误");
System.out.println(e);
}
%>
</body>
</html>
index.jsp
聊天室首页
就开始展示那个页面
放了几个特效
然后嵌入了三个页面,灵感是从参考(最下面的文章)中获得的
<%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 10:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>主页</title>
<style>
#f1 {
width: 20%;
height: 500px;
}
#f2 {
width: 79%;
height: 500px;
}
#f3 {
width: 100%;
}
</style>
</head>
<body>
<div id="all">
<div style="display: inline">
<div id="first">
<div></div>
<iframe id="f1" src="${pageContext.request.contextPath}/chat/list.jsp"></iframe>
<iframe id="f2" src="${pageContext.request.contextPath}/chat/msg.jsp"></iframe>
</div>
</div>
<iframe id="f3" src="${pageContext.request.contextPath}/chat/send.jsp"></iframe>
</div>
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>
<script src='https://api.vvhan.com/api/meihua'></script>
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
</body>
</html>
list.jsp
左边的用来显示登录人数和在线用户的
要减因为IDEA会默认自己打开命令行
<%@ page import="top.sehnsucht.OnlineCount" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 11:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
#img1{
height: 200px;
width: 280px;
}
</style>
</head>
<body>
<%
String users = (String) application.getAttribute("users");
if (OnlineCount.getOnlineNum() <= 2) {
out.println("现在在线人数是0");
}else {
out.println("现在在线人数是" + (OnlineCount.getOnlineNum() - 2));
}
out.print("现在在线的有" + users);
response.setHeader("refresh", "3");
%>
<img src="huoying.gif" alt="" id="img1">
</body>
</html>
msg.jsp
显示聊天数据用
<%@ page import="java.util.List" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 10:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
response.setHeader("refresh", "1");
String msgs = (String) application.getAttribute("msgs");
try {
out.print(msgs);
} catch (Exception e) {
}
%>
</body>
</html>
send.jsp
发送信息的部分,思路就是在原本基础上再加,然后换行
看懂这行就懂了
application.setAttribute("msgs", msgs + "<br/>" + user + "发送信息: " + message);
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %><%--
Created by IntelliJ IDEA.
User: windows
Date: 2021/10/15
Time: 11:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="" method="post">
<div align="right">
<%=session.getAttribute("user") %>：
发送消息:
<input type="text" name="message" size="50"/><br>
<input type="submit" value="发送" style="color: cornflowerblue"/>
</div>
</form>
<%
String user = (String) session.getAttribute("user");
request.setCharacterEncoding("utf-8");
String message = request.getParameter("message");
String msgs = (String) application.getAttribute("msgs");
if (msgs == null) {
msgs = "";
}
if (message != null && !message.equals("")) {
application.setAttribute("msgs", msgs + "<br/>" + user + "发送信息: " + message);
}
%>
</body>
</html>
最后,代码还有部分没有放,例如实体类user,Utils和监听器,以及web.xml的监听注册,因为是和其他混在一起的,就不放上来了
可改进
失败页面,自动跳转页面,数据库存储用户和聊天数据,ajax异步请求聊天记录,判断重名,指定发送,拦截器
参考:https://blog.csdn.net/weixin_42878211/article/details/104841406