利用jsp内置对象实现的简易聊天室

最新推荐文章于 2024-05-01 17:37:10 发布
最新推荐文章于 2024-05-01 17:37:10 发布
阅读量1.1w 收藏 200
点赞数 27
文章标签： jsp html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44781879/article/details/105757715
版权

最近Java老师给我们安排了一个实验，内容如下：
在这里插入图片描述
要完成这个实验，首先要对jsp的内置对象有深刻了解，不了解的老哥可以看看这个（哔哩哔哩）jsp几大内置对象详解，实力推荐。

鉴于要实现的功能比较简单，我写了三个jsp页面，第一个是login.jsp，就是登录页面，第二个是cotainer.jsp,主页面，包括各种功能按钮，第三个是view页面，用来显示聊天信息。其中view.jsp是使用include指令嵌入到cotainer.jsp中的（用iframe也可以，但是iframe能不用就尽量不用）
下面是三个jsp页面的代码和运行截图：
1.login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室登录</title>
</head>
<style>
.div1{
	background-color:lightgreen;
	border:solid 1px black;
	width:300px;
	height:170px;
	text-align:center;
	line-height:150%
}
</style>
<body>
<div class="div1">
<%
StringBuffer view=new StringBuffer("");
session.setAttribute("view",view);
String color="balck";
session.setAttribute("Color",color);
%>
<h3>聊天室登录</h3>
<form action="cotainer.jsp" method="post">
用户名：<input type="text" name="userName"><br>
<br>
<input type="submit" value="登录">

</form>
</div>
</body>
</html>

在这里插入图片描述
2.cotainer.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
  <style>
.div3{
	background-color:lightblue;
	border:solid 1px black;
	width:700px;
	height:600px;

	line-height:150%
}
img{
	width:15px;
	height:20px;
}
</style>
  </head>
  <body>
  <div class="div3">
  
    <%
    request.setCharacterEncoding("utf-8");
    if(request.getParameter("userName")!=null)
    {session.setAttribute("userName",request.getParameter("userName").toString());}
    	String sessionID=session.getId();
    StringBuffer users=new StringBuffer();
    //确定用户数量
        if(application.getAttribute("count")!=null)
        {
        	users=users.append(application.getAttribute("users").toString());
        	if(users.indexOf(sessionID)==-1){
        		session.setAttribute("isNew","true");
            int  userCount= Integer.parseInt(application.getAttribute("count").toString());
             userCount++;
             application.setAttribute("count",new Integer(userCount));
				users=users.append("<br>"+sessionID);
				application.setAttribute("users",users.toString());
        	}
        }
        else
        {
        	users=users.append("<br>"+sessionID);
       		application.setAttribute("users", users.toString());
        	application.setAttribute("count", "1");
            
        }
        //获取默认颜色
       String select="black";
       if(request.getParameter("Color")!=null)
		select=request.getParameter("Color").toString();
		request.setAttribute("select",select);
		//确定用户次序
		int userId=1;
		String[]userss=users.toString().split("<br>");
		for(int i=0;i<userss.length;i++){
			if(userss[i].equals(sessionID)){
				userId=i;
				break;
			}
		}
       %>
       您是第<img src="数字/<%=userId%>.png">位访问者!
       
        <jsp:include page="view.jsp" />
        <form action="cotainer.jsp" method="post">
        <input type="text" name="message">
        <input type="hidden" name="send" value="true">
        选择我的颜色：<select name="color">
 			<option value="red" ${select=="red"?'selected':''}>红色</option>
 			<option value="blue" ${select=="blue"?'selected':''}>蓝色</option>
 			<option value="green" ${select=="green"?'selected':''}>绿色</option>
 			<option value="black" ${select=="black"?'selected':''}>黑色</option>
 			<option value="yellow" ${select=="yellow"?'selected':''}>黄色</option>
 			<option value="purpole" ${select=="purpole"?'selected':''}>紫色</option>
			</select>
        <input type="submit" value="发送"> 
        </form>
        <form action="cotainer.jsp">
       	<input type="hidden" name="clear" value="true">
        	<input type="submit" value="清空"></form>
        	 <form action="cotainer.jsp">
       	<input type="hidden" name="flush" value="true">
        	<input type="submit" value="刷新"></form>
        
        <form action="login.jsp">
         <input type="submit" value="退出聊天">
         </form>
       </div> 
  </body>
</html>

在这里插入图片描述
3.view.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*" import="java.text.SimpleDateFormat"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天</title>
<style>
.div2{
	border:solid 1px black;
	width:600px;
	height:400px;
	overflow-y:scroll; 
}</style>
</head>
<body>

		<%request.setCharacterEncoding("utf-8");
		
		String userName = session.getAttribute("userName").toString();
		if(request.getParameter("color")!=null)
			session.setAttribute("Color",request.getParameter("color").toString());
		String color=session.getAttribute("Color").toString();
		request.setAttribute("select",color);
		StringBuffer view=new StringBuffer();
		view.append(session.getAttribute("view").toString());
			String chatTexts="";

			//判断是不是新用户
				String isNew="false";
			if(session.getAttribute("isNew")!=null){
				isNew=session.getAttribute("isNew").toString();
				session.setAttribute("isNew","false");
				}
			if(isNew.equals("false"))
			{ 
				//发送
				String send="false";
					if (request.getParameter("send") != null)
						send = "true";
					if(send.equals("true")){
					if (request.getParameter("message") != null) {
						String message = request.getParameter("message").toString();

					Date time = new Date();
					SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
					String time1 = sdf.format(time);
					String chatText ="<br>"+ userName + "["+time1 + "]:" + message;
					view.append(chatText);
					session.setAttribute("view",view.toString());
					//view存到application中
					if (application.getAttribute("chatText") != null) {
						String ss=application.getAttribute("chatText").toString();					
						StringBuffer ssb=new StringBuffer();
						ssb.append(ss);
						ssb.append(chatText);
						application.setAttribute("chatText",ssb.toString());
					}
						else{
							application.setAttribute("chatText",view.toString());
						}
			}
					}
				//清空
					String clear="false";
					if (request.getParameter("clear") != null)
						clear = "true";
					if(clear.equals("true")){
						view.delete(0,view.length());
							}
					session.setAttribute("view",view.toString());
			//刷新
			String flush="false";
			if (request.getParameter("flush") != null)
				 flush ="true";
			if (flush.equals("true")) {
				if (application.getAttribute("chatText") != null) {
					 chatTexts=application.getAttribute("chatText").toString();
					 view.delete(0,view.length());
					 view.append(chatTexts);
					 session.setAttribute("view",view.toString());
				}
				
			}
			//加颜色
					String scolor=view.toString();
					String[]a=scolor.split("<br>");
					for(int i=0;i<a.length;i++){						
						if(a[i].contains((userName+"["))){
							if(a[i].contains("<span")){
								//问题一：字符串取子串
									a[i]=a[i].substring(0,a[i].length()-7);
									int index=a[i].lastIndexOf(">");
									a[i]=a[i].substring(index+1);
								}
							a[i]="<br><span style='color:"+color+"'>"+a[i]+"</span>";
						}
						else{
							a[i]="<br>"+a[i];
						}
						
						}
					StringBuffer sb=new StringBuffer();
						for(String s:a){
							sb.append(s);
						}
						view.delete(0,view.length());
						view.append(sb.toString());
					}
				
				
		%>
<div class="div2">
<%=view.toString() %>
</div>
</body>
</html>

在这里插入图片描述
如果你们要复制我的代码演示的话注意cotainer.jsp里面会使用图片，修改一下就好了。
说一下我的各个功能实现思路：
首先，在登录页面创建了一个session，键是view，值是一个StringBuffer类型的变量view。
1.发送信息时，将信息发送到view.jsp内，获取session的view，将发送的内容添加到view和application的chatText中，然后显示在页面上的是view的内容。
2.清空时，只需将view清空并放入session即可。
3.刷新时，将application的chatText取出，放入到view中并存入session。
4，加颜色，将颜色信息写入到view中的每条聊天即可。
我说一下我遇到的几个问题：
1.如何确定是不是新用户，
每个不同的浏览器首次的sessionID都是不一样的，使用application收集每个sessionID，如果有application中有相同的，说明不是新用户。
2.如何给自己的聊天信息加颜色
窗口显示的聊天信息都在view里面存放，只需将view里面的是自己发送的信息加上颜色即可。由于每条信息是有<br>隔开的，所以将整个聊天信息用split方法分成一个字符串数组，然后有遍历字符串数组找出属于自己发送的聊天信息，加上颜色，然后再组合到view里面就可以了。
下面是演示截图
1.用户1登录

在这里插入图片描述
2.用户1发送两条红色的信息
在这里插入图片描述
3.用户2登录（换一个浏览器，模拟第二个用户）
在这里插入图片描述
4.用户2刷新聊天记录，获取到用户1发送的信息
在这里插入图片描述
5.用户2发送两条黄色信息。
在这里插入图片描述
6.用户1刷新聊天记录，并回复一条消息。
在这里插入图片描述
7.用户1清空聊天框，并发送一条信息。
在这里插入图片描述
8.用户1刷新聊天记录，所有的聊天信息都又出现了。
在这里插入图片描述

曹小哈
关注
  • 27
    点赞
  • 踩
  • 200
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
JSP内置对象实现在线聊天室设计布局
09-25
这个是jsp内置对象实现一个在线聊天室的设计布局，本人已经实现整个项目。本文件主要供学习jsp内置对象使用，如果在看代码中有什么问题或者建议，欢迎联系我，大家以前讨论。
上机题1-jsp聊天室代码jsp实现简单聊天室
05-28
J2EE上机实验做jsp聊天室，内含登录界面，多人聊天记录，记录在线人数等
网络聊天室：通过Servlet和JSP，结合session和application实现（文末附源码）
最新发布
luming的博客
05-01 1846
分享网络聊天室的简单小程序，可以让不同的用户进行网络聊天，主要通过Java中的Servlet和JSP实现，通过Session和Application对象实现信息的交互，对于各部分各部分代码实现也做出了讲解
jsp做的简易聊天室源码
01-03
用jsp做的简易聊天室，部署到tomcat中，可实现网络聊天室的基本功能。
简易聊天室的设计 --- JSP
我的博客
01-11 5453
目录 1.数据库设计 这里用MySQL数据库，借助phpstudy可快速安装 列名 类型 长度 备注 id smallint 10 主键 username varchar 10 用户登录名 password varchar 10 登录密码 name varchar 15 用户姓名 sex varchar 2 用户性别 ...
scope of page vs. requese vs. session vs. application
08-23 516
page，request，session 和application 都借助setAttribute()和getAttribute()来设定和取得其属性Attribute,通过这2种方法来做到数据共享 但是getAtttribute 对page食补起作用的， page: 使用pageContext ---属性设置在当前页，跳转后无法获得 request：从http请求到服务
简易聊天室
05-13
简易聊天室本次实验的目的是通过以下题目掌握JSP内置对象，包括：request，response，session，application等。 (1)制作简易聊天室，能够实现简单的页面聊天功能。 (2)制作网页计数器，要求相同的窗口内刷新页面访问次数并不增加，并且用图片来显数字。1、 熟悉request、response、session、application、out等内置对象； 2、 选择制作网页计数器程序需准备数字图片；1、进入jsp子目录，编写简易聊天室的JSP程序，聊天室的需要实现的基本功能：输入昵称、聊天。 2.根据功能编写页面代码。二、网页计算器 利用内置对象application <html> <head> <base href="<%=basePath%>"> <title>My JSP 'Counter.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> 您是第位访问者！ </body> </html> 简易聊天室本次实验的目的是通过以下题目掌握JSP内置对象，包括：request，response，session，application等。 (1)制作简易聊天室，能够实现简单的页面聊天功能。 (2)制作网页计数器，要求相同的窗口内刷新页面访问次数并不增加，并且用图片来显数字。1、 熟悉request、response、session、application、out等内置对象； 2、 选择制作网页计数器程序需准备数字图片；1、进入jsp子目录，编写简易聊天室的JSP程序，聊
jsp案例分析（二）-聊天室-3-代码分析
flyuniverse_shell的专栏
03-15 1054
包括myeclipse工程的源代码：  http://download.csdn.net/detail/flyuniverse_shell/4144288   本程序可以熟悉ajax，请看如下代码： var net=new Object();  //定义一个全局变量net net.AjaxRequest=function(url,onload,onerror,method,params)
jsp实现在线聊天系统
doordiey的博客
06-25 3119
在线聊天系统 大概介绍 就是一个在线聊天平台。 功能 用户登陆、注册 聊天室的创建、查看、加入 聊天信息的查询、发布 聊天室人数限制 聊天上线提示和下线提示 涉及相关技术 表单开发 内置对象 jdbc-odbc连接数据库 servlet javabean 过滤器 ajax 验证码 ……有待优化 不足 很丑 数据库连接部分conn的反复定义可以考虑代码进一步精简化 还有很多待发现待改进的地方 部分代码 登陆过滤器 登陆保护，未登陆无法进入内部页面，自动跳转到登陆界面 package fil
jsp内置对象聊天系统
04-28
`jsp内置对象聊天系统`是一个基于JavaServer Pages（JSP）技术构建的简易聊天应用程序。在JSP中，内置对象是预定义的对象，可以直接在页面上使用，无需显式实例化，大大简化了开发流程。这个系统利用了JSP的内置对象...
JSP简单聊天室
08-28
在这个“JSP简单聊天室”项目中，我们利用了JSP的核心特性，结合Servlet和JavaBean，构建了一个基本的在线聊天应用。这个聊天室仅使用`application`对象来实现数据共享，方便用户间实时交流。 **1. JSP基础** JSP...
jsp简易聊天室
09-28
基于jsp页面，通过Application来进行聊天记录的存储与显示
web网页版的聊天室 JsP+ ajax 实现公聊和私聊
01-06
此项目有各种聊天效果，实现表情 和字体颜色的选择， 还有私聊，群聊，离开聊天室都有提示， 另外有显示在线总人数和账号的公告栏！ 下载解压导入就能运行，无需加载其他jar包， 绝对是个值得学习的好项目， 开源从分享开始，希望大家多分享自己的代码。。。。
jsp在线聊天室源码（很详细）
01-27
jsp在线聊天室源码 包括前台和后台管理 非常详细，欢迎大家下载 不下会后悔啊 其中包含公聊和私聊等等 后台包括对前台用户信息的管理等
用jsp写的简易聊天室
11-01
用jsp写的简易聊天室
jsp+application实现网络聊天室
05-17
使用jsp+application完成网络聊天室，没有用数据库，servlet，ajax，socket。单纯使用application。可以全屏公聊以及制定人私聊。页面刷新使用js定时器，当填写发送信息时，停止刷新，发送后继续刷新。
ChartroomDemo.zip（简易聊天室）
04-29
实验要求：运用Jsp的内置对象Session，Application等制作简易聊天室，能够实现简单的页面聊天功能。 实验要求： 1、进入jsp子目录，编写简易聊天室的JSP程序，聊天室的需要实现的基本功能：输入昵称、聊天。 2.根据...
jsp简单多人在线聊天系统(非常容易理解的公聊、私聊)
white_mvlog的博客
06-21 1803
基于jsp简单多人在线聊天系统源码，分为公聊、私聊以及网站客服，网站多用户，十分容易理解！！！
105. 简易聊天室8：使用 Socket 传递图片
喜欢捣鼓各种技术
06-23 1215
简易聊天室8：使用 Socket 传递图片
用jsp写一个简易聊天室
06-09
好的，下面是一个简单的 JSP 聊天室的示例代码： 1. 在 Web 项目的 `WEB-INF` 目录下创建 `chat.jsp` 文件，用于显示聊天记录和输入框。 ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易聊天室</title> </head> <body> <h1>简易聊天室</h1> <div id="chatArea" style="height: 400px; overflow: auto;"></div> <form> <input type="text" name="message" style="width: 80%;"> <button type="button" onclick="sendMessage()">发送</button> </form> <script> var chatArea = document.getElementById("chatArea"); // 记录当前聊天内容 var chatContent = ""; // 定时请求更新聊天记录 setInterval(function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var responseText = xhr.responseText; if (chatContent != responseText) { chatContent = responseText; chatArea.innerHTML = responseText; chatArea.scrollTop = chatArea.scrollHeight; } } }; xhr.open("GET", "chatServlet", true); xhr.send(); }, 1000); // 发送聊天内容 function sendMessage() { var messageInput = document.getElementsByName("message")[0]; if (messageInput.value.trim() != "") { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { chatContent = xhr.responseText; chatArea.innerHTML = chatContent; chatArea.scrollTop = chatArea.scrollHeight; messageInput.value = ""; } }; xhr.open("POST", "chatServlet", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("message=" + encodeURIComponent(messageInput.value)); } } </script> </body> </html> ``` 2. 创建一个名为 `chatServlet` 的 Servlet，用于处理聊天记录的更新和发送。 ```java import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/chatServlet") public class ChatServlet extends HttpServlet { private static final long serialVersionUID = 1L; // 聊天记录列表 private List<String> chatList = new ArrayList<>(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 将聊天记录列表拼接成 HTML 格式字符串返回 StringBuilder sb = new StringBuilder(); for (String message : chatList) { sb.append("<p>").append(message).append("</p>"); } response.getWriter().write(sb.toString()); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 将客户端发送的聊天内容加入到聊天记录列表中 String message = request.getParameter("message"); if (message != null) { chatList.add(message); } doGet(request, response); } } ``` 以上就是一个简单的 JSP 聊天室的实现。当用户在页面中输入聊天内容并点击发送按钮时，会通过 AJAX 请求将内容发送给 `chatServlet`，`chatServlet` 将内容加入到聊天记录列表中，并将当前的聊天记录列表拼接成 HTML 格式字符串返回给客户端，客户端再将其显示在页面中。同时，客户端还会定时向 `chatServlet` 发送 AJAX 请求，以获取最新的聊天记录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值