文章目录
1.创建项目
其实这个项目的创建过程中，和我们之前没有太大的这个区别，例如这个web和mybatis相关的这个框架我们之前都是经常使用的，唯一需要注意的就是这个websocket，这个我们后面会进行这个具体的说明；
2.websocket介绍
2.1原理介绍
这个websocket就是一种消息的推送的机制：
1）原本的这个http请求只能是我们的这个客户端去访问我们的这个服务器，但是我们的服务器无法主动去告诉我们的客户端相关的信息，这个就是每一次都需要我们的客户端去询问"对方落棋子了没有"；
2）websocket就是为了解决这个问题：让我们的这个服务器可以主动告诉客户端，这个时候客户端也是可以自己主动询问的，两个都可以，这样就可以提高我们的这个效率；
2.2报文格式
websocket就是一个应用层的协议：是在这个http协议的这个基础上面进行改进之后产生的这个协议；
| 1） | 下面的这个就是我们的websocket的具体的这个报文格式： |
|---|---|
 |
|
| 2） | opcode表示的就是这个websocket里面的报文的具体的类型； |
| 例如是文本帧还是二进制帧 | |
| 是一个ping帧，还是pong帧，这个就是心跳报的机制，pingpong的这个交互让我们知道这个通信是正常的； | |
| 3） | payloadlen:数据包携带的这个数据载荷的长度（变长格式）； |
| 4） | payload data就是实际传输的这个报文的载荷； |
2.3websocket建立连接的过程（握手）
建立连接的过程就是握手的这个过程：
1）我们使用这个网页端，尝试和这个服务器之间建立这个链接；
2）网页端会先进行合格请求的发送，发送给我们的这个服务器http请求，这个http请求里面有这个特殊header;
3）这个特殊的header就是诸如这个：
connection:upgrade;
upgrade:websocket之类的，就说我们要升级这个协议的类型到这个websocket；
4）这个时候我们的服务器收到这个消息之后，如果同意就会进行这个http响应，这个响应很特殊，是我们的的101状态码，表示我们开始更换的这个协议；
5）接下来的这个服务器端和这个客户端就是用这个websocket进行通信；
3.服务器端案例
3.1方法重写和整体结构
我们定义一个类，对于下面的四个方法进行重写：
上面的这个方法就是我们的这个新建的类继承的这个父类的方法，我们直接点击这个generate是可以看到上面的这些方法的，然后我们选择上面的这四个方法进行重写即可；
主要就是我们的这个服务器端和我们的客户端进行交互的这个过程：建立联集合断开连接，收到消息和出现异常的情况（这些就是可能会出现的这个情况）；
上面的这个代码无法让我们的sprin感知到，这个时候我们需要新建文件：就是我们新建这个config包包，这个包里面这个文件就是用来进行说明：让spring意识到，这个是配置websocket的类；
我们的这个方法里面的第一个参数就是我们的上一个类的对象，第二个参数就是我们的路径（当用户访问到这个路径的时候，就会触发前面的这个对象，调用这个对象里面的相关的方法）；
3.2依赖注入的改进
为了凸显这个spring的依赖注入，控制反转的这个性能，我们可以使用另外一个方式创建我们的对象：
就是在这个类加上注解component，然后在这个配置类里面使用@autowired进行这个依赖的注入；
4.前端代码
需要注意的就是这个对应关系：前端代码的第13行里面的路径需要和我们的后端代码addHandler里面的这个第二个参数是一致的，否则是无法进行正常的通信的；
展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="message">
<buttom id="submit">提交</buttom>
<script>
//1.创建websocket实例
let websocket = new WebSocket("ws://127.0.0.1:8080/test")
//2.挂载回调函数
websocket.onopen = function(){
console.log("连接成功");
}
websocket.onmessage = function(e){
console.log("收到消息:"+e.data);
}
websocket.onerror = function(){
console.log("连接异常");
}
websocket.onclose = function(){
console.log("连接关闭");
}
//3.实现点击之后，通过我们的这个websocket发送请求
let input = document.querySelector('#message');
let button = document.querySelector('#submit');
button.onclick = function(){
console.log("发送消息:"+input.value);
websocket.send(input.value);
}
</script>
</body>
</html>5.浏览器验证前后端交互
5.1服务器被动接收消息
浏览器显示：连接成功
IDEA服务端显示效果：我们的服务器端接受到了来自于这个浏览器的消息
当我们把这个浏览器关闭之后：我们的客户端和服务器就会自动断开这个链接，并且打印这个对应的日志信息；
5.2服务器主动发送消息
我们上面已经介绍了这个websocket的相关机制，因此我们可以在原有的这个代码的基础上面进行改进，就是让我们的这个服务器不是被动的接收消息，而是可以发送消息；
我们的做法就是，我们通过浏览器向这个服务器发送数据的时候，我们的服务端把这个接受的数据原封不动的返回给我们的客户端；
修改的地方就是使用下面的这个websocket里面的这个session会话的sendmessage方法发送消息，返回给我们的客户端；
动的接收消息，而是可以发送消息；
我们的做法就是，我们通过浏览器向这个服务器发送数据的时候，我们的服务端把这个接受的数据原封不动的返回给我们的客户端；
修改的地方就是使用下面的这个websocket里面的这个session会话的sendmessage方法发送消息，返回给我们的客户端；
