Tomcat学习笔记(2)--WebSocket(1)建立连接与登录处理
//本节只是WebSocket的准备工作、前期学习,无WS具体代码
在之前学习flask里面就已经发现了,如果不使用html本地的javascript的,而要使用服务器上的代码时——比如说登录操作,要在服务器上对比数据库验证——
它实质上是新建立了一个地址请求并且附上登录信息,
这个地址在服务端绑定了一个函数(或者其他一些载体)来拿到登录信息并加以验证后返回信息。
所以基于这个流程的简单认识 和 b站相关视频:
https://www.bilibili.com/video/BV1dJ411N7Um?p=52
我记录一下如何在tomcat架构下建立一个WebSocket连接
本节没有写到通过WebSocket的具体与浏览器的交互,之后再说。
启动一个Tomcat项目
创建一个JAVA web应用
部署依赖包
这三个libs 直接复制或者拖进去都可以 fastjson没有的话百度下载
注意再.jar文件前面如果没有那个小三角的话,说明IDEA还不能识别他们为依赖包
选中后–右击–选择“Add as Libraries”
fastjson是为了将数据转化为json格式
后两个是websocket的api 在tomcat安装目录下面的libs文件夹中可以找到
然后整体还是tomcat架构的 所以依赖整个tomcat:
在projectStructure里面选中modules,点右上角的小加号 选择library
把tomcat放进去 并apply
发送数据用的是jQuery 直接搜名字 网上下一下 放在这里
在环境布置的时候 发现一个有点诡异的问题
如果下图没有这样的结构 要自己新建lib 把Libraries中自己打包的jar库放进去 那么就无法调用JSON的函数 真的真的很奇怪 debug了好久
写代码
src下new一个包,创建一个类,是一个专门用来处理登录请求的servlet 继承自tomcat的httpservlet
如果命名一致 那么直接复制下面的代码就可以了 其中的注释一一解释了各语句的意思
package cn.CakeCN.servlet;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
//这是声明下面的类是作为WebServlet的载体,这样写就可以不用在web.xml中配置了
//其中name说明这个servlet的名字(专门用来处理登录请求)
//urlPatterns说明,当我们的浏览器访问/login这个路径进行请求(并携带着请求的数据)
//那么使用这个类来处理数据
@WebServlet(name = "loginServlet",urlPatterns = "/login")
public class loginServlet extends HttpServlet {
//这里没有链接数据库,直接用粗暴的方法对比密码
private static final String PASSWORD = "123456";
//相应POST请求 实际上 下面响应GET也是转而来用同一块代码
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//确定发回浏览器的数据是UTF-8编码,以防中文乱码
resp.setCharacterEncoding("UTF-8");
//获取接收页面传递的参数 , 用户名/密码,在之后的html构造请求数据的时候就理解了为什么这么写
String username = req.getParameter("username");
String password = req.getParameter("password");
//用来存储信息(python字典型、Map映射类型都是这样的键值对 转json简单清晰,最适合存信息)
Map resultMap = new HashMap();
//判定用户名密码是否正确
if(PASSWORD.equals(password)){
//如果正确, 响应登录成功的信息
resultMap.put("success",true);
resultMap.put("message","登录成功");
//这一句话在本节中没有体现用处,但是是开启WebSocket的关键语句
//有了它就可以建立双向持续连接--Session会话
//关于cookie和Session 我看的是这一博客:
//https://www.cnblogs.com/wangpei/p/4884840.html
//这里就是尝试获取已有username为username的Session(没有则新建)
req.getSession().setAttribute("username",username);
}else{
//如果不正确, 响应登录失败的信息
resultMap.put("success",false);
resultMap.put("message","用户名或密码错误");
}
//响应数据,用json的方式写入传回给浏览器的数据
resp.getWriter().write(JSON.toJSONString(resultMap));
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
下面是登录界面的html文件 其中js的代码注释也写入了我的理解
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to PIXIVRemSys</title>
<link rel="stylesheet" href="static/css/initial.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="container">
<h1 style="color: white; margin: 0; text-align: center">Login</h1>
<label for="username"></label><input type="text" id="username" name="username" placeholder="Your username">
<label for="password"></label><input type="password" id="password" name="password" placeholder="Your password">
<input type="button" class = "button" value="登录" onclick="check()">
</div>
</div>
</body>
<script type="text/javascript">
function check() {
const name = document.getElementById("username").value;
const pswd = document.getElementById("password").value;
if(name === "" || pswd === "") {
alert("没有输入密码或用户名!");
clear_text();
return false;
}
else {
//这里是发送请求的核心代码
//发送了一个POST请求,请求地址为/login
//类型为json 内容为记录用户名和密码的键值对
$.ajax({
type:"POST",
url:"/login",
dataType:"json",
data:{
username: name,
password: pswd
}, // 这里是对于返回的信息不同的处理方式,如果成功就进入Main.html
success:function (data) {
if (data.success){
alert(data.message);
window.location.href="Main.html";
}else{
alert(data.message);
}
}
});
}
}
function clear_text(){
const username = document.getElementById("username").value = "";
const password = document.getElementById("password").value = "";
}
</script>
</html>
放在web目录就好,然后里面连接到css样式什么的 自己按照文件夹结构建文件夹就好
css文件内容:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font: 16px/20px microsft yahei;
}
.wrap {
width: 100%;
height: 100%;
padding: 10% 0;
position: fixed;
opacity: 0.8;
background: linear-gradient(to bottom right,#000000, #656565);
background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
}
.container {
width: 60%;
margin: 0 auto;
}
.container input {
width: 320px;
display: block;
height: 36px;
border: 0;
outline: 0;
padding: 6px 10px;
line-height: 24px;
margin: 32px auto;
-webkit-transition: all 0s ease-in 0.1ms;
-moz-transition: all 0s ease-in 0.1ms;
transition: all 0s ease-in 0.1ms;
}
.container input[type="text"] , .container input[type="password"] {
background-color: #FFFFFF;
font-size: 16px;
color: #2677a5;
}
.container input[type='button'] {
font-size: 16px;
letter-spacing: 2px;
color: #666666;
background-color: #FFFFFF;
cursor: pointer;
}
input[type='submit'] {
font-size: 16px;
letter-spacing: 2px;
color: #666666;
background-color: #FFFFFF;
cursor: pointer;
width: 120px;
height: 36px;
}
.text{
color: #e2dfe4;
}
这里登录成功会进入到一个叫Main.html文档里面 随意放个页面
因为只要知道成功建立连接验证就够了
最后修改web.xml配置文件,指定欢迎界面是login.html
部署本地Tomcat
注意下图圈起来的访问的地址,千万千万不能是/login 因为我们服务器把/login是绑定到一个处理登录验证的servlet上了,如果占用,那么无法启动servlet!!!
最后输入密码为123456时 运行能跳转页面就OK了
本文地址:https://blog.csdn.net/Cake_C/article/details/107365562