Spring Boot 前后端实时匹配系统实现：WebSocket 与 Vue 集成

前端与后端建立连接

views/pk/PKIndex.vue：

<template>
  <PlayGround/>
</template>
<script>
import PlayGround from "@/components/PlayGround.vue"
import { onMounted, onUnmounted } from "vue";
import { useStore } from "vuex"

export default {
  name: "PKindex",
  components: { PlayGround },
  setup() {
    const store = useStore();
    const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`;
    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>
<style scoped></style>

至此，前端与后端可以通过 WebSocket 互相连接。

安全认证：JWT 验证

若使用 userId 建立 WS 连接，用户可伪装成任意用户，因此不安全。应使用 JWT Token。

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

添加 WS 的 JWT 验证，根据 token 判断用户是否存在。

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; // -1 表示不存在
        try {
            Claims claims = JwtUtil.parseJWT(token);
            userId = Integer.parseInt(claims.getSubject());
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        return userId;
    }
}

修改后端 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);
    this.user = userMapper.selectById(userId);
    if (user != null) {
        users.put(userId, this);
    } else {
        this.session.close();
    }
}
...

如果可以正常解析出 jwt token 的话表示登录成功，否则直接 close。

前端逻辑实现

对战界面和匹配界面的切换

views/pk/PKIndex.vue：

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

创建匹配页面 components/MatchGround.vue：

<template>
  <div class="matchground"></div>
</template>
<script>
export default {}
</script>
<style scoped>
  div.matchground {
    width: 60vw;
    height: 70vh;
    margin: 40px auto;
    background-color: lightblue;
  }
</style>

设置此时的状态是匹配。

最终效果：

匹配界面设计

用 grid 系统布局自己头像：对手头像 = 6 : 6。

逻辑很简单，只要点击匹配按钮，就向后端发送请求开始匹配。

components/MatchGround.vue：

<template>
  <div class="matchground">
    <div class="row">
      <div class="col-6">
        <div class="user-photo"><img :src="$store.state.user.photo" alt=""></div>
        <div class="user-username">{{ $store.state.user.username }}</div>
      </div>
      <div class="col-6">
        <div class="user-photo"><img :src="$store.state.pk.opponent_photo" alt=""></div>
        <div class="user-username">{{ $store.state.pk.opponent_username }}</div>
      </div>
      <div class="col-12" style="text-align: center; padding-top: 15vh;">
        <button @click="click_match_btn" type="button" class="btn btn-warning btn-lg">{{ match_btn_info }}</button>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    let match_btn_info = ref("开始匹配");

    const click_match_btn = () => {
      if (match_btn_info.value === "开始匹配") {
        match_btn_info.value = "取消";
        store.state.pk.socket.send(JSON.stringify({ event: "start-matching", }));
      } else {
        match_btn_info.value = "开始匹配";
        store.state.pk.socket.send(JSON.stringify({ event: "stop-matching", }));
      }
    }
    return { match_btn_info, click_match_btn, }
  }
}
</script>
<style scoped>
  div.matchground {
    width: 60vw;
    height: 70vh;
    margin: 40px auto;
    background-color: rgba(50,50,50,0.5);
  }
  div.user-photo { text-align: center; padding-top: 10vh; }
  div.user-photo > img { border-radius: 50%; width: 20vh; }
  div.user-username { text-align: center; font-size: 24px; font-weight: 600; color: white; padding-top: 2vh; }
</style>

整体结构：外层 div.matchground 作为容器，内部是 Bootstrap 栅格布局 row + col-6/col-12。

左侧用户信息：img 显示用户头像，src 来自 Vuex 状态 store.state.user.photo；div 显示用户名。 右侧对手信息：类似用户，显示对手头像和用户名，来自 store.state.pk.opponent_photo 和 store.state.pk.opponent_username。 按钮：居中显示，绑定点击事件 @click='click_match_btn'，按钮文字使用 match_btn_info 变量绑定（响应式）。

点击事件逻辑：如果按钮显示'开始匹配'，改成'取消'，通过 WebSocket 发送事件 'start-matching'；如果按钮显示'取消'，改回'开始匹配'，发事件 'stop-matching'。

使用 Vue 3 Composition API + Vuex + Bootstrap 栅格布局实现。

后端匹配逻辑

后端 consumer/WebSocketServer.java：

package org.example.backend.consumer;
import com.alibaba.fastjson.JSONObject;
import org.example.backend.consumer.utils.Game;
import org.example.backend.consumer.utils.JwtAuthentication;
import org.example.backend.mapper.UserMapper;
import org.example.backend.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Iterator;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

@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;
        System.out.println("connected!");
        Integer userId = JwtAuthentication.getUserId(token);
        this.user = userMapper.selectById(userId);
        if (this.user != null) {
            users.put(userId, this);
        } else {
            this.session.close();
        }
        System.out.println(users);
    }

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

    private void startMatching() {
        System.out.println("start matching!");
        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() {
        System.out.println("stop matching");
        matchpool.remove(this.user);
    }

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

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

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

@ServerEndpoint("/websocket/{token}")：这是 WebSocket 的入口点，指定了 WebSocket 服务的 URL 路径。 users：使用 ConcurrentHashMap 存储所有连接的用户，用户 ID 是键，WebSocketServer 实例是值。 matchpool：使用 CopyOnWriteArraySet 存储正在匹配的用户。 onOpen 方法：从 URL 中提取用户的身份验证 token，验证通过后保存用户会话。 onClose 方法：移除 users 和 matchpool 中该用户的信息。 startMatching 方法：启动匹配过程，将当前用户添加到 matchpool 中。如果匹配池中有两名以上用户，则配对并发送匹配成功消息。 stopMatching 方法：停止匹配，将当前用户从 matchpool 中移除。 onMessage 方法：解析收到的消息，根据 event 字段决定操作。 sendMessage 方法：发送消息给当前 WebSocket 客户端。

游戏逻辑与地图生成

后端返回信息给前端后，在前端接受并处理信息。

views/PKIndex.vue：

<template>
  <PlayGround v-if="$store.state.pk.status === 'playing'"/>
  <MatchGround v-if="$store.state.pk.status === 'matching'"/>
</template>
<script>
import PlayGround from '@/components/PlayGround.vue';
import MatchGround from '@/components/MatchGround.vue';
import { onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'

export default {
  components: { PlayGround, MatchGround },
  setup() {
    const store = useStore();
    const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`;
    let socket = null;

    onMounted(() => {
      store.commit("updateOpponent", { username: "我的对手", photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png" })
      socket = new WebSocket(socketUrl);
      socket.onopen = () => {
        console.log("connected!");
        store.commit("updateSocket", socket);
      }
      socket.onmessage = msg => {
        const data = JSON.parse(msg.data);
        if (data.event === "start-matching") {
          store.commit("updateOpponent", { username: data.opponent_username, photo: data.opponent_photo });
          setTimeout(() => {
            store.commit("updateStatus", "playing");
          }, 2000);
          store.commit("updateGamemap", data.gamemap);
        }
      }
      socket.onclose = () => {
        console.log("disconnected!");
      }
    });

    onUnmounted(() => {
      socket.close();
      store.commit("updateStatus", "matching");
    })
  }
}
</script>
<style scoped></style>

首先要在后端创建一个 Game 类实现游戏流程。

consumer/utils/Game.java：

package org.example.backend.consumer.utils;
import java.util.Random;

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;
        }
    }
}

Game 类主要用于生成一个带有边界和内部随机墙壁的连通游戏地图，使用了深度优先搜索（DFS）算法来检查地图的连通性。

在前端的 pk.js 中：

export default {
  state: {
    status: "matching",
    socket: null,
    opponent_username: "",
    opponent_photo: "",
    gamemap: null,
  },
  getters: {},
  mutations: {
    updateSocket(state, socket) { state.socket = socket; },
    updateOpponent(state, opponent) { state.opponent_username = opponent.username; state.opponent_photo = opponent.photo; },
    updateStatus(state, status) { state.status = status; },
    updateGamemap(state, gamemap) { state.gamemap = gamemap; }
  },
  actions: {},
  modules: {}
}

status：当前游戏状态，'matching' → 正在匹配阶段，'playing' → 游戏进行中。 socket：存储 WebSocket 对象。 opponent_username & opponent_photo：记录对手信息。 gamemap：存储游戏地图。

展示结果：

总结

通过本文的介绍，您应该对如何使用 WebSocket 实现前端与后端的实时匹配有了一个清晰的理解。在开发过程中，前端和后端需要通过紧密的配合来确保实时数据的正确传输和处理。前端负责展示用户的操作界面并通过 WebSocket 与后端保持实时连接，后端则处理客户端的请求并返回实时数据。