搜索
您的当前位置：首页正文

jsp 超级简陋的聊天室

来源：欧得旅游网

效果

根据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异步请求聊天记录,判断重名,指定发送,拦截器

参考:

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Copyright © 2019- ovod.cn版权所有

Top