[网页五子棋]项目介绍以及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
  • 然后你们就开始用中文进行交流了
相关推荐
NoneCoder2 小时前
HTTP/HTTPS 协议解析
网络协议·http·面试·https
Jackilina_Stone3 小时前
【网工】华为配置专题进阶篇①
网络·华为·网工
lally.3 小时前
计算机网络
网络·计算机网络
LPH31193 小时前
Linux系统安全管理
linux·网络·安全·系统安全
liulilittle4 小时前
MacOS X 命令行永久设置网卡IP、MASK、GW、DNS
网络协议·tcp/ip·macos
2501_916008894 小时前
iOS端网页调试 debug proxy策略:项目中的工具协同实践
websocket·网络协议·tcp/ip·http·网络安全·https·udp
kikumaru7145 小时前
Mac 安装 finalshell
linux·网络·macos
小兔子酱#5 小时前
【Docker 07】Network - 网络
网络·docker·php
OKUNP5 小时前
LVS+Keepalived高可用群集
网络·智能路由器·lvs
哪 吒10 小时前
突破亚马逊壁垒,Web Unlocker API 助您轻松获取数据
前端·网络·python·网络安全