网页版五子棋——匹配模块（客户端开发）

前一篇文章：网页版五子棋——用户模块（客户端开发）-CSDN博客

目录

·前言

一、前后端交互接口设计

二、游戏大厅页面

1.页面代码编写

2.前后端交互代码编写

3.测试获取用户信息功能

·结尾

·前言

        前面文章介绍完了五子棋项目用户模块的代码编写，从本篇文章就开始介绍五子棋项目匹配模块的代码编写了，匹配模块这里要做的事情就是可以让多个用户在游戏大厅中能够进行匹配，我们会按照天梯积分，把实力相近的两个玩家匹配到一起进行对战，本篇文章要介绍的内容是前后端交互接口的设计，以及游戏大厅页面的编写，还有前后端交互代码的编写，本篇文章新增的代码文件如下图圈起来的文件所示：

        下面就开始本篇文章的内容介绍。 

一、前后端交互接口设计

        我们先来设计一下匹配模块这里前后端交互的接口，像匹配这样的功能就需要用到前面文章中提到的消息推送机制了（文章链接：网页版五子棋—— WebSocket 协议-CSDN博客）这是因为玩家发送匹配请求的事情是可以确定的（当玩家点击匹配按钮，就会发送匹配请求），但是服务器什么时候告诉玩家匹配结果是不确定的，这就需要等待匹配结束的时候才能告知，如下图的场景：

        如上图所示，此时玩家2 点击匹配按钮，给服务器发送“我要进行匹配”这样的请求，服务器就会响应玩家2 的请求，同时要主动告诉玩家1 匹配成功，并告诉玩家1 它匹配到了哪个对手，这也就是消息推送的机制 ，所以我们下面要设计的前后端交互接口也都是基于 WebSocket 来展开的，前面文章介绍了 WebSocket 可以传输文本数据也可以传输二进制数据，我们这里就直接设计成让 WebSocket 传输 JSON 格式的文本数据即可，那么接口的设计就如下所示了：

  • 匹配连接：

                ws://127.0.0.1:8080/findMatch

  • 匹配请求：

                {

                        message: 'startMatch' / 'stopMatch',   // 开始/结束匹配

                }

  • 匹配响应1：

                {

                        ok: true / false,   // 匹配成功/失败

                        reason: "",          // 匹配如果失败, 失败原因的信息

                        message: 'startMatch' / 'stopMatch',

                }

        这个响应是客户端给服务器发送匹配请求之后，服务器立即返回的匹配响应。

  • 匹配响应2：

                {

                        ok: true / false,   // 匹配成功/失败

                        reason: "",

                        message: 'matchSuccess',

                }        

        这个响应是真正匹配到对手后，服务器主动推送回来的信息，匹配到的对手不需要在这个响应中体现，仍然都放在服务器中保存即可。

        上面设计好匹配模块中前后端交互的接口后，在通过 WebSocket 传输请求数据的时候，数据中不需要带有用户的身份信息，当前用户的身份信息在前面登录完成后就已经保存在 HttpSession 中了，在 WebSocket 中也是可以拿到之前登录完存在 HttpSession 中的信息。 

        关于上面的响应还要注意两点：

  • 客户端（页面）收到匹配的响应之后，就直接跳转到游戏房间页面；
  • 如果返回的匹配响应 ok 的值为 false，则弹框的方式显示错误原因，并跳转回登录页面。

二、游戏大厅页面

1.页面代码编写

        我们要编写游戏大厅页面的大致轮廓如下图所示：

        上图中的导航栏与页面主题区域的样式在前面已经编写过了，存放在了公共样式设置的 common.css 代码中，在下面编写游戏大厅页面的代码时就可以直接进行引用了，下面我们就来创建  game_hall.html 在这里编写游戏大厅的代码，这里主要包含：

  • #screen 用于显示玩家的分数信息；
  • #match-button 作为匹配按钮

        代码及详细的介绍如下所示： 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戏大厅</title><!-- 引入 css 样式 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/game_hall.css">
</head>
<body><div class="nav">五子棋对战</div><!-- 整个页面的容器元素 --><div class="container"><!-- 这个 div 在 container 中是处于垂直水平居中这样的位置 --><div><!-- 展示用户信息 --><div id="screen"></div><!-- 匹配按钮 --><div id="match-button">开始匹配</div></div></div></body>
</html>

        游戏大厅样式 game_hall.css 的代码及介绍如下所示：

/* 游戏大厅样式 *//* 设置页面主体区域样式 */
.container {width: 100%;/* 导航栏已经占据 50px 像素这里使游戏大厅界面把剩余部分铺满 */height: calc(100% - 50px);/* 设置弹性布局 */display: flex;/* 设置位置垂直水平居中 */align-items: center;justify-content: center;
}/* 设置用户信息的展示框样式 */
#screen {width: 400px;height: 200px;/* 设置文字样式 */font-size: 20px;/* 设置背景颜色 */background-color: gray;/* 设置文字颜色 */color: white;/* 把边框的棱角钝化 */border-radius: 10px;/* 设置玩家信息内部位置 */text-align: center;/* 两行文本 */line-height: 100px;
}/* 设置匹配按钮的样式 */
#match-button {width: 400px;height: 50px;/* 设置字体样式 */font-size: 20px;color: white;/* 设置背景颜色 */background-color: orange;/* 去除边框与轮廓线 */border: none;outline: none;/* 把边框的棱角钝化 */border-radius: 10px;/* 设置文字位置 */text-align: center;/* 使文字垂直居中 */line-height: 50px;/* 增加与上面 div 的间距 */margin-top: 20px;
}/* 设置按钮被点击后的样式 */
#match-button:active {background-color: gray;
}

        到这里，游戏房间页面的代码就编写完毕了， 页面如下图所示：

        由于没有进行前后端交互代码的编写，所以这里的玩家信息还暂且获取不到。 

2.前后端交互代码编写

        为了让游戏大厅的页面能够获取到用户的信息，我们使用 Ajax 来使页面和服务器之间进行交互，这里的步骤是先引入 jQuery 代码，然后根据前面文章中规定好的获取用户信息的接口来编写这里前后端交互的代码，获取用户信息的接口如下图所示：

        在 game_hall.html 中编写 js 代码，通过 jQuery 中的 Ajax 来和服务器进行交互，同时创建 WebSocket 实例，建立 WebSocket 连接，来为后续匹配功能做准备，代码及详细介绍如下所示： 

    <!-- 引入 jQuery 代码 --><script src="js/jquery.min.js"></script><script>// 由于当前请求是在页面加载时就发送的// 所以直接进行前后端交互$.ajax({type: 'get',url: '/userInfo',success: function(body) {let screeDiv = document.querySelector('#screen');// 把要显示的数据组织好,放入 inneerHTML 中,进而显示到页面上screeDiv.innerHTML = '玩家: ' + body.username + " 分数: " + body.score+ "<br> 比赛场次: " + body.totalCount + " 获胜场次: " + body.winCount;},error: function() {alert("获取用户信息失败!");}});// 此处进行初始化 WebSocket, 并且实现前端的匹配逻辑.let websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");websocket.onopen = function() {console.log("onopen");}websocket.onclose = function() {console.log("onclose");}websocket.onerror = function() {console.log("onerror");}// 监听页面关闭事件,在页面关闭之前,手动调用这里的 websocket 的 close 方法.websocket.onbeforeunload = function() {websocket.close();}// 处理服务器返回的响应数据websocket.onmessage = function(e) {// 这个响应是针对 "开始匹配" / "停止匹配" 来对应的// 解析得到的响应对象,返回的数据是一个 JSON 字符串,解析成 js 对象let resp = JSON.parse(e.data);let matchButton = document.querySelector('#match-button');if (!resp.ok) {console.log("游戏大厅中接收到了失败响应! " + resp.reason);return;}if (resp.message == 'startMatch') {// 开始匹配请求发送成功console.log("进入匹配队列成功!");matchButton.innerHTML = '匹配中...(点击停止)';} else if (resp.message == 'stopMatch') {// 结束匹配请求发送成功console.log("离开匹配队列成功!");matchButton.innerHTML = '开始匹配';} else if (resp.message == 'matchSuccess') {// 已经匹配到对手console.log("匹配到对手! 进入游戏房间!");location.assign("/game_room.html");} else {console.log("收到了非法的响应! message = " + resp.message);}}// 给匹配按钮添加一个点击事件let matchButton = document.querySelector('#match-button');// 点击匹配按钮后触发的操作matchButton.onclick = function() {// 在触发 websocket 请求之前,先确认下 websocket 连接是否正常if (websocket.readyState == websocket.OPEN) {// 当前 readyState 处在 OPEN 状态,表示连接正常// 这里发送的数据有两种可能, 开始匹配/停止匹配if (matchButton.innerHTML == '开始匹配') {console.log("开始匹配");// 通过 websocket 发送数据// send 是把一个 JSON 类型的数据进行发送// JSON.stringify() 先把我们要发送的数据转换成 JSON 字符串websocket.send(JSON.stringify({message: 'startMatch',}));} else if (matchButton.innerHTML == "匹配中...(点击停止)") {console.log("停止匹配");websocket.send(JSON.stringify({message: 'stopMatch',}));}} else {// 这是说明连接当前是异常的状态alert("当前您的连接已经断开! 请重新登录!");location.assign("/login.html");}}</script>

       在上面前后端交互代码的编写中，我们还要注意一点， JSON 字符串和 JS 对象的转换，这里 JSON 字符串转成 JS 对象用到的方法是 JSON.parse，JS 对象转成 JSON 字符串使用的方法是 JSON.stringify。

        编写完前后端交互的代码后，我们要注意一点，当我们修改完 css 样式或者 js 文件之后，往往需要在访问的页面中使用 Ctrl + F5 强制刷新一下页面才能生效，否则，浏览器可能仍然使用旧版本的代码，这是由于 css / js 的代码一般比较大，加载会比较慢，服务器会在第一次加载页面的时候把 css / js 部分的代码下载下来作为缓存，这样下次访问速度就会变快，Ctrl + F5 就是清除页面缓存让浏览器重新加载 css / js 代码。 

3.测试获取用户信息功能

        前后端交互做好之后，我们就可以启动服务器，在浏览器中输入：http://127.0.0.1:8080/login.html 进入登录页面，通过登录跳转到游戏大厅页面，来观察是否可以正确获取到用户信息，测试过程如下图所示：

        经过测试，图中的结果符合预期，游戏大厅页面中获取用户信息的功能就算是一个正常的功能了。 

·结尾

        文章到此就要结束了，本篇文章对匹配模块要用到的前后端交互接口进行了设计，并将游戏大厅的页面进行了编写，完成了获取用户信息的前后端交互代码，并测试了其功能的正确性，那么到这，五子棋匹配模块中的客户端代码开发也就基本完成了，如果对本篇文章内容有所疑惑，欢迎在评论区进行留言，如果感觉本篇文章还不错，希望能收到你的三连支持，下一篇文章就开始五子棋项目匹配模块中服务器端的代码开发了，我们下一篇文章再见吧~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/59927.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【微服务】不同微服务之间用户信息的获取和传递方案

【微服务】不同微服务之间用户信息的获取和传递方案

如何才能在每个微服务中都拿到用户信息&#xff1f;如何在微服务之间传递用户信息&#xff1f; 文章目录 概述利用微服务网关做登录校验网关转微服务获取用户信息openFeign传递微服务之间的用户信息 概述 要在每个微服务中获取用户信息&#xff0c;可以采用以下几种方法&#…
阅读更多...
Unity 生命周期的事件顺序

Unity 生命周期的事件顺序

在 Unity 中&#xff0c;生命周期的事件顺序是从对象的创建到销毁的过程。下面是常见生命周期方法的调用顺序&#xff1a; 1. Awake()&#xff1a; 在对象被实例化时调用&#xff0c;适合进行初始化设置。此时&#xff0c;所有的组件已被加载&#xff0c;但场景中的其他对…
阅读更多...
YOLOv7-0.1部分代码阅读笔记-yolo.py

YOLOv7-0.1部分代码阅读笔记-yolo.py

yolo.py models\yolo.py 目录 yolo.py 1.所需的库和模块 2.class Detect(nn.Module): 3.class IDetect(nn.Module): 4.class IAuxDetect(nn.Module): 5.class IBin(nn.Module): 6.class Model(nn.Module): 7.def parse_model(d, ch): 8.if __name__ __main__…
阅读更多...
OpenEuler 下 Docker 安装、配置与测试实例

OpenEuler 下 Docker 安装、配置与测试实例

文章目录 前言1. 环境准备2. 下载 Docker3.配置服务文件4.配置加速器加速下载docker镜像5. 验证 Docker 安装 前言 Docker 安装大致分为包管理器安装、脚本安装、离线手动安装、容器编排工具安装、桌面版安装等&#xff0c;每种安装各有特点&#xff0c;但涉及知识面不少&…
阅读更多...
ubuntu正确安装nvidia显卡驱动

ubuntu正确安装nvidia显卡驱动

之前安装显卡驱动一直会导致黑屏&#xff0c;记录下这次安装成功的流程&#xff1a; nvidia驱动官网地址 # 1.查看当前安装的软件&#xff0c;只能查看apt install方式安装的nvidia软件&#xff0c;无法查看.run文件安装的nvidia驱动 sudo dpkg --list | grep nvidia-* sudo ap…
阅读更多...
GK7205V500 GK7250V510 国科微 SOC芯片

GK7205V500 GK7250V510 国科微 SOC芯片

GK7205V500 芯片是国科推出的新一代高集成度、高画质、低码率、低功耗的 AI IP Camera SoC 芯 片。 芯片集成 ARM Cortex A7 处理器&#xff0c;支持专业的 ISP 图像处理单元&#xff0c;H.265/H.264 视频编码与神经网络 处理单元&#xff08;NPU&#xff09;&#xff0c…
阅读更多...
_浅谈单片机的gcc优化级别__以双音频信号发生器为例

_浅谈单片机的gcc优化级别__以双音频信号发生器为例

一、简介 gcc有多种优化级别&#xff0c;一般不选择的情况下&#xff0c;IDE默认是按照-Og或这-O2优化的。 以gcc编译器为例&#xff0c;浅谈一下优化级别&#xff0c;我们常见的优化一般是指gcc的-O2、-Og。除此之外&#xff0c;gcc还有-Os等一系列优化&#xff0c;链接器也有…
阅读更多...
qt QTreeWidgetItem详解

qt QTreeWidgetItem详解

1、概述 QTreeWidgetItem 是 Qt 框架中的一个类&#xff0c;专门用于在 QTreeWidget&#xff08;一个基于项的树形视图&#xff09;中表示单个节点&#xff08;或称为项&#xff09;。QTreeWidget 继承自 QAbstractItemView&#xff0c;而 QTreeWidgetItem 则作为树中的一个节…
阅读更多...
[每周一更]-(第122期)：模拟面试｜数据库面试思路解析

[每周一更]-(第122期)：模拟面试｜数据库面试思路解析

10｜数据库索引：为什么 MySQL 用 B+ 树而不用 B 树？ 为什么 MySQL 用 B+ 树而不用 B 树？ 什么是覆盖索引？ 什么是聚簇索引/非聚簇索引？ 什么是哈希索引？MySQL InnoDB 引擎怎么创建一个哈希索引？ 什么回表？如何避免回表？ 树的高度和查询性能是什么关系？ 什么是索引最左…
阅读更多...
java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

用大模型做车牌号识别&#xff0c;最简单高效 在Java场景中&#xff0c;java识别车牌号的需求非常普遍。过去&#xff0c;我们主要依赖OCR等传统方法来实现java识别车牌号&#xff0c;但这些方法的效果往往不稳定。随着技术的发展&#xff0c;现在有了更先进的解决方案——大模…
阅读更多...
【学习笔记】SAP ABAP——子程序

【学习笔记】SAP ABAP——子程序

子程序&#xff1a; 参数&#xff1a; 参数(Parameter)是指调用子程序时用于传入、传出的值。子程序中的参数与一般用 DATA语句定义的局部变量相同。调用子程序时使用的参数叫实参(Actual Parameter)&#xff0c;在子程序中使用的参数叫虚参(Formal Parameter)。PERFORM 利用…
阅读更多...
计算机专业开题报告写法，该怎么写好？

计算机专业开题报告写法，该怎么写好？

不会写开题报告&#xff0c;或者想要一些论文模版的&#xff0c;欢迎评论&#xff0c;会第一时间给大家。 题报告是计算机专业大学毕业生在开展毕业设计或论文研究前&#xff0c;对研究课题进行详细介绍和计划的重要环节。作为开题者对科研课题的一种文字说明&#xff0c;开题…
阅读更多...
Python世界：力扣题704二分查找

Python世界：力扣题704二分查找

Python世界&#xff1a;力扣题704二分查找 任务背景思路分析代码实现测试套件本文小结 任务背景 问题来自力扣题目704&#xff1a;Binary Search&#xff0c;大意如下&#xff1a; Given an array of integers nums which is sorted in ascending order, and an integer target…
阅读更多...
FreeRTOS学习日志--中断测试实验，以及遇到的问题

FreeRTOS学习日志--中断测试实验，以及遇到的问题

目录 实验项目&#xff1a;FreeRTOS 中断测试实验 1、实验目的 2、实验设计 遇到的问题 stm32F103战舰在运行程序后&#xff0c;USB232串口不能接收到信号问题。 从跑马灯FreeRTOS文件基础上移植的FreeRTOS中断无效&#xff0c;而例程中断有效问题。 问题来源与解决方法…
阅读更多...
shodan[3](泷羽sec)

shodan[3](泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面&#xff0c;了解网络安全领域的见闻&#xff0c;了…
阅读更多...
Windows系统服务器怎么设置远程连接？详细步骤

Windows系统服务器怎么设置远程连接？详细步骤

一、什么是Windows远程桌面连接? Windows远程桌面(Remote Desktop)功能使用户能够通过网络连接到另一台Windows计算机&#xff0c;实现远程操作。远程桌面非常适合系统管理员、技术支持人员以及那些需要远程工作的人&#xff0c;它允许用户以图形界面的方式访问远程计算机&…
阅读更多...
Spring配置文件初始化加载（一）

Spring配置文件初始化加载（一）

1.枚举 public enum TestEnum {type_01("01", "zeroTest01ServiceImpl"),type_02("02", "zeroTest02ServiceImpl"),type_03("03", "zeroTest03ServiceImpl");private String type;private String pathClass; } …
阅读更多...
Element UI组件Dialog显示闪动问题【解决方案】

Element UI组件Dialog显示闪动问题【解决方案】

在ElementUI中&#xff0c;el-dialog弹窗确实有时会导致页面出现抖动或闪动的问题。这通常是由于弹窗出现时对页面布局的影响&#xff0c;特别是滚动条的出现或消失&#xff0c;导致了页面的重新布局和渲染。以下是一些解决或缓解这一问题的方法&#xff1a; 解决方案 1. 关闭…
阅读更多...
【022C】基于51单片机音乐盒

【022C】基于51单片机音乐盒

☆、设计硬件组成&#xff1a;51单片机最小系统按键控制LCD1602液晶显示DS18B20温度传感器喇叭。 1、本设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片&#xff1b; 2、采用LCD1602显示播放歌曲名、歌曲序号、歌曲播放时间&#xff1b; 3、播放音乐通过按键可以实…
阅读更多...
计算机毕业设计Python流量检测可视化 DDos攻击流量检测与可视化分析 SDN web渗透测试系统 网络安全 信息安全 大数据毕业设计

计算机毕业设计Python流量检测可视化 DDos攻击流量检测与可视化分析 SDN web渗透测试系统 网络安全 信息安全 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
最新文章

Copyright @ 2022~2023