[网页五子棋]项目介绍以及websocket的消息推送(轮询操作)、报文格式和握手过程(建立连接过程)

项目背景

• 用户模块
  1. 用户的注册和登录
  2. 管理用户的天梯分数，比赛场数，获胜场数等信息
• 匹配模块
  • 依据用户的天梯积分，来实现匹配机制
• 对战模块
  • 把两个匹配到的玩家，放到一个游戏房间中，双方通过网页的形式来进行对战比赛

核心技术

• Java
• Spring/Spring Boot/Spring MVC
• HTML/CSS/JS/AJAX
• MySQL/MyBatis
• WebSocket

创建项目

相关依赖

image.png|309

WebSocket

消息推送

我们之前学习的服务器开发，主要是这样的模型：

• 客户端主动向服务器发起请求，服务器收到之后，返回一个响应
• 如果客户端不主动发起请求，服务器是不能主动联系客户端的

我们是否需要，服务器主动给客户端发送消息这样的场景呢？

• 需要。——消息推送

image.png

• 当玩家 1 在棋盘上落子的时候，玩家 1 的客户端就需要给服务器发一个消息，告诉服务器这个玩家把棋子落在哪个位置了
• 玩家 2 也就需要及时地获取到玩家 1 的落子信息
• qq、微信、五子棋…

轮询操作

当前已有的知识，主要是 HTTP。但 HTTP 自身是难以实现这种消息推送效果的

• HTTP 要想实现类似的效果，就需要基于“轮询”的机制

image.png

• 玩家 1 在思考中，尚未落子
• 玩家 2，每隔一段时间(每隔 1s，500ms…)，就主动地给服务器发起一个请求，问看看当前玩家 1 落子了没有

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

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

这就类似于去餐馆吃饭

1. 每隔 1 分钟，就去前台看一眼，问问老板，我的饭好了没——轮询
2. 我直接找个角落坐下来，玩手机，啥时候饭做好了，老板就端过来了——消息推送

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

报文格式

Websocket 也是一个应用层协议，下层是基于 TCP 的

image.png

- FIN：代表当前是不是一个结束报文

• RSV：保留位，可能以后有什么用，但现在还没任何用处
• opcode：描述了当前这个 websocket 报文是什么类型
  • 表示当前这是一个文本帧，还是一个二进制帧
  • 表示当前这是一个 ping 帧，还是一个 pong 帧(发 ping 回 pong)
• Payload len：表示当前数据包携带的数据载荷长度
  • 这个字段本身就是一个变长的，一个 websocket 数据报能承载的载荷长度是非常非常长的
• Payload Data：实际报文要传输的数据载荷

握手过程(建立连接过程)

使用一个网页端，尝试和服务器建立 websocket 连接

• 网页端会先给服务器发起一个 HTTP 请求，这个 HTTP 请求中会带有特殊的 header，比如：
  • Connection: Upgrade
  • Upgrade: Websocket
  • 这两个 header 其实就是在告知服务器，我们要进行协议升级。如果服务器支持 websocket，就会返回一个特殊的 HTTP 响应，这个响应的状态码是 101（切换协议）
• 客户端和服务器之间就开始使用 websocket 进行通信了

这个过程就类似于：

• 你跟外国人进行对话，你说：can you speak chinese?
• 对面说：yes
• 然后你们就开始用中文进行交流了