基于JSP+Servlet+Tomcat8.5+WebSocket实现的网页聊天室
一、准备好开发环境
注意：（Tomcat的版本最好是7.0以上，由于这是基于Tomcat内部集成的Websocket开发的网页聊天室，就不需要导入Websocket jar包了，如果是基于SpingMVC或者SpingBoot的开发的就需要在Pom.xml的文件中导入相应的依赖）
1.1、创建工程目录
1.2、导入本项目中相应的 jar包
1.3、导入相应的静态资源页面
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>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<style type="text/css">
tr{
height: 40px;
line-height: 40px;
}
div{
position: relative;
}
span {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
margin-bottom: 10px;
margin-right: 6px;
}
}
</style>
</head>
<body style="background-color: #666;">
<div style="margin: 80px auto;width: 500px;text-align: center;border: 1px solid #ccc;border-radius: 15px;box-shadow: 10px 10px 5px #ccc;background-color: white;">
<h1>欢迎登陆迷你聊天室</h1>
<form action="login" method="get">
<table style="margin: auto;">
<tr>
<td>用户名: </td>
<td><input type="text" name="username" placeholder="请输入用户名..."/></td>
</tr>
<tr>
<td>密码: </td>
<td><input type="password" name="password" placeholder="请输入密码..."/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
<a style="margin-bottom: 15px;display: block;" href="./register.jsp">注册</a>
<span style="position: absolute; top: 70px;right: 35%;color: red;">${
error}</span>
<span>作者: @未进化的程序猿</span>
</div>
</body>
</html>
2）、导入register.jsp注册页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册迷你聊天室</title>
<style type="text/css">
tr{
height: 40px;
line-height: 40px;
}
div{
position: relative;
}
span {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
margin-bottom: 10px;
margin-right: 6px;
}
}
</style>
</head>
<body style="background-color: #666;">
<div style="margin: 80px auto;width: 500px;text-align: center;border: 1px solid #ccc;border-radius: 15px;box-shadow: 10px 10px 5px #ccc;background-color: white;">
<h1>欢迎注册迷你聊天室</h1>
<form action="registerHandler" method="get">
<table style="margin: auto;">
<tr>
<td>用户名: </td>
<td><input type="text" name="username" placeholder="请输入用户名..."/></td>
</tr>
<tr>
<td>密码: </td>
<td><input type="password" name="password" placeholder="请输入密码..."/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
<a style="margin-bottom: 15px;display: block;" href="./index.jsp">登录</a>
<span style="position: absolute; top: 70px;right: 35%;color: red;">${
error}</span>
<span>作者: @未进化的程序猿</span>
</div>
</body>
</html>
3）、导入websocketChatroom.jsp聊天页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${
sessionScope.username}</title>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//1、定义websocket对象
var ws;
//2、设置连接websocket的URL
var ws_url = "ws://47.95.113.235:8080/chartroom-websocket/websocket/chatroom"
//3、定义json对象
var msg;
$(function() {
//调用连接websocket的方法
ws_connect();
//点击按钮发送消息的方法事件
$("#send").click(function () {
ws_sendMsg();
scrollToBottom();
});
//绑定双击事件，给每一个列表绑定事件
$("body").on("dblclick",".userName",function(){
var loginName = '${sessionScope.username}';
//获取列表的用户的名称
var userName = $(this).attr("id");
if(loginName == userName){
alert("不能跟自己聊天!!!");
return;
}
//将获取的用户的名称填充到文本输入框中
$("#msg").val("@" + userName + ":");
});
//给点击发送图片按钮绑定点击事件
$("#uploadImg").on("click",function(){
ws_sendImg();
scrollToBottom();
});
//给button按钮加回车事件
$("body").keydown(function () {
if (event.keyCode == "13") {
//keyCode=13是回车键
$('#send').click();//换成按钮的id即可
}
});
});
//websocket连接的方法
function ws_connect() {
//获取登陆进来的用户名
var loginName = '${sessionScope.username}';
//打印输出效果
console.log('loginName: [' + loginName + ']');
if ('WebSocket' in window) {
ws = new WebSocket(ws_url + "?loginName=" + loginName);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(ws_url + "?loginName=" + loginName);
} else {
Console.log('Error: WebSocket is not supported by this browser.');
return;
}
ws.onopen = function () {
console.log('Info: WebSocket connection opened.');
};
ws.onclose = function () {
console.log('Info: WebSocket closed.');
};
//接收后台传过来的信息
ws.onmessage = function (message) {
console.log(message.data);
//判断message.data是文本消息还是文件消息
if("string" == typeof(message.data)){
//表示文本消息
//获取当前表格内有多少行
var rows = $("#record").find("tr").length;
//定义初始值的颜色为黑色
var colorMsg = "black";
//判断行数对2取余是否等于0
if(rows % 2 == 0){
//颜色为绿色
colorMsg = "green";
}
//1、获取返回响应消息的聊天内容
var getMsgContent = message.data;
//将json字符串转变成JSON对象
msg = JSON.parse(getMsgContent);
//2、拼接html字符串，显示消息体
var html = "<tr style='float:left;clear: both;margin-left:40%;'><td style='color:red;'>"+ msg.msgInfo +"</td></tr>";
//判断消息是系统消息，还是用户消息
if(msg.msgType == "System"){
//表示系统消息
//3、追加到table中
$("#record").append(html);
//定义初始值的颜色为黑色
var colorUserListMsg = "black";
最低0.47元/天 解锁文章
1485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
