零基础做项目---五子棋对战---day01

项目介绍

1. 用户模块

• 用户的注册和登录
• 管理用户的天梯分数、比赛场数、获胜场数等信息

2. 匹配模块

• 依据用户的天梯积分，实现匹配机制

3. 对战模块

• 把两个匹配到的玩家放到一个游戏房间中，双方通过网页的形式进行对战比赛

用到的关键技术

• 后端: Java, Spring/Spring Boot/Spring MVC
• 前端: HTML/CSS/JS/AJAX
• 数据库: MySQL/MyBatis
• 实时通讯: WebSocket

创建项目

这里使用阿里云服务器

 

https://start.aliyun.com/

勾选

• MyBatis Framework (在SQL分类下)
• MySQL Driver (在SQL分类下)
• WebSocket (在Messaging分类下)
• Spring Web (在Web分类下)

项目结构

消息发送机制

按照当前已有的知识，主要是HTTP HTTP自身是难以实现这种消息推送效果的~~
HTTP要想实现类似的效果，就需要基于“轮询”的机制~~

消息推送机制--服务器发送事件 (SSE)

我之前学习过的服务器开发，主要是这样的模型:
客户端，主动向服务器发起请求，服务器收到之后，返回一个响应。
如果客户端不主动发起请求，服务器是不能主动联系客户端的~~

这就是消息推送机制

轮询机制

     

 

 判断轮训or消息推送

很明显,像这样的轮询操作,开销是比较大的,成本也是比较高的~~

1. 如果轮询间隔时间长，玩家1落子之后，玩家2不能及时的拿到结果.
2. 如果轮询间隔时间短，虽然即时性得到改善，但是玩家2不得不浪费更多的机器资源(尤其是带宽)

这就类似于去餐馆吃饭~~
1.每隔1分钟,就去前台看一眼，问问老板,，我的饭好了没~~
2.我直接找个角落坐下来，玩手机~~啥时候饭做好了,老板就端过来了~~

明显方案2更好,方案2就是服务器发送事件 (SSE)

但是缺点是只支持单向通信：SSE 只支持从服务器到客户端的单向通信，不能用于双向实时通信。

因此, websocket就是实现消息推送的一个主要的方式~~

websocket介绍

需要注意的是ws => websocket，不是"猥琐”的缩写~ (滑稽)

websocket报文格式

是一个应用层协议, 下层是基于TCP的

十分显而易见, 文本帧就是传输文本数据(比如JSON格式), 二进制帧就是传输二进制数据(比如图片、文件、音频流等)

提示一下, 这里Ping帧和Pong帧通常被用作心跳包，用于检测连接的状态，确保客户端和服务器之间的连接是活跃的。

• Ping帧：由一端（通常是服务器）发送，表示一个心跳请求。
• Pong帧：由接收到Ping帧的另一端（通常是客户端）发送，作为回应。

通过定期发送Ping帧并接收Pong帧，可以检测到连接是否正常以及是否需要重新建立连接。

Payload len: 当前数据报文携带的数据载荷长度。

• 这个字段本身就是一个变长的，WebSocket数据报能够承载的载荷长度是非常长的。

• Payload data: 实际的传输数据。

websocket握手过程

websocket握手过程(建立连接的过程)
使用网页端，尝试和服务器建立websocket连接.
网页端会先给服务器发起一个HTTP请求~~这个HTTP请求中会带有特殊的header

Connection: Upgrade
Upgrade: Websocket

这两个header 其实就是在告知服务器，我们要进行协议升级，

如果服务器支持 websocket,就会返回一个特殊的HTTP响应~~这个响应的状态码是101.(切换协议)
客户端和服务器之间就开始使用 websocket来进行通信了~~

编写一个简单的websocket代码

编写服务器(Java)

TestAPI extends这个类

public class TestAPI extends TextWebSocketHandler {

看看可以重写哪些方法

重写这四个方法

每个添加打印到控制台的信息

新建文件WebSocketConfig

TestAPI加上注解@Component

编写客户端(JS)

前后端函数都是一一对应, 只不过函数方法名字不一样, 意义都是一样的

js完整代码: 

<script>
      // 创建websocket实例
      let websocket = new WebSocket("ws://127.0.0.1:8080/test");
      //给实例挂载一些回调函数
      websocket.onopen = function () {
          console.log("连接建立");
      }
      websocket.onclose = function () {
          console.log("连接关闭");
      }
      websocket.onerror = function () {
          console.log("出现错误");
      }
      websocket.onmessage = function (e) {
          console.log("收到消息 "+ e.data);
      }
      //实现点击按钮后, 通过websocket发送请求
      //querySelector是id选择器
      let input = document.querySelector("#message");
      let button = document.querySelector("#submit");
      button.onclick = function () {
          console.log("发送消息: "+input.value);
          websocket.send(input.value);
      }
  </script>

演示

访问 http://127.0.0.1:8080/TestAPI.html

连接建立

发送消息

那么如何实现服务器端也发送消息呢

@Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("收到消息 "+ message.getPayload());
        session.sendMessage(message);
        System.out.println("发送消息 " +message.getPayload());
    }

只需要在

重启服务

至此, WebSocket示例已经完成