当前位置: 首页 > news >正文

项目-双人五子棋对战: websocket的讲解与使用 (1)

项目介绍

接下来, 我们将制作一个关于双人五子棋的项目, 话不多说先来理清一下需求.

1.用户模块

用户的注册和登录

管理用户的天梯分数, 比赛场数, 获胜场数等信息.

2.匹配模块

依据用户的天梯积分, 实现匹配机制.

3.对战模块

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

可见这个项目是围绕这三层为中心来写的, 以后的项目开发也是围绕着这三个方面展开.

核心问题

之前在学网络的时候, 我们也学到客户端-服务器这一个经典结构, 即客户端向服务器发送请求, 服务器构造响应, 服务器将响应返回给客户端.(应用的对应也是HTTP协议)

但是在这个项目的对战模块中, 有一个核心的问题: 我们都知道, 当在进行五子棋对战时, 一方落子, 不仅需要在自己的客户端中显示, 也要在对手的客户端中显示.  但是关键是, 对手的客户端没有发起请求, 那么服务器怎么响应?

因此, 我们是需要服务器主动给客户端响应的模式的, 也叫消息推送.

当前我们学习过的HTTP其实也能完成这样的功能, 主要是通过轮询的方式, 即每过一定时间客户端就主动给服务器发送一个请求, 以获取响应. 但这样也有一些问题:

1. 轮询时间设置的比较短, 相应消耗的带宽资源就比较多(浏览器需要源源不断地向服务器发送http请求, 而http请求可能会带有较长的头部, 真正传输的数据可能只是很小一部分, 这样就会浪费很多带宽资源).

2. 轮询时间设置的比较长, 就会导致延迟较高, 影响用户体验.

那么有没有一种合适的方式来解决这个问题呢? 当然有, WebSocket. 

WebSocket

WebSocket工作原理

WebSocket是一个持久化的协议, 使得客户端与服务器之间的数据交换变得更简单, 它允许服务器主动向客户端推送数据, 在WebSocketAPI中, 浏览器和服务器只需要一次握手, 两者就可以创建持久性的连接, 并进行双向数据传输.

WebSocket其实和http协议没有什么关系, 只是为了兼容浏览器的握手规范, 也是说他是http协议上的一种补充;

在WebSocket的握手过程中, 首先使用网页端, 尝试和服务器建立WebSocket连接. 网页端会先给服务器发起一个HTTP请求, 这个HTTP请求中会带有特殊的header: Upgrade和Connection. (即Connection: Upgrade, Upgrade: WebSocket), 这两个header其实就是在告知服务器, 我们要进行协议升级,  如果服务器支持WebSocket, 就会返回一个特殊的HTTP响应, 这个响应的状态码是101.(切换协议), 客户端和服务器之间就使用WebSocket开始通信.

这样就只需要一次HTTP请求, 就可以源源不断地传送消息, 这也叫消息推送场景

WebSocket在项目中的使用?

前后端介绍

WebSocket在前端JS和后端都发挥了重要作用, 实现了实时, 双向的通信. 前端JS通过WebSocket API和后端服务器建立连接, 发送和接收数据以及处理各种事件; 后端服务器负责监听连接, 处理数据, 推送数据以及管理连接资源

WebSocket的生命周期

onOpen: 连接建立时触发;

onMessage: 客户端接收到服务器数据时触发;

onError: 发生错误时触发;

onClose: 连接关闭时触发. 

在后端中主要是重写以下四个方法以实现上述:

//websocket生命周期的演示
@Component
public class TestAPI extends TextWebSocketHandler {/*** 当一个新的websocket连接建立时, 这个方法被调用* webSocketSession对象表示一个WebSocket会话, 用于发送和接收消息* 该方法在连接成功后打印一条消息* @param session* @throws Exception*/@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");}/*** 当websocket收到文本消息时, 这个方法被调用* message包含了收到的消息* 该方法在收到消息后打印消息的内容* 然后, 它将收到的消息原封不动返回客户端, 这是一种回显机制* @param session* @param message* @throws Exception*/@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息: " + message.getPayload());//让服务器收到数据之后, 把数据原封不动地返回回去session.sendMessage(message);}/*** websocket传输过程中出现错误时, 这个方法被调用* exception包含了异常信息* 该方法在发生错误时打印一条信息* @param session* @param exception* @throws Exception*/@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("连接异常");}/*** 当wesocket连接正常关闭时, 这个方法被调用* status表示关闭的状态和原因* 关闭连接时打印一条信息* @param session* @param status* @throws Exception*/@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("连接关闭");}
}

在前端中也是通过类似的方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TestAPI</title>
</head>
<body><input type="text" id="message"><button id="submit">提交</button><script>//创建websocket实例, 并尝试与服务端127.0.0.1:8080进行连接let websocket = new WebSocket("ws://127.0.0.1:8080/test");//需要给实例挂载一些回调函数websocket.onopen = function() {console.log("连接建立");}websocket.onmessage = function(e) {console.log("收到消息: " + e.data);}websocket.onerror = function() {console.log("连接异常");}websocket.onclose = function() {console.log("连接关闭");}//实现点击按钮后, 通过 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>

我们来运行一下上面的代码, 观察现象:

当我们打开客户端页面时:

 我们在客户端发送一条信息:ddd

 

关闭服务器:

 

可以观察到一次顺利的WebSocket通信, 以后这块会重点使用.

http://www.lryc.cn/news/361572.html

相关文章:

  • 性能飙升50%,react-virtualized-list如何优化大数据集滚动渲染
  • 颠覆传统:探索Web3对传统计算机模式的冲击
  • 最适合上班族和宝妈的兼职副业,一天500多,小众副业项目
  • HFish蜜罐实践:网络安全防御的主动出击
  • vue3+three.js给glb模型设置视频贴图
  • SCARA机器人中旋转花键的维护和保养方法!
  • Linux运维-服务器系统配置初始化脚本
  • 暑期来临,AI智能视频分析方案筑牢防溺水安全屏障
  • 【第3章】SpringBoot实战篇之登录接口(含JWT和拦截器)
  • vue el-table使用、el-popover关闭、el-image大图预览
  • 星网智云总经理韦炜:低代码与智能制造融合,探索未来制造的无限可能
  • 3d模型批量渲图总是会跳怎么办?---模大狮模型网
  • 【距离四六级只剩一个星期!】刘晓艳四级保命班课程笔记(2)(可分享治资料~)
  • Java之Enum枚举类实践
  • Apache POI对Excel进行读写操作
  • 网络安全中攻击溯源方法
  • 软件设计不是CRUD(21):在流式数据处理系统中进行业务抽象落地——需求分析
  • 远控免杀篇
  • 基于单片机的超声波倒车雷达设计
  • 如何增加服务器的高并发
  • webservice、WCF、webAPI权限认证
  • Kafka之Producer原理
  • ubuntu20.04部署gitlab流程
  • C/C++动态内存管理(new与delete)
  • 搭建一个基于主流技术Spring Boot 2 + Vue 3 + Ant Design Vue的技术框架的简要步骤
  • 水电站生产指挥调度系统方案
  • 深度学习入门-第3章-神经网络
  • 如何使用AES128位进行视频解密
  • ArkTS是前端语言吗
  • git上新down下来的项目,前端启动报错npm ERR! code 1 npm ERR! path E:\code\vuehr\node_modul