• 项目实战——匹配系统（上）

    ps：从这篇文章开始，整个项目最精华（困难）的部分就要来了，因此这里会把每一个步骤细分，并且说一下自己对于每个步骤的思考和理解（博主水平有限，错误在所难免，欢迎指出讨论）

    目录

    一、什么是匹配系统

    二、WebSocket协议

    三、在云端维护游戏的整个过程 

    四、引入WebSocket

    五、 实现从后端向前端发信息

    六、 前端调试

    七、加上jwt验证

    八、 实现前端页面

    九、解决同步问题

    一、什么是匹配系统

    匹配系统就是一个单独的程序就类似于MySQL
    生成地图的过程在用户本地、两名玩家在本地实现地图
    地图就大概率不一样、需要将生成地图过程放在服务器中
    Game任务需要生成统一的地图、Game第一步先生成一个地图CreateMap
    有很多逻辑都需要在服务器端完成、判断蛇输赢的逻辑
    当我们撞的时候死亡、如果在客户端用户本地就可以作弊
    所以说我们整个游戏的过程应该都放到服务器端、不止生成地图这个过程
    同时蛇的移动、蛇的判定、都要在服务器端统一完成
    服务器端判断完之后再把结果返还给前端、前端只是用来花动画的
    前端不做任何判定逻辑、并不是所有的游戏判定逻辑都在云端
    回合制通信量比较少、比如吃鸡各种fps游戏在本地操作非常频繁
    如果都在云端的话延迟会非常高、判断是否击中对方的逻辑判断就是在本地
    所以要在游戏体验在用户作弊之间做一个权衡、锁头挂之类的
    炉石所有逻辑判断都在云端、很难作弊
    整个我们在云端维护游戏过程它的整个流程

     

    要实现匹配系统起码要有两个客户端client1，client2,当客户端打开对战页面并开始匹配时，会给后端服务器server发送一个请求，而匹配是一个异步的过程，什么时候返回结果是不可预知的，所以我们要写一个专门的匹配系统，维护一堆用户的集合，当用户发起匹配请求时，请求会先传给后端服务器，然后再传给匹配系统处理，匹配系统会不断地在用户里去筛选，将rating较为相近的的用户匹配到一组。当成功匹配后，匹配系统就会返回结果给springboot的后端服务器，继而返回给客户端即前端。然后我们就能在前端看到匹配到的对手是谁啦。

    举个例子，两个客户端请求两个链接，新建两个类：

    1. public class WebSocketServer {
    2.     @OnOpen
    3.     public void onOpen(Session session, @PathParam("token") String token) {
    4.         // 建立连接
    5.         WebSocketServer client1 = new WebSocketServer();
    6.         WebSocketServer client2 = new WebSocketServer();
    7.     }
    8.  
    9.     @OnClose
    10.     public void onClose() {
    11.         // 关闭链接
    12.     }
    13.  
    14.     @OnMessage
    15.     public void onMessage(String message, Session session) {
    16.         // 从Client接收消息
    17.     }
    18.  
    19.     @OnError
    20.     public void onError(Session session, Throwable error) {
    21.         error.printStackTrace();
    22.     }
    23. }

     

    二、WebSocket协议

    因为匹配是异步的过程，且需要前后端双向交互，而普通的http协议是单向的，一问一答式的，属于立即返回结果的类型，不能满足我们的异步需求，因此我们需要一个新的协议websocket：不仅客户端可以主动向服务器端发送请求，服务器端也可以主动向客户端发送请求，是双向双通的，且支持异步。简单来说就是客户端向后端发送请求，经过不确定的时间，会返回一次或多次结果给客户端。
    基本原理： 每一个ws连接都会在后端维护起来，客户端连接服务器的时候会创建一个WebSocketServer类。每创建一个链接就是new一个WebSocketServer类的实例，所有与链接相关的信息，都会存在这个类里面。

    703f1a598b1cfe5b132599c137.jpg

    三、在云端维护游戏的整个过程 

    由于每次刷新都会刷新不同的地图，为了公平起见，应该把地图的生成放在服务器端，然后返回结果给前端。
    为了防止作弊，游戏的一系列操作、判断逻辑都应该放在服务器端，前端只是呈现动画。
    我们可以从客户端获取输入，也可以通过微服务从代码端获得输入。
    简单的流程如下： Game -> Create map -> 返回给客户端 -> 客户端等待匹配waiting (sleep) -> 匹配成功则进行一系列游戏逻辑

    四、引入WebSocket

    在pom.xml文件中添加依赖：

    spring-boot-starter-websocket
    fastjson

    1. <dependency>
    2.             <groupId>org.springframework.bootgroupId>
    3.             <artifactId>spring-boot-starter-websocketartifactId>
    4.             <version>2.7.2version>
    5.         dependency>
    6.  
    7.         <dependency>
    8.             <groupId>com.alibabagroupId>
    9.             <artifactId>fastjsonartifactId>
    10.             <version>2.0.11version>
    11.         dependency>

     添加config/WebSocketConfig配置类：

    1. import org.springframework.context.annotation.Bean;
    2. import org.springframework.context.annotation.Configuration;
    3. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    4.  
    5. @Configuration
    6. public class WebSocketConfig {
    7.  
    8.     @Bean
    9.     public ServerEndpointExporter serverEndpointExporter() {
    10.  
    11.         return new ServerEndpointExporter();
    12.     }
    13. }
    14.

     添加consumer/WebSocketServer类

    1. package com.popgame.backend.consumer;
    2.  
    3. import org.springframework.stereotype.Component;
    4.  
    5. import javax.websocket.*;
    6. import javax.websocket.server.PathParam;
    7. import javax.websocket.server.ServerEndpoint;
    8.  
    9. @Component
    10. @ServerEndpoint("/websocket/{token}")  // 注意不要以'/'结尾
    11. public class WebSocketServer {
    12.     @OnOpen
    13.     public void onOpen(Session session, @PathParam("token") String token) {
    14.         // 建立连接
    15.     }
    16.  
    17.     @OnClose
    18.     public void onClose() {
    19.         // 关闭链接
    20.     }
    21.  
    22.     @OnMessage
    23.     public void onMessage(String message, Session session) {
    24.         // 从Client接收消息
    25.     }
    26.  
    27.     @OnError
    28.     public void onError(Session session, Throwable error) {
    29.         error.printStackTrace();
    30.     }
    31. }

    五、 实现从后端向前端发信息

    从后端向前端怎么发信息、需要自己实现一下
    首先用websocket的一个api、建立链接的时候需要把session存下来
    如何从后端向前端发信息呢、写一个辅助函数，异步通信需要加一个锁
    异步通信需要加一个锁、我们要知道这个链接对应的是谁
    才知道谁跟谁匹配到一块了，另外我们还需要存储一下所有链接
    因为当我们接收到一个信息之后，比如当我们从匹配系统接收到某一局匹配成功的信息之后
    我们需要将这个消息发送给匹配成功的两名玩家、我们需要能够根据用户的id找到它对
    应的链接是谁，才可以利用这个链接向前端发请求，所以对于所有的websocket可见的一个全局变量
    用来存储所有的链接、对于所有的实列可见定义为静态变量
    由于每个实例在每个线程里面，所以公共的变量是线程安全的用线程安全的哈希表
    将userid映射到我们的websocket实例

    需要注意的是：WebSocketServer并不是一个标准的Springboot的组件，不是一个单例模式(每一个类同一时间只能有一个实例，这里每建一个链接都会new一个类，所以不是单例模式)，向里面注入数据库并不像在Controller里一样直接@Autowired，要改成先定义一个static变量,再@Autowired加入到setUsersMapper函数上,如下：

    1.   private static UsersMapper usersMapper;
    2.  
    3.     @Autowired
    4.     public void setUsersMapper(UsersMapper usersMapper) {
    5.         WebSocketServer.usersMapper = usersMapper; //静态变量访问要用类名访问
    6.     }

     @Autowired写在set()方法上，在spring会根据方法的参数类型从ioc容器中找到该类型的Bean对象注入到方法的行参中，并且自动反射调用该方法(被@Autowired修饰的方法一定会执行)，所以一般使用在set方法中、普通方法不用。

    当我们建立链接的时候我们需要从token中读取当前的用户是谁，
    有了id之后去插数据库去查id是谁，查数据库注入userMapper
    静态变量相当于是所有实例的一个全局变量，
    如果不加静态变量的话那就是所有的实列所有独有一份，哈希表是对所有的实例都可见
    每一个实例都要访问同一个哈希表，不加static 相当于局部变量
    websocketserver，并不是一个标准的spring里的组件，注入的时候跟controller是有所区别的
    静态变量访问的时候需要用类名访问

    consumer/WebSocketServer.java:

    1. package com.popgame.backend.consumer;
    2.  
    3. import com.popgame.backend.mapper.UsersMapper;
    4. import com.popgame.backend.pojo.Users;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.stereotype.Component;
    7.  
    8. import javax.websocket.*;
    9. import javax.websocket.server.PathParam;
    10. import javax.websocket.server.ServerEndpoint;
    11. import java.io.IOException;
    12. import java.util.concurrent.ConcurrentHashMap;
    13.  
    14. @Component
    15. @ServerEndpoint("/websocket/{token}")  // 注意不要以'/'结尾
    16. public class WebSocketServer {
    17.  
    18.     //与线程安全有关的哈希表，将userID映射到相应用户的WebSocketServer
    19.     private static ConcurrentHashMap users = new ConcurrentHashMap<>();
    20.  
    21.     //当前链接请求的用户
    22.     private Users user;
    23.  
    24.     //后端向前端发信息,每个链接用session维护
    25.     private Session session = null;
    26.  
    27.     private static UsersMapper usersMapper;
    28.  
    29.     @Autowired
    30.     public void setUsersMapper(UsersMapper usersMapper) {
    31.         WebSocketServer.usersMapper = usersMapper; //静态变量访问要用类名访问
    32.     }
    33.  
    34.     @OnOpen
    35.     public void onOpen(Session session, @PathParam("token") String token) {
    36.         // 建立连接
    37.         System.out.println("connected!");
    38.         this.session = session;
    39.         //为了方便调试，初阶段只把token当成userId看
    40.         Integer userId = Integer.parseInt(token);
    41.         this.user = usersMapper.selectById(userId);
    42.         users.put(userId, this);
    43.     }
    44.  
    45.     @OnClose
    46.     public void onClose() {
    47.         // 关闭链接
    48.         System.out.println("disconnected!");
    49.         //断开连接的话要将user移除
    50.         if (this.user != null) {
    51.             users.remove((this.user.getId()));
    52.         }
    53.     }
    54.  
    55.     @OnMessage
    56.     public void onMessage(String message, Session session) {
    57.         // 从Client接收消息
    58.         System.out.println("receive message!");
    59.     }
    60.  
    61.     @OnError
    62.     public void onError(Session session, Throwable error) {
    63.         error.printStackTrace();
    64.     }
    65.  
    66.     //后端向前端发信息
    67.     private void sendMessage(String message) {
    68.         //异步通信要加上锁
    69.         synchronized (this.session) {
    70.             try {
    71.                 this.session.getBasicRemote().sendText(message);
    72.             } catch (IOException e) {
    73.                 e.printStackTrace();
    74.             }
    75.         }
    76.  
    77.     }
    78. }

    放行websocket连接

    配置config/SecurityConfig

    1. @Override
    2. public void configure(WebSecurity web) throws Exception {
    3.     web.ignoring().antMatchers("/websocket/**");
    4. }

     

    六、 前端调试

    配置config.SecurityConfig、然后去前端写一写调试一下整个过程
    放行这一类所有链接、创建一个从后端到前端建立一个链接
    需要当我们的组件加载出来的时候建立一个链接
    把周期函数取出来、另外我们可以将socket存到另外一个变量里面
    当当前组件被挂载的时候，我们需要创建一个链接

    onMounted: 当组件被挂载的时候执行的函数
    onUnmonted: 当组件被卸载的时候执行的函数
    初步调试阶段，我们是将token传进user.id的

    store/pk.js:

    将pk引入store中

    store/index.js

    1.  
    2. import ModuleUser from './user'
    3.  
    4. export default {
    5.     state: {
    6.         socket: null, //ws链接
    7.         opponent_username: "",
    8.         opponent_photo: "",
    9.         status: "matching", //matching表示匹配界面，playing表示对战界面
    10.     },
    11.     getters: {
    12.  
    13.     },
    14.     mutations: {
    15.         updateSocket(state,socket) {
    16.             state.socket = socket;
    17.         },
    18.         updateOpponent(state,opponent) {
    19.             state.opponent_username = opponent.username;
    20.             state.opponent_photo = opponent.photo;
    21.         },
    22.         updateStatus(state,status) {
    23.             state.status = status;
    24.         }
    25.  
    26.     },
    27.     actions: {
    28.  
    29.  
    30.     },
    31.     modules: {
    32.         user: ModuleUser,
    33.     }
    34. }

    将pk引入store中

    store/index.js

    1. import { createStore } from 'vuex'
    2. import ModuleUser from './user'
    3. import ModulePk from './pk'
    4.  
    5. export default createStore({
    6.   state: {
    7.   },
    8.   getters: {
    9.   },
    10.   mutations: {
    11.   },
    12.   actions: {
    13.   },
    14.   modules: {
    15.     user: ModuleUser,
    16.     pk: ModulePk,
    17.   }
    18. })

     前端与后端建立连接
    views/pk/PKIndex.vue

    2.  
    3. <script>
    4. //import ContentBase from "@/components/ContentBase.vue"
    5. import PlayGround from "@/components/PlayGround.vue"
    6. import { onMounted, onUnmounted } from "vue";
    7. import { useStore } from "vuex"
    8.  
    9.  
    10. export default {
    11.     name: "PKindex",
    12.     components: {
    13.        // ContentBase,
    14.         PlayGround,
    15.     },
    16.     setup() {
    17.         const store = useStore();
    18.         //字符串中有${}表达式操作的话要用``，不能用引号
    19.         const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.id}/`;
    20.  
    21.         let socket = null;
    22.         onMounted(() => { //当当前页面打开时调用
    23.             socket = new WebSocket(socketUrl); //js自带的WebSocket()
    24.             socket.onopen = () => { //连接成功时调用的函数
    25.                 console.log("connected!");
    26.                 store.commit("updateSocket",socket);
    27.             }
    28.  
    29.             socket.onmessage = msg => { //前端接收到信息时调用的函数
    30.                 const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
    31.                 console.log(data);
    32.             }
    33.  
    34.             socket.onclose = () => { //关闭时调用的函数
    35.                 console.log("disconnected!");
    36.             }
    37.         });
    38.  
    39.         onUnmounted(() => { //当当前页面关闭时调用
    40.             socket.close(); //卸载的时候断开连接
    41.         });
    42.     }
    43. }
    44.  
    45.  
    46. script>
    47.  
    48.  
    49. <style scoped>
    50. style>

     

    七、加上jwt验证

    我们现在建立链接的时候、直接把用户id传过来就可以建立链接了
    这样就可以实现一个身份的验证、如果可以正常解析出来的话就表示登录成功

    const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`;

    添加ws的jwt验证，根据token判断用户是否存在

    consumer/utils/JwtAuthenciation.java

    1. package com.popgame.backend.consumer.utils;
    2.  
    3. import com.popgame.backend.utils.JwtUtil;
    4. import io.jsonwebtoken.Claims;
    5.  
    6. public class JwtAuthentication {
    7.     public static Integer getUserId(String token) {
    8.         int userId = -1; //-1表示不存在
    9.         try {
    10.             Claims claims = JwtUtil.parseJWT(token);
    11.             userId = Integer.parseInt(claims.getSubject());
    12.         } catch (Exception e) {
    13.             throw new RuntimeException(e);
    14.         }
    15.         return userId;
    16.     }
    17. }

     修改后端
    consumer/WebSocketServer.java

    1. 如果可以正常解析出jwt token的话表示登录成功，否则登录不成功，直接close
    2. ...
    3.  
    4.  @OnOpen
    5.     public void onOpen(Session session, @PathParam("token") String token) throws IOException {
    6.         // 建立连接
    7.         System.out.println("connected!");
    8.         this.session = session;
    9.         Integer userId = JwtAuthentication.getUserId(token);
    10.         this.user = usersMapper.selectById(userId);
    11.         if (this.user != null) {
    12.             users.put(userId, this);
    13.         } else {
    14.             this.session.close();
    15.         }
    16.     }
    17.  
    18. ...
    19.

    八、 实现前端页面

    当前只有对战界面木有匹配界面、所以我们还需要实现一个匹配界面
    实现切换、类似于roter，实现匹配界面

    views/pk/PKindex.vue

    1. <template>
    2.  
    3.     <PlayGround v-if="$store.state.pk.status === 'playing'" />
    4.     <MatchGround v-if="$store.state.pk.status === 'matching'" />
    5. template>

     用grid系统布局自己头像:对手头像= 6 : 6
    逻辑很简单，只要点击匹配按钮，就向后端发送请求开始匹配。
    components/MatchGround.vue

    1. <template>
    2.     <div class="matchGround">
    3.         <div class="row">
    4.             <div class="col-6">
    5.                 <div class="user-photo">
    6.                     <img :src="$store.state.user.photo" alt="">
    7.                 div>
    8.                 <div class="user-username">
    9.                     {{ $store.state.user.username }}
    10.                 div>
    11.             div>
    12.  
    13.             <div class="col-6">
    14.  
    15.                 <div class="user-photo">
    16.                     <img :src="$store.state.pk.opponent_photo" alt="">
    17.                 div>
    18.                 <div class="user-username">
    19.                     {{ $store.state.pk.opponent_username }}
    20.                 div>
    21.             div>
    22.             <div class="col-12" style="padding-top: 15vh;">
    23.                 <button @click="click_match_btn" type="button" class="btn match-btn">{{ match_btn_info }}button>
    24.             div>
    25.         div>
    26.     div>
    27. template>

     前端向后端发送请求：store.state.pk.socket.send(字符串);
    以开始匹配为例：

    1. store.state.pk.socket.send(JSON.stringify({
    2.                     event: "start matching",
    3.                 }));

     后端可以在onMessage那里接收到前端的请求，并且解析传送过来的数据
    consumer/WebSocketServer.java

    1.  @OnMessage
    2.     public void onMessage(String message, Session session) {
    3.         // 从Client接收消息
    4.         System.out.println("receive message!");
    5.         JSONObject data = JSONObject.parseObject(message);
    6.         String event = data.getAsString("event");
    7.         if ("start matching".equals(event)) {
    8.             startMatching();
    9.         } else if ("stop matching".equals(event)) {
    10.             stopMatching();
    11.         }
    12.     }
    13.

     用线程安全的set定义匹配池：final private static CopyOnWriteArraySet matchPoll = new CopyOnWriteArraySet<>();
    开始匹配时，将用户放进拼配池里，取消匹配时将用户移除匹配池
    匹配过程在目前调试阶段可以简单地两两匹配

    1.  private void startMatching() {
    2.  System.out.println("start mathcing!");
    3.         matchPoll.add(this.user);
    4.         while (matchPoll.size() >= 2) {
    5.             Iterator it = matchPoll.iterator(); //枚举
    6.             Users a = it.next(), b = it.next();
    7.             matchPoll.remove(a);
    8.             matchPoll.remove(b);
    9.  
    10.             JSONObject respA = new JSONObject();
    11.             respA.put("event", "start-matching");
    12.             respA.put("opponent_username", b.getUsername());
    13.             respA.put("opponent_photo", b.getPhoto());
    14.             //用users获取a的链接
    15.             users.get(a.getId()).sendMessage(respA.toJSONString()); //用这个链接将信息传回给前端
    16.  
    17.             JSONObject respB = new JSONObject();
    18.             respB.put("event", "start-matching");
    19.             respB.put("opponent_username", a.getUsername());
    20.             respB.put("opponent_photo", a.getPhoto());
    21.             //用users获取b的链接
    22.             users.get(b.getId()).sendMessage(respB.toJSONString()); //用这个链接将信息传回给前端
    23.         }
    24.  
    25.     }
    26.  
    27.     private void stopMatching() {
    28.         System.out.println("stop matching!");
    29.         matchPoll.remove(this.user);
    30.  
    31.     }
    32.

     后端返回信息给前端后，在前端接受并处理信息
    views/PKindex.vue

    1. ...
    2. socket.onmessage = msg => { //前端接收到信息时调用的函数
    3.                 const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
    4.                 if (data.event === "start-matching") { //这个这个start-matching是respA或respB返回的
    5.                     //匹配成功,更新对手信息
    6.                     store.commit("updateOpponent",{
    7.                         username: data.opponent_username,
    8.                         photo: data.opponent_photo,
    9.                     });
    10.                 }
    11.             }
    12. ...
    13.

     这样，我们就能初步实现匹配系统了。
    匹配成功2s后跳到pk页面,只需要updateStatus即可
    注意的是卸载组件的时候要记得把状态改为matching
    views/PK/PKindex.vue

    1. ...
    2.  
    3. socket.onmessage = msg => { //前端接收到信息时调用的函数
    4.                ....
    5.                 if (data.event === "start-matching") {
    6.                     ...
    7.                     setTimeout(() => {
    8.                         store.commit("updateStatus", "playing");
    9.                     },2000); //延时函数，单位是毫秒
    10.                 }
    11.             }
    12.  
    13. socket.onclose = () => { //关闭时调用的函数
    14.                 console.log("disconnected!");
    15.                 store.commit("updateStatus", "matching");
    16.             }
    17.  
    18. ...
    19.             ...

    九、解决同步问题

    前文也提到过，生成地图，游戏逻辑等与游戏相关的操作都应该放在服务端，不然的话客户每次刷新得到的地图都不一样，游戏的公平性也不能得到保证。因此，我们要将之前在前端写的游戏逻辑全部转移到后端（云端），前端只负责动画的演示即可。

    后端实现
    首先要在后端创建一个Game类实现游戏流程，其实就是把之前在前端写的js全部翻译成Java就好了
    consumer/utils/Game.java
    直接按照之前的gamemap.js搬过去就好了,代码太长这里就不贴了
    然后我们在WebSocketServer.java里面调用一下
    现阶段直接在局部调用作为调试

    1.  private void startMatching() {
    2.        ...
    3.         while (matchPoll.size() >= 2) {
    4.  
    5.            ...
    6.             respA.put("game_map", game.getMark());
    7.            ...
    8.             respB.put("game_map", game.getMark());
    9.  
    10.         }
    11.  
    12.     }

     修改前端
    首先在store/pk.js里添加game_map变量存下地图

    1. state: {
    2.         ...
    3.         game_map: null,
    4.     },

    添加更新函数

    1. mutations: {
    2.        ...
    3.         updateGameMap(state, game_map) {
    4.             state.game_map = game_map;
    5.         },
    6.  
    7.     },

     其次，修改scripts/GameMap.js，即我们之前在前端生成地图的地方，把生成地图一系列步骤可以删掉了

    最后再在views/PK/PKindex.vue里接受后端传来的数据并更新地图就好了。

    1.  socket.onmessage = msg => { //前端接收到信息时调用的函数
    2.                 const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
    3.                 ...
    4.                     setTimeout(() => {
    5.                         store.commit("updateStatus", "playing");
    6.                     },2000);
    7.                     store.commit("updateGameMap",data.game_map);
    8.                 }
    9.             }
    10.  
    11.

    由于这节课难度确实有所提升，整篇文章可能无法做到向之前的条理清晰，请大家多多海涵，因为要实现的东西实在太多了，详情请见git 

    kob: springBoot 究极项目 (gitee.com)icon-default.png?t=M85Bhttps://gitee.com/geng-chaoyang-11/kob

  • 相关阅读:
    Stream流处理快速上手最佳实践 | 京东物流技术团队
    定岗定编设计：企业职能部门定岗定编设计项目成功案例
    基于Nodejs的心理咨询微信小程序的设计和实现
    [数据集][VOC]高质量的目标检测数据集合集（持续更新）
    sql调优
    C语言结构体中成员的引用
    WinUI（WASDK）使用MediaPipe检查人体姿态关键点
    二叉树 | 迭代遍历 | leecode刷题笔记
    事务回调编程
    heapdump泄露Shiro key从而RCE
  • 原文地址：https://blog.csdn.net/qq_59539549/article/details/127988553