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

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完善异常处理

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