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

文章目录

  • 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互动应用数字键盘按钮组件状态管理用户交互 一、功能说明 数字键盘应用将实现以下功能&…

LaTeX入门 | 超详细讲解

LaTeX入门 什么是LaTeX LaTeX(读作/ˈlɑːtɛx/或/ˈleɪtɛx/)是一个让你的文档看起来更专业的排版系统,而不是文字处理器。它尤其适合处理篇幅较长、结构严谨的文档,并且十分擅长处理公式表达。它是免费的软件,对…

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…

Django的介绍

Django是一个高级的Python Web框架,用于快速开发安全、可维护的Web应用程序。以下是关于Django的详细介绍: 一、框架特点 高效的开发模式 内置功能丰富:Django提供了大量的内置工具和功能,减少了开发人员在构建Web应用基础部分所花费的时间。例如,它自带了一个功能强大的…

第四届新生程序设计竞赛正式赛(C语言)

A: HNUCM的学习达人 SQ同学是HNUCM的学习达人&#xff0c;据说他每七天就能够看完一本书&#xff0c;每天看七分之一本书&#xff0c;而且他喜欢看完一本书之后再看另外一本。 现在请你编写一个程序&#xff0c;统计在指定天数中&#xff0c;SQ同学看完了多少本完整的书&#x…

红日靶场vulnstack (五)

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

汇编语言简要记录-1

汇编语言与汇编指令 汇编语言的主题是汇编指令 汇编指令与机器指令的差别在于指令的表示方法上 1、汇编指令是机器机器指令便于记忆的书写格式 2、汇编指令是机器指令的助记符 ag&#xff1a;机器指令 1000100111011000操作&#xff1a;将寄存器BX的值送到AX中汇编指令 MOV …

C++中实现多态有几种方式

一&#xff09;虚函数&#xff08;Virtual Functions&#xff09;实现多态 概念&#xff1a; 虚函数是在基类中使用关键字virtual声明的成员函数。当一个类包含虚函数时&#xff0c;编译器会为该类创建一个虚函数表&#xff08;v - table&#xff09;&#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;将知识产权问题引入图像处理模型 提出了第一个深…

【后端面试总结】缓存策略选择

一般来说我们常见的缓存策略有三种&#xff0c;他们各自的优劣势和实现逻辑分别如下 Cache Aside&#xff08;旁路缓存&#xff09; 特点&#xff1a; 灵活性高&#xff1a;应用程序直接与缓存和数据库交互&#xff0c;具有高度的灵活性&#xff0c;可以根据业务需求自定义缓…

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

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

spaCy 入门与实战:强大的自然语言处理库

spaCy 入门与实战&#xff1a;强大的自然语言处理库 spaCy 是一个现代化、工业级的自然语言处理&#xff08;NLP&#xff09;库&#xff0c;以高效、易用和功能丰富著称。它被广泛应用于文本处理、信息提取和机器学习任务中。本文将介绍 spaCy 的核心功能&#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 了&…

代码随想录第36天

01背包问题 二维 def hanshu():wupin, bagweight [int(x) for x in input().split()]weight [int(x) for x in input().split()]value [int(x) for x in input().split()]dp [[0]*(bagweight1) for i in range(wupin)] #dp[i][j]代表从物品【0,i-1】让任意取&#xff0c…