当前位置：首页 > article >正文

[网页五子棋][匹配模块]前后端交互接口(消息推送机制)、客户端开发(匹配页面、匹配功能)

article 2025/6/4 23:56:00

让多个用户，在游戏大厅中能够进行匹配，系统会把实力相近的两个玩家凑成一桌，进行对战

约定前后端交互接口

消息推送机制

匹配这样的功能，也是依赖消息推送机制的

玩家 1 点击开始匹配按钮，就会告诉服务器：我要开始进行匹配
玩家发送匹配请求，这个事情是确定（点击了匹配按钮，就会发送匹配请求），服务器什么时候告知玩家匹配结果（你到你排到了谁），就需要等待匹配结束的时候才能告知
正是因为服务器自己也不确定，什么时候能告知玩家匹配的结果，因此就需要依赖消息推送机制
- 当服务器这里匹配成功之后，就主动的告诉当前排到的所有玩家，“你排到了”

这里就需要用到消息推送机制，也就是需要用到 websocket

接下来约定和前后端交互接口，也都是基于 websocket 来展开的
和前面的 HTTP 还是有点区别的

交互接口约定

websocket 可以传输文本数据，也能传输二进制数据。此处就直接设计成让 websocket 传输 JSON 格式的文本数据即可

匹配请求

客户端通过 websocket 给服务器发送一个 JSON 格式的文本数据
- ws://127.0.0.1:8080/findMatch
  {
  message: 'startMarch' / 'stopMatch' // 开始匹配/结束匹配
  }

在通过 websocket 传输请求数据的时候，数据中是不必带有用户身份信息的，当前用户的身份信息，在前面登录完成后，就已经保存到 HttpSession 中了。websocket 里，也是能拿到之前登录好的 HttpSession 中的信息的

匹配响应 1

ws://127.0.0.1:8080/Match
{
ok: true, // 匹配成功
reason: ‘’, // 匹配如果失败，失败原因的信息
message: ‘startMatch’ / ‘stopMatch’,
}

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

匹配响应 2

ws://127.0.0.1:8080/findMatch
{
ok: true.
reason: ‘’,
message: ‘matchSuccess’
}

这个响应是真正匹配到对手之后，服务器主动推送回来的信息

匹配到的对手不需要在这个响应中体现，仍然都放到服务器这边来保存即可

客户端开发

匹配页面

image.png|508

game_hall. html

创建 game_hall. html，主要包含

#screen 用于显示玩家的分数信息
button#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>  <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>    <script src="js/jquery.min.js"></script>  <script>        $.ajax({  type: 'get',  url: '/userInfo',  success: function(body) {  // 将 user 对喜爱那个添加到页面的显示内容中  let screenDiv = document.querySelector("#screen");  screenDiv.innerHTML = '玩家: ' + body.username + '分数: ' + body.score  + "<br> 比赛场次: " + body.totalCount + "获胜场次: " + body.winCount;  },  error: function() {  alert("获取用户信息失败!")  }  })  </script>  
</body>  
</html>

game_hall.css

.container {  width: 100%;  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;  margin-top: 20px;  
}  #match-button:active {  background-color: gray;  
}

image.png|233

当我们修改了 css 样式/ JS 文件之后，往往要在浏览器中使用 cmd+shift+R（Windows：ctrl+f5）强制刷新，才能生效
否则浏览器可能仍然在执行旧版本的代码（浏览器自带缓存）

匹配功能

编辑 game_hall.html 的 js 部分代码

点击匹配按钮，就会进入匹配逻辑，同时按钮上提示“匹配中...(点击取消)”字样
再次点击匹配按钮，则会取消匹配
当匹配成功后，服务器会返回匹配成功的响应，页面跳转到 game_room.html

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>游戏大厅</title>  <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>    <script src="js/jquery.min.js"></script>  <script>        $.ajax({  type: 'get',  url: '/userInfo',  success: function(body) {  // 将 user 对喜爱那个添加到页面的显示内容中  let screenDiv = document.querySelector("#screen");  screenDiv.innerHTML = '玩家: ' + body.username + '分数: ' + body.score  + "<br> 比赛场次: " + body.totalCount + "获胜场次: " + body.winCount;  },  error: function() {  alert("获取用户信息失败!")  }  });  // 此处进行初始化 websocket，并且实现前端匹配逻辑  // 此处的路径必须写作 /findMatch，千万不要写作 /findMatch/        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 方法  window.onbeforeunload = function() {  websocket.close();  }  // 一会重点来实现，要处理服务器返回的响应  websocket.onmessage = function(e) {  // 处理服务器返回的响应数据，这个响应就是针对“开始匹配”/“结束匹配”来对应的  // 解析得到的响应对象，返回的数据是一个 JSON 字符串，解析成 js 对象  let resp = JSON.parse(e.data);  let match-button = 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) {  // 如果当前 redyState 处于 OPEN 状态，说明连接好着的  // 这里发送的数据有两种可能，开始匹配/停止匹配  if (matchButton.innerHTML == '开始匹配') {  console.log("开始匹配");  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>  
</body>  
</html>

此部分主要逻辑从 36 行开始

JSON 字符串和 JS 对象的转换

JSON 字符串转换成 JS 对象：JSON.pares
JS 对象转换成 JSON 对象：JSON.stringify

JSON 字符串和 Java 对象的转换

JSON 字符串转换成 Java 对象：ObjectMapper.readValue
Java 对象转成 JSON 字符串：ObjectMapper.writeValueAsString

[网页五子棋][匹配模块]前后端交互接口(消息推送机制)、客户端开发(匹配页面、匹配功能)

让多个用户，在游戏大厅中能够进行匹配，系统会把实力相近的两个玩家凑成一桌，进行对战约定前后端交互接口消息推送机制匹配这样的功能，也是依赖消息推送机制的玩家 1 点击开始匹配按钮，就会告诉服务器&#xff1…...

编程日记 2025/6/3 12:11:11

【数据分析】Matplotlib+Pandas+Seaborn绘图

【数据分析】MatplotlibPandasSeaborn绘图 （一）Matplotlib绘图1.1 matplotlib绘图方式1: 状态接口1.2 matplotlib绘图方式2: 面向对象1.3 通过安斯科姆数据集, 说明可视化的重要性1.4 MatPlotlib绘图-单变量-直方图1.5 MatPlotlib绘图-双变量-散点图1.6 …...

编程日记 2025/6/3 12:51:01

NLP学习路线图（十五）：TF-IDF（词频-逆文档频率）

在自然语言处理（NLP）的浩瀚宇宙中，TF-IDF（词频-逆文档频率） 犹如一颗恒星，虽古老却依然璀璨。当ChatGPT、BERT等大模型光芒四射时，TF-IDF作为传统方法的代表，其简洁性、高效性与可解…...

编程日记 2025/6/3 23:01:19

[Redis] Redis命令在Pycharm中的使用

初次学习，如有错误还请指正目录 String命令 Hash命令 List命令 set命令 SortedSet命令连接pycharm的过程见：[Redis] 在Linux中安装Redis并连接桌面客户端或Pycharm-CSDN博客 redis命令的使用见：[Redis] Redis命令（1&#xf…...

编程日记 2025/6/4 1:21:55

openpnp - 给M4x0.7mm的直油嘴加油的工具选择

文章目录 openpnp - 给M4x0.7mm的直油嘴加油的工具选择概述如果换上带卡口的M4x0.7直油嘴END openpnp - 给M4x0.7mm的直油嘴加油的工具选择概述 X导轨用了一个HG15的滑块滑块上的注油口的黄油嘴是M4x0.7mm的直油嘴。外表面是6边形的柱子，没有可以卡住加油嘴工…...

编程日记 2025/6/3 21:43:48

Azure Devops 系列之三- vscode部署function app

Azure Function App 是 Microsoft Azure 提供的一项无服务器计算服务，它允许您运行事件驱动的应用程序，而无需管理底层基础架构。它使您能够执行代码来响应各种事件，例如 HTTP 请求、队列消息、计时器以及许多其他类型的触发器。 Azure Function App 的主要功能：无服务器…...

编程日记 2025/6/4 1:12:57

EasyExcel复杂Excel导出

效果图展示 1、引入依赖  <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.2</version> </dependency>2、实体类 import com.alibaba.excel.annotatio…...

编程日记 2025/6/4 1:47:55

1，QT的编译教程

目录整体流程： 1，新建project文件 2,编写源代码 3，打开QT的命令行窗口 4，生成工程文件（QT_demo.pro） 5，生成Make file 6，编译工程 7，运行编译好的可执行文件整体流程： 1，新建project文件新建文本文件，后缀改为.cpp 2,编写源代码...

编程日记 2025/6/3 19:41:50

C++基础算法————深度优先搜索(DFS)

一、DFS算法原理（一）基本思想深度优先搜索（Depth-First Search，DFS）是一种用于遍历或搜索树或图的算法。它从一个起始节点开始，沿着一个方向尽可能深入地探索，直到无法继续为止，然后回溯到上一个节点，继续探索其他方向。这一过程可以用递归或栈结构来实现。（二…...

编程日记 2025/6/3 22:52:36

React 第五十节 Router 中useNavigationType的使用详细介绍

前言 useNavigationType 是 React Router v6 提供的一个钩子，用于确定用户如何导航到当前页面。它提供了关于导航类型的洞察，有助于优化用户体验和实现特定导航行为。一、useNavigationType 核心用途 1.1、检测导航方式： 判断用户是通过…...

编程日记 2025/6/3 11:27:10

【笔记】在 MSYS2（MINGW64）中安装 Python 工具链的记录

#工作记录 📌 安装背景操作系统：MSYS2 MINGW64当前时间：2025年6月1日Python 版本：3.12（默认通过 pacman 安装）目标工具链： pipxnumpypipsetuptoolswheel 🛠️ 安装过程与结果记录…...

编程日记 2025/6/3 15:11:03

npm install命令都做了哪些事情

npm install（或其简写 npm i）是 Node.js 项目中最重要的命令之一，它负责安装项目所需的所有依赖项。下面我将详细解释这个命令的完整执行过程和底层机制，让你彻底理解它背后的工作原理。一、npm install 的完整工作流程 1. 依赖…...

编程日记 2025/6/3 12:16:23

Linux 学习-模拟实现【简易版bash】

1、bash本质在模拟实现前，先得了解 bash 的本质 bash 也是一个进程，并且是不断运行中的进程证明：常显示的命令输入提示符就是 bash 不断打印输出的结果输入指令后，bash 会创建子进程，并进行程序替换证明&#x…...

编程日记 2025/6/3 15:11:02

【中国・珠海】2025 物联网与边缘计算国际研讨会（IoTEC2025）盛大来袭！

2025 物联网与边缘计算国际研讨会（IoTEC2025）盛大来袭！ 科技浪潮奔涌向前，物联网与边缘计算已成为驱动各行业变革的核心力量。在此背景下，2025 物联网与边缘计算国际研讨会（IoTEC2025）即将震撼…...

编程日记 2025/6/3 19:01:11

企业级安全实践：SSL/TLS 加密与权限管理（二）

案例分析：成功与失败的经验教训成功案例分析以一家知名电商企业 ABC 为例，该企业每天处理数百万笔订单，涉及大量用户的个人信息、支付信息和商品数据。在网络安全建设方面，ABC 电商高度重视 SSL/TLS 加密与权限管理。在 SSL…...

编程日记 2025/6/4 1:14:19

Java面试：从Spring Boot到分布式系统的技术探讨

场景一：电商平台的订单处理面试官： “谢先生，假设我们在一个电商平台工作，你将如何使用Spring Boot构建一个订单处理服务？” 谢飞机： “这个简单，我会使用Spring Boot快速启动项目&#xff0…...

编程日记 2025/6/3 21:58:10

NodeJS全栈开发面试题讲解——P7 DevOps 与部署和跨域等

✅ 7.1 如何部署 Node.js 项目到生产环境？用过哪些工具？ 面试官您好，我部署 Node.js 项目通常分为构建 → 上传 → 启动服务三步，常用工具包括 PM2、Nginx、Docker、Git Hooks、CI/CD 工具。 🛠️ 主要部署步骤&…...

编程日记 2025/6/4 1:55:47

中国高分辨率高质量地面CO数据集（2013-2023）

时间分辨率：日空间分辨率：1km - 10km共享方式：开放获取数据大小：9.83 GB数据时间范围：2013-01-01 — 2023-12-31元数据更新时间：2024-08-19 数据集摘要 ChinaHighCO数据集是中国高分辨率高质量近地表空气污…...

编程日记 2025/6/3 22:22:18

一、可能导致逃逸的5中情况 package mainimport "fmt"func main() {f1()f2()f3()f4()f5() }type animal interface {run() }type dog struct{}func (d *dog) run() {fmt.Println("狗在跑") }// 指针、map、切片为返回值的会发生内存逃逸 func f1() (*int,…...

编程日记 2025/6/4 1:03:46

MinVerse 3D触觉鼠标的技术原理与创新解析

MinVerse3D触觉鼠标通过三维交互和触觉反馈技术，彻底颠覆了传统二维鼠标的操作方式。用户在操作虚拟物体时，可以真实感知表面质感、重量和阻力。这种技术不仅为数字环境注入了深度与临场感，还在3D设计、游戏开发和工程仿真等领域展现了广泛潜…...

编程日记 2025/6/4 1:18:59

Spring Boot整活指南：从Helo World到“真香”定律

📌 一、Spring Boot的"真香"本质（不是996的福报） 你以为Spring Boot只是个简化配置的工具？Too young！它其实是程序员的摸鱼加速器。经典场景还原： 产品经理：“这个…...

编程日记 2025/6/3 20:36:44

Python-Selenium报错截图

报错截图设计方案： 功能：截图层主要用来存放selenium运行时的报错截图信息 1. 截图路径管理分层存储：在项目根目录下创建 screenshots 文件夹，并按日期进一步分类（如 20250601）。命名规范&#xff1…...

编程日记 2025/6/4 4:29:55

数论——质数和合数及求质数

质数和合数及求质数一个大于 1 的自然数，除了 1 和它自身外，不能被其他自然数整除的数叫做质数；否则称为合数。其中，质数又称素数。有的资料用的词不同，但质数和素数其实是一回事。规定 1 既不是质数也不是合数。 …...

编程日记 2025/6/3 15:45:46

nc 命令示例

nc -zv 实用示例示例 1：测试单个 TCP 端口（最常见） 目标： 检查主机 webserver.example.com 上的 80 端口 (HTTP) 是否开放。 nc -zv webserver.example.com 80成功输出： Connection to webserver.example.com (19…...

编程日记 2025/6/3 16:51:28

乾元通渠道商中标青海省自然灾害应急能力提升工程基层防灾项目

近日，乾元通渠道商中标青海省自然灾害应急能力提升工程基层防灾项目，乾元通作为设备厂家，为项目提供通信指挥类装备（多链路聚合设备）QYT-X1。青岛乾元通数码科技有限公司作为国家应急产业企业，深耕于数据调…...

编程日记 2025/6/3 16:15:51

Ubuntu取消开机用户自动登录

注：配置前请先设置登录密码，不同显示管理器配置方法不同，可用命令查看：cat /etc/X11/default-display-manager 一、LightDM 显示管理器，关闭 Ubuntu 系统用户自动登录查找自动登录配置文件，可以看到类似 a…...

编程日记 2025/6/4 2:06:22

用 Spring Boot 静态资源映射 vs 用 Nginx 提供静态文件服务总结

【1】Spring Boot 静态资源映射 vs 用 Nginx 提供静态文件服务 ✅ 简短回答： 在性能、并发能力、缓存控制、安全性等方面，Nginx 完胜。所以：如果你只是提供静态文件下载（如图片、PDF、Excel 等），强烈推荐…...

编程日记 2025/6/3 14:21:19

openssl-aes-ctr使用openmp加速

openssl-aes-ctr使用openmp加速 openssl-aes-ctropenmp omp for openssl-aes-ctr 本文采用openssl-1.1.1w进行开发验证开发；因为aes-ctr加解密模式中，不依赖与上一个模块的加/解密的内容，所以对于aes-ctr加解密模式是比较适合进行并行加速的…...

编程日记 2025/6/4 0:26:49