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

文章目录

项目背景

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

核心技术

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

创建项目

相关依赖

WebSocket

消息推送

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

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

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

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

轮询操作

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

  • HTTP 要想实现类似的效果,就需要基于"轮询"的机制
  • 玩家 1 在思考中,尚未落子
  • 玩家 2,每隔一段时间(每隔 1s500ms...),就主动地给服务器发起一个请求,问看看当前玩家 1 落子了没有

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

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

这就类似于去餐馆吃饭

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

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

报文格式

Websocket 也是一个应用层协议,下层是基于 TCP- FIN:代表当前是不是一个结束报文

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

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

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

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

这个过程就类似于:

  • 你跟外国人进行对话,你说:can you speak chinese?
  • 对面说:yes
  • 然后你们就开始用中文进行交流了
相关推荐
望安认证6 分钟前
CRA 与 CE、RED、EUCC、NIS2、GDPR、AI Act、Data Act、DORA 等欧盟法规的关系:从法案结构看数字产品出海合规
网络·欧盟·cra·网络弹性法案·cra认证
Hrain-AI37 分钟前
2026企业AI Agent本地化落地:6平台横评+搭建步骤+成本模板
服务器·网络·人工智能
便利店10241 小时前
企业远程办公如何打通内网?网络层隧道与封装直觉
运维·服务器·网络·vpn·隧道
00后程序员张2 小时前
抓包鹰 电脑本机网络连接表怎么看?哪些程序在联网 进程归属与可疑 IP 追溯
网络协议·计算机网络·网络安全·ios·adb·https·udp
砚凝霜2 小时前
软考网络工程师|第 6 章 网络安全基础、攻击、等保完整备考笔记
网络·笔记·web安全
运维行者_2 小时前
网络监控与ITSM集成:从告警到工单,实现运维自动化闭环
开发语言·网络·分布式·后端·架构·flask·php
数据知道3 小时前
SSRF 漏洞实战:内网探测、云元数据窃取一条龙
网络·安全·网络安全
我爱cope3 小时前
【计算机网络 | 物理层3:数字编码与调制:比特如何变成可传输的信号?】
网络·学习·计算机网络
潘志宏_ZHPAN3 小时前
智能体互联网:原理、架构与开发实践—项目6:智能体安全与生命周期管理
网络·安全
147API3 小时前
AI 图片编辑接口报 400 怎么排查?先读错误体,再查参数、图片与 mask
网络·人工智能