Spring Boot + Vue 实现实时游戏匹配系统：WebSocket 前后端交互实践

在页面组件中，利用 onMounted 和 onUnmounted 生命周期钩子管理连接。注意这里有个细节，Vue 3 的生命周期是 onUnmounted，不是 onUnmonted。

<!-- views/pk/PKIndex.vue -->
<script>
import{ onMounted, onUnmounted }from"vue";
import{ useStore }from"vuex"
export default{
  name:"PKindex",
  setup(){
    const store =useStore();
    // 使用模板字符串拼接 URL，包含用户 ID
    const socketUrl =`ws://127.0.0.1:3000/websocket/${store.state.user.id}/`;
    let socket =null;
    onMounted(()=>{
      socket =new WebSocket(socketUrl);
      socket.onopen=()=>{
        console.log("connected!");
        store.commit("updateSocket",socket);
      }
      socket.onmessage=msg=>{
        const data =JSON.parse(msg.data);
        console.log(data);
      }
      socket.onclose=()=>{
        console.log("disconnected!");
      }
    });
    onUnmounted(()=>{
      socket.close();
    });
  }
}
</script>

至此，前端已具备基础连接能力。但直接用 ID 作为路径参数存在安全隐患，用户可轻易伪装成任意 ID。

引入 JWT 验证

为了安全，我们将 ID 替换为 JWT Token。后端收到请求后解析 Token，若无效则直接关闭连接。

Java 工具类用于解析 Token 获取用户 ID：

// consumer/utils/JwtAuthentication.java
package org.example.backend.consumer.utils;
import io.jsonwebtoken.Claims;
import org.example.backend.utils.JwtUtil;
public class JwtAuthentication {
    public static Integer getUserId(String token) {
        int userId = -1;
        try {
            Claims claims = JwtUtil.parseJWT(token);
            userId = Integer.parseInt(claims.getSubject());
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        return userId;
    }
}

后端 WebSocket 服务接收 Token 并校验：

// consumer/WebSocketServer.java
@OnOpen
public void onOpen(Session session, @PathParam("token") String token) throws IOException {
    this.session = session;
    System.out.println("connected to websocket");
    Integer userId = JwtAuthentication.getUserId(token);
    User user = userMapper.selectById(userId);
    if(user != null){
        users.put(userId, this);
    } else {
        this.session.close(); // 验证失败直接断开
    }
}

界面切换逻辑

根据 Vuex 中的 status 字段，动态渲染匹配界面或对战界面。

<!-- views/pk/PKindexView.vue -->
<template>
  <PlayGround v-if="$store.state.pk.status === 'playing'"/>
  <MatchGround v-if="$store.state.pk.status === 'matching'"/>
</template>

匹配界面 (MatchGround.vue) 采用 Bootstrap 栅格布局，左右各显示一方头像，中间放置操作按钮。点击按钮时，通过 WebSocket 发送 start-matching 或 stop-matching 事件。

后端匹配池实现

后端核心在于维护一个线程安全的匹配池。当有两名玩家同时在线且处于匹配状态时，系统自动配对。

@Component
@ServerEndpoint("/websocket/{token}")
public class WebSocketServer {
    final private static ConcurrentHashMap<Integer, WebSocketServer> users = new ConcurrentHashMap<>();
    final private static CopyOnWriteArraySet<User> matchpool = new CopyOnWriteArraySet<>();
    private User user;
    private Session session = null;
    private static UserMapper userMapper;

    @Autowired
    public void setUserMapper(UserMapper userMapper) {
        WebSocketServer.userMapper = userMapper;
    }

    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) throws IOException {
        this.session = session;
        Integer userId = JwtAuthentication.getUserId(token);
        this.user = userMapper.selectById(userId);
        if(this.user != null){
            users.put(userId, this);
        } else {
            this.session.close();
        }
    }

    @OnClose
    public void onClose() {
        System.out.println("disconnected!");
        if(this.user != null){
            users.remove(this.user.getId());
            matchpool.remove(this.user);
        }
    }

    private void startMatching() {
        matchpool.add(this.user);
        while(matchpool.size() >= 2){
            Iterator<User> it = matchpool.iterator();
            User a = it.next(), b = it.next();
            matchpool.remove(a);
            matchpool.remove(b);
            Game game = new Game(13, 14, 20);
            game.createMap();
            JSONObject respA = new JSONObject();
            respA.put("event", "start-matching");
            respA.put("opponent_username", b.getUsername());
            respA.put("opponent_photo", b.getPhoto());
            respA.put("gamemap", game.getG());
            users.get(a.getId()).sendMessage(respA.toJSONString());

            JSONObject respB = new JSONObject();
            respB.put("event", "start-matching");
            respB.put("opponent_username", a.getUsername());
            respB.put("opponent_photo", a.getPhoto());
            respB.put("gamemap", game.getG());
            users.get(b.getId()).sendMessage(respB.toJSONString());
        }
    }

    private void stopMatching() {
        matchpool.remove(this.user);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        JSONObject data = JSONObject.parseObject(message);
        String event = data.getString("event");
        if("start-matching".equals(event)){
            startMatching();
        } else if("stop-matching".equals(event)){
            stopMatching();
        }
    }

    public void sendMessage(String message) {
        synchronized(this.session){
            try{
                this.session.getBasicRemote().sendText(message);
            } catch(IOException e){
                e.printStackTrace();
            }
        }
    }
}

关键点说明：

1. 并发安全：matchpool 使用了 CopyOnWriteArraySet，这是 Java 并发包提供的线程安全集合，适合读多写少的场景。
2. 消息同步：配对成功后，后端生成一份地图数据，分别发送给两名玩家，确保双方看到的初始环境一致。
3. 资源清理：onClose 方法中必须移除用户信息，防止内存泄漏或错误匹配。

游戏地图生成

地图逻辑在 Java 后端实现，避免前端计算不一致的问题。这里使用了深度优先搜索（DFS）算法来保证迷宫的连通性。

// consumer/utils/Game.java
public class Game {
    final private Integer rows;
    final private Integer cols;
    final private Integer inner_walls_count;
    final private int[][] g;
    final private static int[] dx = {-1, 0, 1, 0}, dy = {0, 1, 0, -1};

    public Game(Integer rows, Integer cols, Integer inner_walls_count) {
        this.rows = rows;
        this.cols = cols;
        this.inner_walls_count = inner_walls_count;
        this.g = new int[rows][cols];
    }

    public int[][] getG() {
        return g;
    }

    private boolean check_connectivity(int sx, int sy, int tx, int ty) {
        if(sx == tx && sy == ty) return true;
        g[sx][sy] = 1;
        for(int i = 0; i < 4; i ++){
            int x = sx + dx[i], y = sy + dy[i];
            if(x >= 0 && x < this.rows && y >= 0 && y < this.cols && g[x][y] == 0){
                if(check_connectivity(x, y, tx, ty)){
                    g[sx][sy] = 0;
                    return true;
                }
            }
        }
        g[sx][sy] = 0;
        return false;
    }

    private boolean draw() {
        for(int i = 0; i < this.rows; i ++){
            for(int j = 0; j < this.cols; j ++){
                g[i][j] = 0;
            }
        }
        // 设置边界墙
        for(int r = 0; r < this.rows; r ++){
            g[r][0] = g[r][this.cols - 1] = 1;
        }
        for(int c = 0; c < this.cols; c ++){
            g[0][c] = g[this.rows - 1][c] = 1;
        }
        Random random = new Random();
        for(int i = 0; i < this.inner_walls_count / 2; i ++){
            for(int j = 0; j < 1000; j ++){
                int r = random.nextInt(this.rows);
                int c = random.nextInt(this.cols);
                if(g[r][c] == 1 || g[this.rows - 1 - r][this.cols - 1 - c] == 1) continue;
                if(r == this.rows - 2 && c == 1 || r == 1 && c == this.cols - 2) continue;
                g[r][c] = g[this.rows - 1 - r][this.cols - 1 - c] = 1;
                break;
            }
        }
        return check_connectivity(this.rows - 2, 1, 1, this.cols - 2);
    }

    public void createMap() {
        for(int i = 0; i < 1000; i ++){
            if(draw()) break;
        }
    }
}

前端接收到地图数据后，更新 Vuex 状态并切换到对战模式。如果连接意外断开，组件卸载时会将状态重置回 matching，允许用户重新发起匹配。

总结

这套方案的核心在于前后端状态的严格同步。前端负责展示与交互，后端负责业务逻辑与数据分发。通过 JWT 保障连接安全，利用线程安全的集合处理高并发匹配，并在服务端统一生成游戏地图以确保公平性。在实际开发中，还需考虑断线重连机制及心跳检测，以保证长时间运行的稳定性。