一个不连接数据库的聊天室的设计

1.用户登录
2.在线用户列表显示
3.用户群聊
4.单独与某一个用户聊
5.消息日志
点聊天记录要会显示在聊天内容中,希望解释详细些,代码简单些,新手。

图片图片

3个回答

要用java swing

我做了大体和你描述一样的内容,通过jsp+html实现的页面展示
登录

 <!DOCTYPE html>
<html>
  <head>
    <title>login.html</title>
    <meta charset=utf-8>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <form name="f1" id="f1" action="/JavaWeb_01/StudentLogin" method="post">
      <table>
        <tr style="text-align: center;">
          <td colspan="2">学生登录</td>
        </tr>
        <tr>
          <td>用户名:</td>
          <td><input type="text" name="user" id="login"></td>
        </tr>
        <tr>
          <td> 密  码 : </td>
          <td><input type="password" name="password" id="password"></td>
        </tr> 
        <tr>
          <td>验证码:</td>
          <td><input type="text" name="code" id="code">
                <img alt="" src="/JavaWeb_01/LoginCode" id="img"/>
                <a href="/JavaWeb_01/html/login.html">看不清</a>
          </td>
        </tr> 
        <tr style="text-align: center;">
          <td colspan="2"><input type="submit" value=" 登 录 "></td>
        </tr>
      </table>
    </form>
    <script type="text/javascript">
        var oimg = Document.getElementById("img");
        function change(){
            oimg.src ="/JavaWeb_01/LoginCode?"+Math.random(1000000);
        }
    </script>
  </body>
</html>

注册

 <!DOCTYPE html>
<html>
  <head>
    <title>studentMessage.html</title>
    <meta charset=utf-8>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <form name="f1" id="f1" action="/JavaWeb_01/Sumbit" method="post" >
      <table>
        <tr style="text-align: center;">
          <td colspan="2">学生账户注册</td>
        </tr>
        <tr>
          <td>姓名</td>
          <td><input type="text" name="name" ></td>
        </tr>
        <tr>
          <td>年龄</td>
          <td><input type="text" name="age" ></td>
        </tr> 
        <tr>
          <td>性别</td>
          <td>
            <select name="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
          </td>
        </tr> 
        <tr>
          <td>班级</td>
          <td>
            <select name="class">
                <option value="J131">J131</option>
                <option value="J132">J132</option>
            </select>
          </td>
        </tr> 
         <tr>
          <td>密码设置</td>
          <td>
            <input type="password" name="pwd">
          </td>
        </tr> 
        <tr style="text-align: center;">
          <td colspan="2"><input type="submit" value="提交" ></td>
        </tr>
      </table>
    </form>
  </body>
</html>

SERVLET 的session实现用户在线的状态管理

package com.lovo.Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class StudentSession extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    /**
     * The doPost method of the servlet. <br>
     * @author Administrator Hem;
     * @param 实现登陆成功之后将我们所有实现登录的学生的信息展示出来,
     *             并欢迎登录者,
     *             给登陆者提供注销登录的功能;注销后进入登录页面
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();

        HttpSession session = request.getSession(false);
        ServletContext context = request.getServletContext();
        String action = request.getParameter("action");
        String name = (String) session.getAttribute("name");
        List stuList = (List) context.getAttribute("list");

        if(action == null){
            out.println("<p>欢迎"+name+"登陆</p>【<a href='/JavaWeb_01/StudentSession?action=ac'>注销</a>】</br>");
            out.println("在线人员");
            for (int i = 0; i < stuList.size(); i++) {
                out.println(stuList.get(i));
            }
        }else if(action.equals("ac")){
            session.invalidate();
            stuList.remove(name);
            context.setAttribute("list", stuList);
            response.sendRedirect("/JavaWeb_01/html/login.html");
        }
    }

} 

javaScripte 实现聊天室功能

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #f4ffd7;
            overflow: scroll;
        }
        .na{
            width: 35px;
        }
    </style>
</head>
<body>
    <div id="div"></div>

    <img src="imgage/1.png" alt="" width="30px" id="img" index="0"/>
    <input type="text" id="inp"/>
    <input type="button" value="提交" id="btn"/>


    <script>
        var obtn = document.getElementById("btn");
        var oinp = document.getElementById("inp");
        var odiv = document.getElementById("div");
        var oimg = document.getElementById("img");
        var imgarr = ["imgage/1.png","imgage/2.png","imgage/3.png"];

        /*点击按钮,获取到文本框的值,将值加入到div里面*/
        obtn.onclick = function(){
            //获取到文本框的值
            var value = oinp.value;

            //创建一个p标签,将内容放在p标签内部,放在div里
            var op = document.createElement("p");
            var oa = document.createElement("a");
            var oimg1 = document.createElement("img");
            var index = oimg.getAttribute("index");
            var textNode = document.createTextNode(value);

            oimg1.setAttribute("src",imgarr[parseInt(index)]);
            oimg1.setAttribute("class","na");
            oa.innerHTML = "删除";
            oa.href="javascript:";
            oa.onclick = function(){
                //this表示当前的a标签对象,点击删除要删的是op
                //removeChild  找到对象删除里面的字节点
                odiv.removeChild(this.parentNode);
            }
            op.appendChild(oimg1);
            op.appendChild(textNode);
            op.appendChild(oa);

            odiv.appendChild(op);
            oinp.value = "";
        }

        oimg.onclick = function(){
            var i = this.getAttribute("index");
            i = parseInt(i);
            if(i<imgarr.length-1){
                ++i;
            }else{
                i=0;
            }
            this.setAttribute("index",i);
            this.setAttribute("src",imgarr[i]);
        }

    </script>
</body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐