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

文章目录

1.游戏大厅用户匹配

1.1请求和响应

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

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

匹配响应分为两个部分:

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

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

1.2设计匹配页面

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

1.3获取玩家信息

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

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

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

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

1.4玩家信息的样式设置

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

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

1.5初始化我们的websocket

设置不同的状态:

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

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

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

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

1.6点击按钮和客户端交互

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

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

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

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

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

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

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

2.1方法重写

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

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

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

2.2借用session

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

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

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

3.处理上线下线

3.1什么是上线下线

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

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

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

3.2实现用户进入退出大厅

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

3.3上线下线的处理

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

3.4请求和响应类的实现

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

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

3.5完善异常处理

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

外链图片转存中...(img-AhWU5tAI-1733321092783)

3.5完善异常处理

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

相关推荐
阿巴~阿巴~2 小时前
Linux 第一个系统程序 - 进度条
linux·服务器·bash
我科绝伦(Huanhuan Zhou)3 小时前
华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”(无法挂载或访问),但挂载点目录仍在且无数据
运维·服务器·华为
望获linux3 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
网硕互联的小客服6 小时前
服务器经常出现蓝屏是什么原因导致的?如何排查和修复?
运维·服务器·stm32·单片机·网络安全
witton6 小时前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合
成都极云科技6 小时前
成都算力租赁新趋势:H20 八卡服务器如何重塑 AI 产业格局?
大数据·服务器·人工智能·云计算·gpu算力
喜欢吃豆6 小时前
从零构建MCP服务器:FastMCP实战指南
运维·服务器·人工智能·python·大模型·mcp
刘阿宾6 小时前
【华为昇腾|CUDA】服务器A6000显卡部署LLM实战记录
服务器·华为·语言模型·gpu算力·kylin
海外空间恒创科技6 小时前
恒创科技:香港站群服务器做seo站群优化效果如何
运维·服务器·科技
搬码临时工6 小时前
内网服务器怎么设置公网远程访问? windows桌面连接和Linux自带SSH外网异地跨网用完整步骤教程
运维·服务器·ssh