当前位置：首页 > article >正文

网页端五子棋对战（一）---websocket引入前后端交互的实现

article 2024/12/4 16:03:00

文章目录

1.创建项目
2.websocket介绍
- 2.1原理介绍
- 2.2报文格式
- 2.3websocket建立连接的过程（握手）
3.服务器端案例
- 3.1方法重写和整体结构
- 3.2依赖注入的改进
4.前端代码
5.浏览器验证前后端交互
- 5.1服务器被动接收消息
- 5.2服务器主动发送消息

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里面的这个第二个参数是一致的，否则是无法进行正常的通信的；

展示：

<!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>