跳到主要内容Spring Boot 实战：基于 WebSocket 的前后端实时匹配系统实现 | 极客日志Java大前端java算法
Spring Boot 实战：基于 WebSocket 的前后端实时匹配系统实现
基于 Spring Boot 和 Vue.js 实现前后端实时匹配系统的完整流程。内容涵盖前端 WebSocket 连接建立、Vuex 状态管理、JWT 身份验证以及匹配界面的 UI 实现。后端部分详细讲解了 WebSocketServer 的配置、用户连接管理、匹配池逻辑以及使用 DFS 算法生成游戏地图的 Java 实现。通过前后端协同，实现了用户匹配、对手信息同步及游戏状态流转的实时交互功能。
晚风告白0 浏览 前言
在现代 Web 开发中，前端和后端的协作变得越来越重要，特别是在需要实时交互和数据更新的应用场景中。WebSocket 技术作为一种全双工通信协议，使得前端和后端之间的实时数据传输变得更加高效和稳定。本篇博客将会探讨如何设计和实现一个实时匹配系统，其中前端负责展示用户界面并与后端进行交互，而后端则通过 WebSocket 协议来处理数据通信。
前端
Vue 生命周期与状态管理
onMounted: 当组件被挂载的时候执行的函数onUnmounted: 当组件被卸载的时候执行的函数
初步调试阶段，我们是将 token 传进 user.id 的。
store/pk.js
import ModuleUser from './user';
export default {
state: {
socket: null,
opponent_username: "",
opponent_photo: "",
status: "matching",
},
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: {
user: ModuleUser,
}
};
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- 加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
import { createStore } from 'vuex';
import ModuleUser from './user';
import ModulePk from './pk';
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
user: ModuleUser,
pk: ModulePk,
}
});
前端与后端建立连接
<template>
<PlayGround/>
</template>
<script>
// import ContentBase from "@/components/ContentBase.vue"
import PlayGround from "@/components/PlayGround.vue";
import { onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
export default {
name: "PKindex",
components: {
// ContentBase, 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); // js 自带的 WebSocket()
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(() => {
// 当当前页面关闭时调用
if (socket) socket.close(); // 卸载的时候断开连接
});
}
};
</script>
<style scoped></style>
至此，前端与后端就可以通过 websocket 互相连接了。
将 token 改成 jwt 验证
若使用 userId 建立 ws 连接，用户可伪装成任意用户，因此这是不安全的。
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;
try {
Claims claims = JwtUtil.parseJWT(token);
userId = Integer.parseInt(claims.getSubject());
} catch (Exception e) {
throw new RuntimeException(e);
}
return userId;
}
}
consumer/WebSocketServer.java
如果可以正常解析出 jwt token 的话表示登录成功，否则登录不成功，直接 close。
...@OnOpen
public void onOpen(Session session, @PathParam("token") String token) throws IOException {
this.session = session;
System.out.println("connected to websocket");
int userId = Integer.parseInt(token);
this.user = userMapper.selectById(userId);
if (user != null) {
users.put(userId, this);
} else {
this.session.close();
}
}
...
实现前端逻辑
对战界面和匹配界面的切换
<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.user.username }}。
- 类似用户，显示对手头像和用户名，来自 store.state.pk.opponent_photo 和 store.state.pk.opponent_username。
- 居中显示，绑定点击事件 @click="click_match_btn"。
- 按钮文字使用 match_btn_info 变量绑定（响应式）。
- 如果按钮显示'开始匹配'：改成'取消'，通过 WebSocket store.state.pk.socket.send 发事件 'start-matching'。
- 如果按钮显示'取消'：改回'开始匹配'，发事件 'stop-matching'。
- 返回模板使用：return { match_btn_info, click_match_btn }，模板可以直接使用这些变量和方法。
- 中间有 匹配按钮，点击会改变按钮文字（'开始匹配' ↔ '取消'）。
- 通过 WebSocket 发送匹配事件给后端。
使用 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 路径。{token} 是一个路径参数，用来验证和识别用户的身份。
users：使用 ConcurrentHashMap 存储所有连接的用户，用户 ID 是键，WebSocketServer 实例是值。
matchpool：使用 CopyOnWriteArraySet 存储正在匹配的用户。CopyOnWriteArraySet 是线程安全的集合类。
user：当前 WebSocket 连接对应的用户信息。
session：Session 对象表示 WebSocket 连接的会话。
onOpen 方法：
- @OnOpen：WebSocket 连接建立时会调用这个方法。
- session：WebSocket 会话。
- @PathParam("token")：从 URL 中提取用户的身份验证 token。
- 使用 JwtAuthentication.getUserId(token) 从 token 获取用户 ID，然后查询数据库获取用户信息。
- 如果用户存在，就将 WebSocketServer 实例与用户 ID 关联，并保存到 users 中；否则关闭连接。
- @OnClose：WebSocket 连接关闭时调用这个方法。
- 如果用户存在，移除 users 和 matchpool 中该用户的信息。
游戏匹配逻辑 startMatching 方法：
启动匹配过程，将当前用户添加到 matchpool 中。
如果匹配池中有两个以上的用户（至少两个人可以开始匹配），则开始配对：
- 从 matchpool 中取出两名用户。
- 创建一个新的游戏实例，并生成地图。
- 向这两名用户发送匹配成功的消息，消息内容包括对方用户名、头像和游戏地图。
stopMatching 方法：
停止匹配，将当前用户从 matchpool 中移除。
- @OnMessage：当 WebSocket 收到消息时会调用此方法。
- 解析收到的消息，根据 event 字段的值来决定是开始匹配还是停止匹配。
- 发送消息给当前 WebSocket 客户端。
- 使用 synchronized 确保线程安全。
<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(() => {
if (socket) socket.close();
store.commit("updateStatus", "matching");
});
}
};
</script>
<style scoped></style>
const store = useStore();用于访问 Vuex 状态管理对象，获取和修改全局状态。
const socketUrl = ws://127.0.0.1:3000/websocket/${store.state.user.token}/;构建 WebSocket 连接的 URL，使用当前用户的 token 来进行身份验证。
在 onMounted 生命周期钩子中：
- 使用 store.commit("updateOpponent", …) 设置默认的对手信息（用户名和头像）。
- 创建 WebSocket 实例并建立连接，连接成功时通过 socket.onopen 事件回调执行：
- 连接成功后，调用 store.commit("updateSocket", socket) 更新全局状态中的 WebSocket 实例。
- 通过 socket.onmessage 监听消息，接收从 WebSocket 服务器发送的数据：
- 如果 data.event 为 'start-matching'，表示匹配成功。
- 更新对手信息和游戏地图，并在 2 秒后通过 store.commit("updateStatus", 'playing') 更新状态为 'playing'，表示开始游戏。
- 通过 socket.onclose 监听 WebSocket 连接关闭事件。
- 关闭 WebSocket 连接。
- 更新 pk.status 状态为 'matching'，表示重新回到匹配阶段。
基于 WebSocket 的游戏匹配系统，具体流程如下：
- 当组件挂载时，通过 WebSocket 与服务器建立连接。
- 在匹配阶段，用户与服务器实时交换数据，匹配成功后显示对手的信息并开始游戏。
- 游戏过程中的状态（如对手信息和游戏地图）通过 Vuex 管理，并根据状态动态渲染不同的界面组件（MatchGround 或 PlayGround）。
- 在组件卸载时关闭 WebSocket 连接，确保没有资源泄漏。
解决同步问题
首先要在后端创建一个 Game 类实现游戏流程，其实就是把之前在前端写的 js 全部翻译成 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）算法来检查地图的连通性。
- 初始化地图的大小和墙壁数量。
- 生成并检查地图的连通性。
- 提供获取地图的方法以便其他类或模块使用。
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: {}
};
- 'matching' → 正在匹配阶段（显示匹配界面）
- 'playing' → 游戏进行中（显示对战界面）
socket：存储 WebSocket 对象，用于实时通信。
opponent_username & opponent_photo：记录对手信息。
gamemap：存储游戏地图或游戏数据（例如双方棋盘或战斗场景等）。
updateSocket：更新 WebSocket 对象
updateOpponent：更新对手的用户名和头像
updateStatus：更新游戏状态（matching ↔ playing）
updateGamemap：更新游戏地图信息
总结
通过本文的介绍，您应该对如何使用 WebSocket 实现前端与后端的实时匹配有了一个清晰的理解。在开发过程中，前端和后端需要通过紧密的配合来确保实时数据的正确传输和处理。前端负责展示用户的操作界面并通过 WebSocket 与后端保持实时连接，后端则处理客户端的请求并返回实时数据。
