JSP简单实现仿QQ群聊

冰咖啡iii

已于 2022-05-29 17:17:05 修改

阅读量2.8k

点赞数 23

文章标签： jsp html css

于 2021-11-19 11:28:35 首次发布

本文链接：https://blog.csdn.net/qq_25015861/article/details/121418411

版权

先来了解一下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"%>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="lib/layui-v2.6.8/layui/css/layui.css">
  <link rel="stylesheet" href="lib/index.css">
  <style type="text/css">
  </style>
</head>

<body>
  <form name="myForm" class="layui-form" action="check.jsp" onsubmit="return validateForm()" method="post">
    <div class="container">
      <div class="layui-form-mid layui-word-aux" style="margin: 0 auto !important!">
        <img id="logoid"
          src="https://th.bing.com/th/id/OIP.ngCHNVVT7hcjDFSkesNRKwHaHa?w=165&h=180&c=7&r=0&o=5&dpr=1.38&pid=1.7"
          height="65">
      </div>
      <%
     	  //获取提示信息，若为null则赋为空串
          String msg = (String) request.getAttribute("msg");
          if(msg == null){
              msg = " ";
          }
       %>
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" id="password" placeholder="请输入密码123456"
            autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">QQ</label>
        <div class="layui-input-inline">
          <input type="text" name="qq" required lay-verify="required" placeholder="请输入你的QQ号码" autocomplete="off"
            class="layui-input verity" style="width: 300px;">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn"  lay-submit lay-filter="formDemo">登录</button>
        </div>
      </div>
           <h2 style="color:red;text-align:center"><%=msg %></h2>
    </div>
  </form>
  
  <script type="text/javascript" src="lib/layui/layui.js"></script>
  <script> 
    function validateForm() {
      var pwd = document.forms["myForm"]["password"].value;
      if (pwd != "123456") {
        alert('密码错误！');
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

在这里插入图片描述

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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
 <%
          request.setCharacterEncoding("utf-8");
          //获取login.jsp表单中提交过来的值
          String userName = request.getParameter("username");
          String userQQ = request.getParameter("qq");
          //从application作用域中取出用户列表
          List<User> users = (List<User>) application.getAttribute("users");
          //创建一个User存当前登录用户的信息
          User theUser = new User();
			theUser.setName(userName);
			theUser.setQq(userQQ);
          //如果没有用户列表，进行实例化
          if(users == null){
              users = new ArrayList<User>();
          }
          
          //从application作用域中获取群聊内容，没有实例化就实例化
          List<String> msgs = (List<String>) application.getAttribute("msgs");
          if(msgs == null){
              msgs = new ArrayList<String>();
          }
          List<String> date = (List<String>) application.getAttribute("date");
          if(date == null){
        	  date = new ArrayList<String>();
          }
          List<String> allQQ = (List<String>) application.getAttribute("allQQ");
          if(allQQ == null){
        	  allQQ = new ArrayList<String>();
          }
          List<String> username = (List<String>) application.getAttribute("username");
          if(username == null){
        	  username = new ArrayList<String>();
          }
          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");
       %>
</body>
</html>

chatroom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="java.util.*"%>
    <%@ page import="com.xmj.entiry.User"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>聊天室</title>
  <link rel="stylesheet" href="lib/layui-v2.6.8/layui/css/layui.css">
  <link rel="stylesheet" href="lib/chatroom.css"> 
</head>
<body>
    <div class="waper">
        <div class="layui-carousel" id="top">
             <div id="top">
            <br>
           <p>冰咖啡的聊天室</p>
        </div>
        </div>
        <div class="main-msg" style="overflow:auto;">
        <%
        	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<User> users = (List<User>) application.getAttribute("users");
	          if(users == null){
	              users = new ArrayList<User>();
	          }
	          List<String> msgs = (List<String>) application.getAttribute("msgs");
	          if(msgs == null){
	              msgs = new ArrayList<String>();
	          }
	          List<String> date = (List<String>) application.getAttribute("date");
	          if(date == null){
	        	  date = new ArrayList<String>();
	          }
	          List<String> allQQ = (List<String>) application.getAttribute("allQQ");
	          if(allQQ == null){
	        	  allQQ = new ArrayList<String>();
	          }
	          List<String> username = (List<String>) application.getAttribute("username");
	          if(username == null){
	        	  username = new ArrayList<String>();
	          }
			%>
			<%--遍历msgs群聊内容 --%>
      		<%for(int i=0;i<msgs.size();i++){ %>
      		<div class="allmsg">
                <div class="allmsg-item">
                <%--判断是不是当前用户，是的话就让消息在右边 --%>
                <div style="<%=(myQQ.equals(allQQ.get(i))?"right":"left")%>:5px;" class="info-text"><%=username.get(i) %></div>
                 <div class="time"><%=date.get(i) %></div>
                 <%--头像根据QQ号码来改变 --%>
                    <div class="avatar" style="background: url(https://q1.qlogo.cn/g?b=qq&nk=<%=allQQ.get(i) %>&s=640);background-size:cover; float: <%=(myQQ.equals(allQQ.get(i))?"right":"left")%>;"></div>
                    <div class="msg" style="float: <%=(myQQ.equals(allQQ.get(i))?"right":"left")%>;" contenteditable="true"><%=msgs.get(i) %></div>
                </div>
                <%} %>
               
            </div>
        </div>
        <div class="send">
        <form action="sendMsg.jsp" method="post">
        		<%--发送消息，传值给sendMsg.jsp --%>
            <input class="inputSend" type="text" name="theMsg" placeholder="说点儿什么吧~~">
            <input type="submit" class="layui-btn layui-btn-normal layui-btn-radius" value="发送"></input>
        </form>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#top'
                , width: '100%' //设置容器宽度
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>

</html>

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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
 <%
          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<String> msgs = (List<String>) application.getAttribute("msgs");
          if(msgs == null){
              msgs = new ArrayList<String>();
          }
          List<String> date = (List<String>) application.getAttribute("date");
          if(date == null){
        	  date = new ArrayList<String>();
          }
          List<String> allQQ = (List<String>) application.getAttribute("allQQ");
          if(allQQ == null){
        	  allQQ = new ArrayList<String>();
          }
          List<String> username = (List<String>) application.getAttribute("username");
          if(username == null){
        	  username = new ArrayList<String>();
          }
		  //将发送消息内容，用户名，时间等信息放进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");
       %>
</body>
</html>

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;
            /* border: 1px rgba(39,35   ,53,0.5) solid; */
        }

        .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%;
            /* background: rgba(110, 116, 127, 0.1); */
        }

        .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;
        }