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

项目实战--网页五子棋（游戏大厅）(3)

news 来源：原创 2025/6/6 10:33:22

我们的游戏大厅界面主要需要包含两个功能，一是显示用户信息，二是匹配游戏按钮

1. 页面实现

hall.html

<!DOCTYPE html>
<html lang="ch">
<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/hall.css">
</head>
<body><div class="nav">五子棋</div><div class="container"><div class="dialog"><!-- 展示用户信息 --><div id="screen"></div><!-- 开始匹配 --><button id="match" onclick="findMatch()">开始匹配</button></div></div>
</body>
</html>

hall.css

.container {height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}.container .dialog {height: 350px;width: 299px;background-color: white;border-radius: 20px;padding-top: 30px;display: flex;justify-content: center;/* align-items: center; */flex-wrap: wrap
}.dialog *{display: flex;justify-content: center;align-items: center;
}.dialog #screen {width: 250px;height: 150px;background-color: wheat;border-radius: 10px;
}.dialog #match {width: 150px;height: 40px;background-color: rgb(255, 159, 33);border-radius: 10px;
}.dialog #match:active {background-color: rgb(204, 128, 21);
}

2. 获取用户信息接口

当用户进入游戏大厅时，就应该获取到登录用户的信息显示到页面上，我们使用js代码从访问后端接口获取信息：

    <script src="js/jquery.min.js"></script><script>$.ajax({type: 'post',url: '/user/getLoginUser',success: function(result) {if(result.username != null) {let screen = document.querySelector("#screen");screen.innerHTML = '当前玩家：' + result.username + '<br>天梯积分：' + result.score + '<br>比赛场次：' + result.totalCount + '<br>获胜场次：' + result.winCount;}else{alert("获取用户信息失败，请重新登录");location.href = "/login.html";}},error: function() {alert("获取用户信息失败");}});</script>

运行效果：

2. WebSocket前端代码

当用户点击匹配按钮时，需要告知服务器该用户要进行匹配，服务器如果接收到则立即回复表示正在匹配，当匹配成功服务器则又需要发送匹配信息给客户端。这里涉及到服务器主动给客户端发送消息的场景，所以我们使用websocket实现

2.1 初始化websocket

let webSocket = new WebSocket('ws://127.0.0.1:8080/findMatch');webSocket.onopen = function() {console.log("连接成功");}webSocket.onclose = function() {console.log("连接关闭");}webSocket.onerror = function() {console.log("error");}//页面关闭时释放webSocketwindow.onbeforeunload = function() {webSocket.close();}//处理服务器发送的消息webSocket.onmessage = function(e) {}function findMatch() {//检查websocket连接if(webSocket.readyState == webSocket.OPEN) {}else{alert("连接断开，请重新登录");location.href = "/login.html";}}

2.2 实现findMatch()方法

点击开始匹配按钮后就会执行findMatch方法，进入匹配状态，此时我们可以把开始匹配按钮替换成取消匹配按钮，再次点击则会向服务器发送取消匹配请求。

function findMatch() {//检查websocket连接if(webSocket.readyState == webSocket.OPEN) {if($("#match").text() == '开始匹配') {console.log("开始匹配");webSocket.send(JSON.stringify({message: 'startMatch' //约定startMatch表示开始匹配}));}else if($("#match").text() == '匹配中...') {console.log("停止匹配");webSocket.send(JSON.stringify({message: 'stopMatch' //约定stopMatch表示停止匹配}));}}else{alert("连接断开，请重新登录");location.href = "/login.html";}}

2.3 实现onmessage

我们约定服务器返回的响应为包含以下三个字段的json:

ok: true/false, //表示请求成功还是失败
errMsg: "错误信息", //请求失败返回错误信息
message: 'startMatch' / 'stopMatch' / 'success' //success表示请求成功

//处理服务器发送的消息webSocket.onmessage = function(e) {//解析json字符串为js对象let resp = JSON.parse(e.data);if(!resp.ok) {console.log(resp.errMsg);return;}if(resp.message == 'startMatch') {//开始匹配请求发送成功正在匹配//替换按钮描述$("#match").text("匹配中...");}else if(resp.message == 'stopMatch') {//取消匹配请求发送成功已取消匹配//替换按钮描述$("#match").text("开始匹配");}else if(resp.message == 'success'){//匹配成功console.log("匹配成功! 进入游戏房间");locating.href = "/game.html";}else{console.log("非法响应 errMsg:" + resp.errMsg);}}

3. WebSocket后端代码

3.1 注册websocket

创建TextWebSocketHandler子类，重写如下方法：

package org.ting.j20250110_gobang.websocket;import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;@Component
public class MatchWebSocket extends TextWebSocketHandler {//连接成功后执行@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {super.afterConnectionEstablished(session);}//接收到请求后执行@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {super.handleTextMessage(session, message);}//连接异常时执行@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {super.handleTransportError(session, exception);}//连接正常断开后执行@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {super.afterConnectionClosed(session, status);}
}

注册socket:

package org.ting.j20250110_gobang.config;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
import org.ting.j20250110_gobang.websocket.MatchWebSocket;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@AutowiredMatchWebSocket matchWebSocket;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(matchWebSocket, "/findMatch") //注意路径和前端对应//添加拦截器获取到session，方便获取session中的用户信息.addInterceptors(new HttpSessionHandshakeInterceptor());}
}

项目实战--网页五子棋（游戏大厅）(3)

我们的游戏大厅界面主要需要包含两个功能，一是显示用户信息，二是匹配游戏按钮 1. 页面实现 hall.html <!DOCTYPE html> <html lang"ch"> <head><meta charset"UTF-8"><meta name"viewport"…...

编程日记 2025/6/3 22:26:32

『实战项目』Cloud Backup System - 云备份

文章目录云备份项目服务端功能服务端功能模块划分客户端功能客户端模块划分项目条件Jsoncpp第三方库Bundle第三方库httplib第三方库Request类Response类Server类Client类搭建简单服务器搭建简单客户端服务端工具类实现 - 文件实用工具类服务器配置信息模块实现- 系统配置信息…...

编程日记 2025/6/3 22:27:20

【机器学习实战入门】使用OpenCV和Keras的驾驶员疲劳检测系统

嗜睡驾驶者警报系统防止司机疲劳驾驶警报系统中级 Python 项目 - 司机疲劳检测系统疲劳检测是一种安全技术，能够预防因司机在驾驶过程中入睡而造成的事故。本中级 Python 项目的目标是建立一个疲劳检测系统，该系统将检测到一个人的眼睛闭合了一段时…...

编程日记 2025/6/3 22:27:39

使用 spring boot 2.5.6 版本时缺少 jvm 配置项

2.5.6我正在使用带有版本和springfox-boot-starter版本的Spring Boot 项目3.0.0。我的项目还包括一个WebSecurityConfig扩展WebSecurityConfigurerAdapter并实现WebMvcConfigurer的类。但是，我面临的问题是指标在端点jvm_memory_usage_after_gc_percent中不可见/act…...

编程日记 2025/6/3 22:25:59

【强化学习】Soft Actor-Critic (SAC) 算法

📢本篇文章是博主强化学习（RL）领域学习时，用于个人学习、研究或者欣赏使用，并基于博主对相关等领域的一些理解而记录的学习摘录和笔记，若有不当和侵权之处，指出后将会立即改正，还望谅…...

编程日记 2025/6/3 22:27:04

2024年博客之星主题创作｜Android 开发：前沿技术、跨领域融合与就业技能展望

目录引言一、推动 Android 应用创新的核心力量 1.1 人工智能与机器学习的崛起 1.2 增强现实（AR）与虚拟现实（VR）的应用扩展 1.3 5G技术的推动 1.4 跨平台开发技术的成熟 1.4.1 React Native 1.4.2 Flutter 1.4.3 Taro …...

编程日记 2025/6/3 5:09:29

Spring Boot--@PathVariable、@RequestParam、@RequestBody

目录声明！！ 什么是RESTful？ RESTful 的基本原则无状态性（Stateless） 统一接口（Uniform Interface） 分层系统（Layered System） 缓存（Cacheable&#…...

编程日记 2025/6/3 22:26:15

网站HTTP改成HTTPS

您不仅需要知道如何将HTTP转换为HTTPS，还必须在不妨碍您的网站自成立以来建立的任何搜索排名权限的情况下进行切换。为什么应该从HTTP转换为HTTPS？ 与非安全HTTP于不同，安全域使用SSL（安全套接字层）服务器上的加密代…...

编程日记 2025/6/3 18:34:12

Spring Boot + Netty + WebSocket 实现消息推送

1、关于Netty Netty 是一个利用 Java 的高级网络的能力，隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。 2、Maven依赖 <dependencies><dependency><gr…...

编程日记 2025/6/3 8:23:06

AI之HardWare：英伟达NvidiaGPU性价比排名(消费级/专业级/中高端企业级)以及据传英伟达Nvidia2025年将推出RTX 5090/5080、华为2025年推出910C/910D

AI之HardWare：英伟达NvidiaGPU性价比排名(消费级/专业级/中高端企业级)以及据传英伟达Nvidia2025年将推出RTX 5090/5080、华为2025年推出910C/910D 目录英伟达NvidiaGPU性能排名(消费级/专业级/中高端企业级) NVIDIA中消费级和专业级 GPU NVIDIA中高端企业GPU …...

编程日记 2025/6/3 16:29:25

ESP32云开发二( http + led + lcd)

文章目录前言先上效果图platformio.iniwokwi.tomldiagram.json源代码编译编译成功上传云端完结撒花⭐⭐⭐⭐⭐ 前言阅读此篇前建议先看此片熟悉下wokwi https://blog.csdn.net/qq_20330595/article/details/144289986 先上效果图 Column 1Column 2 platformio.ini wokwi…...

编程日记 2025/6/4 7:43:11

JavaScript语言的软件工程

JavaScript语言的软件工程引言在当今软件开发的浪潮中，JavaScript已不仅仅是一个简单的前端脚本语言。它的位置已经升华为全栈开发的重要语言之一，借助Node.js等技术，JavaScript不仅可以用于浏览器环境，还可以在后端服务器中运…...

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

【Qt】04－Lambda表达式

前言一、概念引入二、使用方法2.1 基本用法代码示例2.2 捕获外部变量2.3 参数列表三、完整代码mywidget.cppsecondwidget.cppmywidget.hsecondwidget.h 总结前言一、概念引入 Lambda表达式（Lambda Expressions）是C11标准引入的一种匿名函数对象&…...

编程日记 2025/6/4 7:42:06

Golang 生态学习

1. Go 语言基础在深入 Go 语言的生态之前，首先需要掌握 Go 语言本身的核心特性。 • Go 语言官方文档：https://golang.org/doc/ Go 官方文档是学习语言基础和标准库的首选资源。 • 学习内容： • 基础语法：数据类型、控制流…...

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

Arcgis Pro安装完成后启动失败的解决办法

场景之前安装的Arcgis Pro 今天突然不能使用了，之前是可以使用的，自从系统更新了以后就出现了这个问题。环境描述 Arcgis Pro 3.0 Windows 10 问题描述打开Arcgis Pro，页面也不弹出来，打开任务管理器可以看到进程创建之后&…...

编程日记 2025/6/4 7:43:28

支持向量机SVM的应用案例

支持向量机（Support Vector Machine,SVM）是一种强大的监督学习算法，广泛应用于分类和回归任务。基本原理 SVM的主要目标是周到一个最优的超平面，该超平面能够将不同类别的数据点尽可能分开，并且使离该超平面最近的数…...

编程日记 2025/6/3 22:26:11

Linux中的Iptables介绍

文章目录 iptables1. 概述2. **工作原理**3. 数据包处理流程与规则匹配顺序4. 常用的匹配条件5. 动作类型6. 基本命令7. 高级功能 iptables 1. 概述 Iptables 是一个用于配置 Linux 内核防火墙的用户空间工具。它能够对进出服务器的网络数据包进行过滤、修改和转发等操作&…...

编程日记 2025/6/3 8:37:04

14天学习微服务--＞第2天：Spring Cloud深入与实践

第2天：Spring Cloud深入与实践一、Spring Cloud核心组件深入在微服务架构中，Spring Cloud 提供了一系列核心组件来支持服务的注册与发现、配置管理、负载均衡等功能。今天我们将深入学习其中的三个关键组件：Eureka/Nacos（服务…...

编程日记 2025/6/4 3:56:35

使用 Box2D 库开发愤怒的小鸟游戏

使用 Box2D 库开发愤怒的小鸟游戏 Box2D 是一个开源的 2D 物理引擎，广泛应用于游戏开发中，特别是在模拟物体的运动、碰撞、重力等方面。在本文中，我们将利用 Box2D 库开发一个简化版的愤怒的小鸟游戏。我们将一步步展示如何实现物理引擎的…...

编程日记 2025/6/4 3:56:18

C# ComboBox 控件属性

ComboBox 的基本属性在C#中，ComboBox控件具有多种属性，这些属性可以帮助开发者更好地控制和管理控件的各个方面。以下是一些基本的ComboBox属性及其功能： 公共属性 AccessibilityObject：获取分配给该控件的AccessibleObject。 Ac…...

编程日记 2025/6/4 3:58:33

《keras 3 内卷神经网络》

keras 3 内卷神经网络作者：Aritra Roy Gosthipaty 创建日期：2021/07/25 最后修改时间：2021/07/25 描述：深入研究特定于位置和通道无关的“内卷”内核。 （i） 此示例使用 Keras 3 在 Colab 中查看 GitHub …...

编程日记 2025/6/3 21:33:35

Linux：文件描述符fd、系统调用open

目录一、文件基础认识二、C语言操作文件的接口 1.> 和 >> 2.理解“当前路径” 三、相关系统调用 1.open 2.文件描述符 3.一切皆文件 4.再次理解重定向一、文件基础认识文件内容属性。换句话说，如果在电脑上新建了一个空白文档&#xff0…...

编程日记 2025/6/4 3:58:16

ToDesk设置临时密码和安全密码都可以当做连接密码使用

ToDesk 在各领域办公都已经是非常常见了为了安全 ToDesk 设置了连接密码，想连接需要输入远程码和连接密码我们刚打开系统默认给我们用的是临时密码，安全性确实很强和定时Tokey一样，固定时间切换。但是如果我们要经常连接这个电脑&a…...

编程日记 2025/6/3 21:45:39

C#防止重复提交

C#防止重复提交文章目录 C#防止重复提交前言防止重复提交的思路Web API 防止重复提交代码实现代码讲解使用方法 MVC防止重复提交总结前言当用户在前端进行提交数据时，如果网络出现卡顿和前端没有给出响应的话顾客通常都会狂点提交按钮，这样就很容易导…...

编程日记 2025/6/2 5:13:08

46. 全排列 class Solution {List<List<Integer>> ret;List<Integer> path;boolean[] check;public List<List<Integer>> permute(int[] nums) {ret new ArrayList<>();path new ArrayList<>();check new boolean[nums.length…...

编程日记 2025/6/4 3:58:00

unity插件Excel转换Proto插件-ExcelToProtobufferTool

unity插件Excel转换Proto插件-ExcelToProtobufferTool **ExcelToProtobufTool 插件文档****1. 插件概述****2. 默认配置类：DefaultIProtoPathConfig****属性说明** **3. 自定义配置类****定义规则****示例代码** **4. 使用方式****4.1 默认路径****4.2 自定义路径**…...

编程日记 2025/6/4 3:57:11

manim(manimgl)安装教学-win11(2024-08)

manim 目前的两种版本：★★ 稍微捋一捋【项目中的 readme.md 十分重要】 manimgl 是 Grant Sanderson（YouTube频道 3Blue1Brown的作者）等人开发。现在为 manimgl，在维护中。 manimCE 是2020年后的 manim 分支 manim community e…...

编程日记 2025/6/4 3:57:28

【语言处理和机器学习】概述篇（基础小白入门篇）

前言自学笔记，分享给语言学/语言教育学方向的，但对语言数据处理感兴趣但是尚未入门，却需要在论文中用到的小伙伴，欢迎大佬们补充或绕道。ps：本文不涉及公式讲解（文科生小白友好体质）&#xff…...

编程日记 2025/6/3 5:38:37

脚本工具：PYTHON

Python 是一种高级编程语言，以其简洁清晰的语法和强大的功能被广泛应用于各种领域，包括自动化脚本编写、数据分析、机器学习、Web开发等。以下是一些关于使用 Python 编写脚本工具的基本介绍、常用库以及一些实用技巧总结。这里写目录标题基础知识安装…...

编程日记 2025/6/3 22:28:11

一文讲解Redis常见使用方式

1. 单机模式部署适用场景： • 开发和测试环境，或者对高可用性要求不高的小型项目。部署步骤： 1. 拉取 Redis 镜像： docker pull redis:latest 2. 运行 Redis 容器： docker run -d --name redis-single -p 637…...

编程日记 2025/6/3 16:46:31

Gin 源码概览 - 路由

本文基于gin 1.1 源码解读 https://github.com/gin-gonic/gin/archive/refs/tags/v1.1.zip 1. 注册路由我们先来看一段gin代码，来看看最终得到的一颗路由树长啥样 func TestGinDocExp(t *testing.T) {engine : gin.Default()engine.GET("/api/user", f…...

编程日记 2025/6/3 22:29:51

【计算机网络】传输层协议TCP与UDP

传输层传输层位于OSI七层网络模型的第四层，主要负责端到端通信，可靠性保障（TCP），流量控制(TCP)，拥塞控制(TCP)，数据分段与分组，多路复用与解复用等，通过TCP与UDP协议实现…...

编程日记 2025/6/3 23:07:02

iOS UIScrollView的一个特性

1如果UIScrollView 的contentSize.height > scrollView.bounds.size.height - scrollView.contentInset.top - scrollView.contentInset.bottom ， 则scrollView就可以滚动，否则无法滚动并且最大的滚动范围就是 contentSize.height - （ s…...

编程日记 2025/6/3 22:28:44

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令： 查看镜像：docker images 二、启动镜像启动mysql01、02容器： docker run -d -p 3310:3306 -v /root/mysql/node-1/config:/etc/mysql/ -v /root/mysql/node-1/data:/var/lib/mysql -e MYS…...

编程日记 2025/6/3 22:29:16

python爬虫入门（实践）

python爬虫入门（实践） 一、对目标网站进行分析二、博客爬取获取博客所有h2标题的路由确定目标，查看源码代码实现 """ 获取博客所有h2标题的路由 """url "http://www.crazyant.net"import re…...

编程日记 2025/6/3 16:06:16

通过Ukey或者OTP动态口令实现windows安全登录

通过安当SLA（System Login Agent）实现Windows安全登录认证，是一种基于双因素认证（2FA）的解决方案，旨在提升 Windows 系统的登录安全性。以下是详细的实现方法和步骤： 1. 安当SLA的核心功能安…...

编程日记 2025/6/3 16:45:45

C 语言雏启：擘画代码乾坤，谛观编程奥宇之初瞰

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。* 这一课主要是让大家初步了解C语言，了解我们的开发环境，main函数，库…...

编程日记 2025/6/3 22:29:33

【Linux系统编程】—— 进程替换及其在操作系统中的应用与实现

文章目录什么是进程替换？进程替换当中的接口单进程替换多进程的替换详解exec接口execlexeclpexecv 前言： 本篇博客将深入探讨进程替换的概念及其在操作系统中的作用。我们将介绍进程替换的基本原理，探讨操作系统如何通过进程的切换来实现任务…...

编程日记 2025/6/4 10:48:04

“裸奔”时代下该如何保护网络隐私

网络隐私的保护之道引言在这个信息爆炸的时代，网络已经深入到我们生活的每一个角落。你是否曾想过，在享受这些便利时，你的个人隐私正面临着严峻的挑战？网络隐私的现状警示着我们，信息泄露的事件屡见不鲜&#xff0…...

编程日记 2025/6/2 18:23:38

分类问题(二元,多元逻辑回归,费歇尔判别分析)spss实操

分类模型： 二分类和多分类： 对于二分类模型 ，我们将介绍逻辑回归和Fisher线性判别分析两种分类算法; 对于多分类模型，我们将简单介绍Spss中的多分类线性判别分析和多分类逻辑回归的操作步骤二分类: 基于广义线性模型&#x…...

编程日记 2025/6/3 10:26:20

Spring 核心技术解析【纯干货版】- IV：Spring 切面编程模块 Spring-Aop 模块精讲

随着软件开发技术的不断进步，面向切面编程（AOP）作为一种重要的编程思想，已经在现代开发中占据了重要地位。它通过将横切逻辑从业务逻辑中分离出来，使得代码更加清晰、易于维护。Spring AOP 作为 Spring 框架的核心模块…...

编程日记 2025/5/31 6:39:57

STM32之FreeRTOS开发介绍（十九）

STM32F407 系列文章 - freertos（十九） 目录前言一、简述二、开源网址三、原理及功能特性 1.原理简介 2.功能介绍 1.任务调度 2.任务管理 3.中断管理 4.消息队列 3.特点说明 4.优缺点四、参考书籍五、实现方式总结前言 FreeRTOS是…...

编程日记 2025/6/3 21:41:28

2024年美赛C题评委文章及O奖论文解读 | AI工具如何影响数学建模？从评委和O奖论文出发-O奖论文做对了什么？

模型假设仅仅是简单陈述吗？允许AI的使用是否降低了比赛难度？还在依赖机器学习的模型吗？处理题目的方法有哪些？O奖论文的优点在哪里？ 本文调研了当年赛题的评委文章和O奖论文，这些问题都会在文章中一一解答…...

编程日记 2025/6/1 18:19:26

第14篇：从入门到精通：掌握python上下文管理器

第14篇：上下文管理器内容简介本篇文章将深入探讨Python中的上下文管理器（Context Manager）。您将了解上下文管理器的概念与用途，学习如何实现自定义的上下文管理器，以及如何使用contextlib模块来简化上下文管理器的…...

编程日记 2025/6/3 5:11:13

cuda从零开始手搓PB神经网络

cuda实现PB神经网络基于上一篇的矩阵点乘，实现了矩阵的加减乘除、函数调用等。并且复用之前元编程里面写的梯度下降、Adam、NAdam优化方法。实现PB神经网络如下： #ifndef __BP_NETWORK_HPP__ #define __BP_NETWORK_HPP__ #include "matrix.hpp&quo…...

编程日记 2025/6/3 10:36:17