先来了解一下JSP四大作用域吧！
page里的变量没法从index.jsp传递到test.jsp。只要页面跳转了，它们就不见了。
request里的变量可以跨越forward前后的两页。但是只要刷新页面，它们就重新计算了。
session的变量一直在累加，开始还看不出区别，只要关闭浏览器，再次重启浏览器访问这页，session里的变量就重新计算了。
application里的变量一直在累加，除非你重启tomcat，否则它会一直变大。
jsp实现简单的在线聊天，可以利用jsp的作用域，将对话内容存在application里，session用来验证是否是当前用户，request用来表单传值。
先定义一个实体类User来存放用户的用户名和QQ。
JavaBean：package com.xmj.entiry;
public class User {
private String name;
private String qq;
public User() {}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getQq() {
return qq;
}
public void setQq(String qq) {
this.qq = qq;
}
public User(String name, String qq) {
super();
this.name = name;
this.qq = qq;
}
}
login.jsp
login界面借助了layui框架
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
check.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="com.xmj.entiry.User"%>
Insert title here
<%
request.setCharacterEncoding("utf-8");
//获取login.jsp表单中提交过来的值
String userName = request.getParameter("username");
String userQQ = request.getParameter("qq");
//从application作用域中取出用户列表
List users = (List) application.getAttribute("users");
//创建一个User存当前登录用户的信息
User theUser = new User();
theUser.setName(userName);
theUser.setQq(userQQ);
//如果没有用户列表，进行实例化
if(users == null){
users = new ArrayList();
}
//从application作用域中获取群聊内容，没有实例化就实例化
List msgs = (List) application.getAttribute("msgs");
if(msgs == null){
msgs = new ArrayList();
}
List date = (List) application.getAttribute("date");
if(date == null){
date = new ArrayList();
}
List allQQ = (List) application.getAttribute("allQQ");
if(allQQ == null){
allQQ = new ArrayList();
}
List username = (List) application.getAttribute("username");
if(username == null){
username = new ArrayList();
}
for(User user:users){
//查看当前列表中是否包含当前得登录用户
if(userQQ.equals(user.getQq())){
//包含登入用户，设置提醒信息
request.setAttribute("msg", theUser.getName()+"已登录，请重新登录！");
request.getRequestDispatcher("login.jsp").forward(request,response);
return;
}
}
//欢迎新用户
Date time = new Date();
SimpleDateFormat dateFormat= new SimpleDateFormat("MM月dd日 hh:mm");
int userNum=users.size();
users.add(userNum,theUser);
int msgNum=msgs.size();
msgs.add(msgNum,"欢迎"+userName+"加入聊天室！");
date.add(msgNum,dateFormat.format(time));
System.out.println(dateFormat.format(time));
username.add(msgNum,"管理员");
allQQ.add(msgNum,"257970475");
application.setAttribute("users", users);
application.setAttribute("msgs", msgs);
application.setAttribute("date", date);
application.setAttribute("username", username);
application.setAttribute("allQQ", allQQ);
session.setAttribute("myName", userName);
session.setAttribute("myQQ", userQQ);
response.sendRedirect("chatroom.jsp");
%>
chatroom.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.xmj.entiry.User"%>
聊天室
冰咖啡的聊天室
<%
String myQQ,myName;
request.setCharacterEncoding("utf-8");
if(session.getAttribute("myName")!=null){
//返回类型是object 需要转为字符串
myName = session.getAttribute("myName").toString();
myQQ = session.getAttribute("myQQ").toString();
System.out.println(myName);
}
//如果没有登录则跳转至login，并传入提示信息
else{
request.setAttribute("msg", "请先登录！");
request.getRequestDispatcher("login.jsp").forward(request,response);
return;
}
//从application作用域中取出信息，如果没有，就进行实例化
List users = (List) application.getAttribute("users");
if(users == null){
users = new ArrayList();
}
List msgs = (List) application.getAttribute("msgs");
if(msgs == null){
msgs = new ArrayList();
}
List date = (List) application.getAttribute("date");
if(date == null){
date = new ArrayList();
}
List allQQ = (List) application.getAttribute("allQQ");
if(allQQ == null){
allQQ = new ArrayList();
}
List username = (List) application.getAttribute("username");
if(username == null){
username = new ArrayList();
}
%>
<%--遍历msgs群聊内容 --%>
<%for(int i=0;i
<%--判断是不是当前用户，是的话就让消息在右边 --%>
:5px;" ><%=username.get(i) %>
<%=date.get(i) %>
<%--头像根据QQ号码来改变 --%>
&s=640);background-size:cover; float: <%=(myQQ.equals(allQQ.get(i))?"right":"left")%>;">
;" contenteditable="true"><%=msgs.get(i) %>
<%} %>
sendMsg.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="com.xmj.entiry.User"%>
Insert title here
<%
request.setCharacterEncoding("utf-8");
//获取发送的消息内容
String theMsg = request.getParameter("theMsg").toString();
//从session中获取用户信息，也就是当前用户
String myName = session.getAttribute("myName").toString();
String myQQ = session.getAttribute("myQQ").toString();
//从application作用域中取出信息，如果没有，就进行实例化
List msgs = (List) application.getAttribute("msgs");
if(msgs == null){
msgs = new ArrayList();
}
List date = (List) application.getAttribute("date");
if(date == null){
date = new ArrayList();
}
List allQQ = (List) application.getAttribute("allQQ");
if(allQQ == null){
allQQ = new ArrayList();
}
List username = (List) application.getAttribute("username");
if(username == null){
username = new ArrayList();
}
//将发送消息内容，用户名，时间等信息放进application,最后返回chatroom聊天室
Date time = new Date();
SimpleDateFormat dateFormat= new SimpleDateFormat("MM月dd日 hh:mm");
int msgNum=msgs.size();
msgs.add(msgNum,theMsg);
date.add(msgNum,dateFormat.format(time));
System.out.println(dateFormat.format(time));
username.add(msgNum,myName);
allQQ.add(msgNum,myQQ);
application.setAttribute("msgs", msgs);
application.setAttribute("date", date);
application.setAttribute("username", username);
application.setAttribute("allQQ", allQQ);
response.sendRedirect("chatroom.jsp");
%>
index.css
.
container {
width: 420px;
height: 320px;
min-height: 320px;
max-height: 320px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
padding: 20px;
z-index: 130;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 3px 18px rgba(11,135,217, .3);
font-size: 16px;
}
.close {
background-color: white;
border: none;
font-size: 18px;
margin-left: 410px;
margin-top: -10px;
}
.layui-input {
border-radius: 5px;
width: 300px;
height: 40px;
font-size: 15px;
}
.layui-form-item {
margin-left: -20px;
}
#logoid {
margin-top: -16px;
padding-left: 150px;
padding-bottom: 15px;
}
.layui-btn {
margin-left: -50px;
border-radius: 5px;
width: 350px;
height: 40px;
font-size: 15px;
}
.verity {
width: 120px;
}
.font-set {
font-size: 13px;
text-decoration: none;
margin-left: 120px;
}
a:hover {
text-decoration: underline;
}
``
chatroom.css
@charset "UTF-8";
body {
background: black;
}
* {
margin: 0;
padding: 0;
}
.waper {
width: 500px;
height: 850px;
margin: 10px auto;
background: rgba(241,241,241,1);
border: 1px grey solid;
border-radius: 20px;
box-shadow: 0px 0px 100px 10px rgba(0,209,193, 1);
}
#top {
width: 100% !important;
height: 70px !important;
margin: 0 auto !important;
font-size: 20px;
font-weight: bold;
color: rgb(72,175,252, 190);
text-align: center;
background: white;
border-radius: 20px;
}
.avatar {
width: 60px;
height: 60px;
background: url(http://q.qlogo.cn/headimg_dl?dst_uin=1966447213&spec=640&img_type=jpg);
background-size: cover;
border-radius: 50%;
float: left;
margin: 10px;
position: relative;
}
.send {
width: 100%;
height: 50px;
padding: 10px;
}
.inputSend {
border-radius: 20px;
margin-right: 10px;
padding: 0;
width: 80%;
height: 90%;
border: 0;
font-size: 20px;
}
.main-msg {
width: 100%;
height: 710px;
}
.msg {
background: white;
float: left;
max-width: 300px;
height: auto;
border-radius: 20px;
margin: 20px;
padding: 10px;
border: 0;
font-size: 18px;
}
.allmsg {
width: 100%;
}
.info-text {
font-size: 15px;
margin-left: 10px;
position: absolute;
bottom: -25px;
}
.allmsg-item {
display: block;
margin-top: 10px;
width: 100%;
}
.time {
clear: both;
text-align: center;
}
``
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）