跳到主要内容Spring Boot 前后端实时匹配系统实现:WebSocket 与 Vue 集成 | 极客日志Java大前端java算法
Spring Boot 前后端实时匹配系统实现:WebSocket 与 Vue 集成
综述由AI生成基于 Spring Boot 和 Vue 的前后端实时匹配系统实现。前端使用 Vue 3 和 Vuex 管理状态,通过 WebSocket 建立连接;后端采用 Java Spring Boot,利用 JWT 进行身份验证,并通过 ConcurrentHashMap 维护用户会话。系统实现了匹配池逻辑、游戏地图生成算法以及前后端状态同步,确保用户在匹配成功后能即时进入对战界面。
性能调优30 浏览 前言
在现代 Web 开发中,前端和后端的协作至关重要,特别是在需要实时交互和数据更新的应用场景中。WebSocket 技术作为一种全双工通信协议,使得前端和后端之间的实时数据传输更加高效和稳定。本文探讨如何设计和实现一个实时匹配系统,其中前端负责展示用户界面并与后端进行交互,而后端则通过 WebSocket 协议来处理数据通信。
前端状态管理
初步调试阶段,将 token 传进 user.id。在 Vuex store 中配置 pk 模块:
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; }
},
actions: {},
modules: {
user: ModuleUser,
}
}
引入 pk 模块到 store/index.js:
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 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;
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。
前端逻辑实现
对战界面和匹配界面的切换
<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 客户端。
游戏逻辑与地图生成
<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>
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)算法来检查地图的连通性。
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 与后端保持实时连接,后端则处理客户端的请求并返回实时数据。
相关免费在线工具
- 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
- Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online