网页端五子棋对战(四)---玩家匹配实现上线下线处理

文章目录

  • 1.游戏大厅用户匹配
    • 1.1请求和响应
    • 1.2设计匹配页面
    • 1.3获取玩家信息
    • 1.4玩家信息的样式设置
    • 1.5初始化我们的websocket
    • 1.6点击按钮和客户端交互
    • 1.7点击按钮和服务器端交互
  • 2.服务器端实现匹配功能框架
    • 2.1方法重写
    • 2.2借用session
  • 3.处理上线下线
    • 3.1什么是上线下线
    • 3.2实现用户进入退出大厅
    • 3.3上线下线的处理
    • 3.4请求和响应类的实现
    • 3.5完善异常处理
    • 3.5完善异常处理

1.游戏大厅用户匹配

1.1请求和响应

玩家发送匹配请求,服务器什么时候告诉玩家匹配结果,这个取决于这个什么时候匹配结束;

消息推送机制:websocket实现我们的前后端之间的交互–可以传输文本,可以传输二进制;

image-20241204130057463

匹配响应分为两个部分:

1)第一部分响应就是我们的客户端发送给服务器之后,服务器返回的,这个就是告诉客户端,这个匹配相应的目的就是告诉我们的服务器,这个请求,我收到了;

2)第二部分的响应就是我们的服务器给客户端找到这个对手之后,发送给客户端的响应,这个证明我们的匹配是真的成功了,但是并不会返回给我们的客户端自己对手的信息;

1.2设计匹配页面

image-20241204133854637

image-20241204133909385

通过上面的页面设计和样式的修改,让这个匹配的页面先大致的呈现出来,再去获取这个匹配的玩家的信息:

image-20241204133959392

1.3获取玩家信息

js里面的配置路径的说明:我们在这儿html里面的js中的路径配置需要和我们的下面的这个userapi里面的这个接口的mapping保持一致;

image-20241204134247305

在我们的这个服务器端的这个getuserinfo方法里面的这个返回的对象就是我们的user用户的相关信息,我们让这个玩家匹配的时候显示这个用户的信息:例如这个玩家的名字,玩家的分数,比赛的场次以及我们的玩家的获胜的场次等等之类的;

如果出现异常,我们可以弹框,告诉这个玩家获取用户信息失败;

image-20241204135945727

这个时候的页面的展示效果如图所示:但是显然这个用户的相关的信息并不是很好看,这个时候我们需要基于这个css对于用户的信息显示样式进行调整(下面的这个null主要是因为我们没有进行登录,如果是进行登录的话,这个显示的就是我们的登录人的信息);主要是为了看到这个样式的缺陷;

image-20241204160144838

1.4玩家信息的样式设置

我们想要对于上面的样式进行调整,就是在这个screen里面修改,我们的这个是两行文本,也就是两行文本占据这个200px,因此我们的这个line-height就是100px;

image-20241204160052418

这个时候我们重启这个服务器,发现这个页面上面的效果已经发生了变化:

image-20241204160001088

1.5初始化我们的websocket

设置不同的状态:

其中主要是我们的onmessage也就是处理服务器返回的响应的数据:

点击按钮的同时需要做两件事情:

1)对于这个客户端进行回复;—onmesage这个里面完成的;

2)对于这个服务端进行请求处理;—下面的这个65行里面的点击事件完成的;

image-20241204164059582

1.6点击按钮和客户端交互

这个就是设置点击事件,首先需要查看我们的这个链接是不是正常的;

1)链接正常:看看是什么状态,开始匹配,还是就是在这个匹配的过程中;

2)连接异常:重新跳转到这个登录的页面

image-20241204163818632

1.7点击按钮和服务器端交互

划分状态:正在这个匹配队列里面,还是离开了这个匹配的队列,还是非法的匹配,都是需要我们的服务器进行处理的;

parse表示的就是json字符串转换为js对象的方法;

image-20241204165456255

2.服务器端实现匹配功能框架

2.1方法重写

首先就是创建类,重写方法

image-20241204165800816

使用commponent注解把这个类交给spring进行管理,这个时候我们在下面的websocketconfig里面使用的时候注解注入就可以了;

第14行的这个对象的创建主要是为了到时候js进行这个字符串和对象的转换的时候用到的;

image-20241204171410895

2.2借用session

这个主要体现在我们的config层里面的这个websocketconfig上面:

我们在这个里面就是使用这个addInterceptors获取这个sesscion因为这个session是我们的用户登陆的时候http里面的session,这个里面有这个用户的相关信息;

我们通过这个方法就可以把http里面的session获取到,让我们的websocketapi里面的session进行使用;

image-20241204171148399

3.处理上线下线

3.1什么是上线下线

就是我们的用户什么时候在这个游戏,什么时候没有玩这个游戏;

我们使用这个哈希表进行管理,这个key代表的就是用户玩家的这个id,其中这个value表示的就是用于当前使用的这个websocket对话,如果这个可以找到,说明用户的信息可以找到,证明这个用户就是在线的;

为了表示这个哈希表,我们创建一个类进行管理;

image-20241204205137577

3.2实现用户进入退出大厅

使用的就是哈希表的方式实现的:进入这个游戏大厅就是把这个id和会话信息放进去,离开游戏大厅就是把这个用户的id信息进行一处;

image-20241204205235981

3.3上线下线的处理

上线就是使用的我们的enterhall的方法进行处理的,为什么这个地方需要有异常捕获的处理,就是因为我们的这个用户可能是直接通过大厅进入我们的游戏页面而不是通过登录进去的,这个时候就是null,因此我们需要进行处理;

image-20241204205531968

3.4请求和响应类的实现

请求类的这个成员变量就是我们的这个用户的请求;

image-20241204210015103

下面的就是我们的响应类的成员变量内容和方法;

image-20241204210109777

3.5完善异常处理

上面我们已经谈到了异常处理,但是需要返回这个响应的信息,这个时候我们需要创建这个响应类,上面已经完成了,接下来我们就可以调用这个类里面的方法对于我们的异常进行处理;

[外链图片转存中…(img-AhWU5tAI-1733321092783)]

3.5完善异常处理

上面我们已经谈到了异常处理,但是需要返回这个响应的信息,这个时候我们需要创建这个响应类,上面已经完成了,接下来我们就可以调用这个类里面的方法对于我们的异常进行处理;

image-20241204211217172

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

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

相关文章

「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。 关键词 UI互动应用数字键盘按钮组件状态管理用户交互 一、功能说明 数字键盘应用将实现以下功能&…

cgo内存泄漏排查

示例程序&#xff1a; package main/* #include <stdlib.h> #include <string.h> #include <stdio.h> char* cMalloc() {char *mem (char*)malloc(1024 * 1024 * 16);return mem; } void cMemset(char* mem) {memset(mem, -, 1024 * 1024 * 16); } int arr…

红日靶场vulnstack (五)

前言 好久没打靶机了&#xff0c;今天有空搞了个玩一下&#xff0c;红日5比前面的都简单。 靶机环境 win7&#xff1a;192.168.80.150(外)、192.168.138.136(内) winserver28&#xff08;DC&#xff09;&#xff1a;192.168.138.138 环境搭建就不说了&#xff0c;和之前写…

汽车IVI中控开发入门及进阶(三十七):基于HFP协议的蓝牙电话

概述: HFP全称Hands-free Profile,是一款让蓝牙设备控制电话的软件,多用于汽车上。此类设备最常见的例子是车载免提装置与蜂窝电话或可穿戴无线耳机一起使用。该配置文件定义了支持免提配置文件的两个设备如何在点对点的基础上相互交互。免提模式的实现通常使耳机或嵌入式免…

线程条件变量 生产者消费者模型 Linux环境 C语言实现

只能用来解决同步问题&#xff0c;且不能独立使用&#xff0c;必须配合互斥锁一起用 头文件&#xff1a;#include <pthread.h> 类型&#xff1a;pthread_cond_t PTHREAD_COND_INITIALIZER 初始化 初始化&#xff1a;int pthread_cond_init(pthread_cond_t * cond, NULL);…

AI技术在电商行业中的应用与发展

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

高通---Camera调试流程及常见问题分析

文章目录 一、概述二、Camera配置的整体流程三、Camera的代码架构图四、Camera数据流的传递五、camera debug FAQ 一、概述 在调试camera过程中&#xff0c;经常会遇到各种状况&#xff0c;本篇文章对camera调试的流程进行梳理。对常见问题的提供一些解题思路。 二、Camera配…

高危端口汇总(Summary of High-Risk Ports)

高危端口汇总 能关闭就关闭 &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解…

贪心算法实例-问题分析(C++)

贪心算法实例-问题分析 饼干分配问题 有一群孩子和一堆饼干&#xff0c;每个小孩都有一个饥饿度&#xff0c;每个饼干都有一个能量值&#xff0c;当饼干的能量值大于等于小孩的饥饿度时&#xff0c;小孩可以吃饱&#xff0c;求解最多有多少个孩子可以吃饱?(注:每个小孩只能吃…

图像处理网络中的模型水印

论文信息&#xff1a;Jie Zhang、Han Fang、Weiming Zhang、Wenbo Zhou、Hao Cui、Hao Cui、Nenghai Yu&#xff1a;Model Watermarking for Image Processing Networks 本文首次提出了图像处理网络中深度水印问题&#xff0c;将知识产权问题引入图像处理模型 提出了第一个深…

【网络安全】网站常见安全漏洞 - 网站基本组成及漏洞定义

文章目录 引言1. 一个网站的基本构成2. 一些我们经常听到的安全事件3. 网站攻击者及其意图3.1 网站攻击者的类型3.2 攻击者的意图 4. 漏洞的分类4.1 按来源分类4.2 按危害分类4.3 常见漏洞与OWASP Top 10 引言 在当今的数字化时代&#xff0c;安全问题已成为技术领域不可忽视的…

Ubuntu22.04系统源码编译OpenCV 4.10.0(包含opencv_contrib)

因项目需要使用不同版本的OpenCV&#xff0c;而本地的Ubuntu22.04系统装了ROS2自带OpenCV 4.5.4的版本&#xff0c;于是编译一个OpenCV 4.10.0&#xff08;带opencv_contrib&#xff09;版本&#xff0c;给特定的项目使用&#xff0c;这就不用换个设备后重新安装OpenCV 了&…

Dataset用load_dataset读图片和对应的caption的一个坑

代码&#xff1a; data_files {} if args.train_data_dir is not None:data_files["train"] os.path.join(args.train_data_dir, "**")dataset load_dataset("imagefolder",data_filesdata_files,cache_dirargs.cache_dir,) 数据&#xff1…

word如何快速创建目录?

文章目录 1&#xff0c;先自己写出目录的各级标题。2、选中目标标题&#xff0c;然后给它们编号3、给标题按照个人需求开始分级4、插入域构建目录。4.1、利用快捷键插入域构建目录4.2、手动插入域构建目录 听懂掌声&#xff01;学会了吗&#xff1f; 前提声明&#xff1a;我在此…

【Linux课程学习】:文件第二弹---理解一切皆文件,缓存区

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 Linux学习笔记&#xff1a; https://blog.csdn.net/d…

centos 手动安装libcurl4-openssl-dev库

下载源代码 curl downloadshttps://curl.se/download/ 选择需要下载的版本&#xff0c;我下载的是8.11.0 解压 tar -zxvf curl-8.11.0 查看安装命令 查找INSTALL.md&#xff0c;一般在docs文件夹下 –prefix &#xff1a;指定安装路径&#xff08;默认安装在/usr/local&…

汽车IVI中控OS Linux driver开发实操(二十八):回声消除echo cancellation和噪声消除Noise reduction

概述: 在当今高度互联的世界中,清晰的实时通信比以往任何时候都更重要。在远程团队会议期间,没有什么能像回声一样打断对话。当说话者听到他们的声音回响时,可能会分散注意力,甚至无法理解对话。即使是很小的回声也会产生很大的影响,仅仅25毫秒的振幅就足以造成声音干扰…

客户端安全开发基础-PC篇-附项目源码

客户端安全开发基础-PC篇 written by noxke 项目源码下载 https://download.csdn.net/download/Runnymmede/90079718 1.程序分析 使用ida打开crackme.exe&#xff0c;进入到程序的主逻辑函数&#xff0c;注意到有大量的xmm寄存器&#xff0c;但是不含call指令&#xff0c;先…

static关键字在嵌入式C编程中的应用

目录 一、控制变量的存储周期和可见性 1.1. 局部静态变量 1.2. 全局静态变量 二、控制函数的可见性 2.1. 静态函数 2.2. 代码示例&#xff08;假设有两个文件&#xff1a;file1.c和file2.c&#xff09; 三、应用场景 3.1. 存储常用数据 3.2. 实现内部辅助函数 四、注…

Linux笔记---进程:进程替换

1. 进程替换的概念 进程替换是指在一个正在运行的进程中&#xff0c;用一个新的程序替换当前进程的代码和数据&#xff0c;使得进程开始执行新的程序&#xff0c;而不是原来的程序。 这种技术通常用于在不创建新进程的情况下&#xff0c;改变进程的行为。 我们之前谈到过for…