最近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刷新聊天记录，所有的聊天信息都又出现了。
在这里插入图片描述

# html # css
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

cover

赛项征集 | 第二届开放原子开源大赛——汽车软件开源赛火热进行中

avatar 开放原子开发者工作坊

开放原子校源行启动优质开源课程征集，助力高校开源人才培养

校源行启动优质开源课程征集，助力高校开源人才培养

avatar 开放原子开发者工作坊
cover

第二届Open Source Congress在北京成功举办

avatar 开放原子开发者工作坊