引言
在现代 Web 开发中,前端和后端的协作至关重要,特别是在需要实时交互和数据更新的应用场景下。WebSocket 作为一种全双工通信协议,让前后端之间的实时数据传输更加高效稳定。本文将探讨如何设计和实现一个实时匹配系统,前端负责展示用户界面并与后端交互,后端则通过 WebSocket 协议处理数据通信。
前端状态管理
在 Vue3 项目中,我们需要用 Vuex 来维护全局的 WebSocket 连接和匹配状态。这里定义了一个 pk 模块,用来存储 socket 实例、对手信息以及当前是匹配中还是对战中的状态。
store/pk.js:
import ModuleUser from './user'
export default {
state: {
socket: null, // ws 链接
opponent_username: "",
opponent_photo: "",
status: "matching", // matching 表示匹配界面,playing 表示对战界面
},
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,
}
}
记得在 store/index.js 中引入这个模块:
import { createStore } from 'vuex'
import
({
: {},
: {},
: {},
: {},
: {
: ,
: ,
}
})


