Springboot实现匹配系统(上)

匹配系统的流程

要实现匹配系统起码要有两个客户端client1，client2,当客户端打开对战页面并开始匹配时，会给后端服务器server发送一个请求,而匹配是一个异步的过程，什么时候返回结果是不可预知的,所以我们要写一个专门的匹配系统，维护一堆用户的集合，当用户发起匹配请求时，请求会先传给后端服务器，然后再传给匹配系统处理，匹配系统会不断地在用户里去筛选，将rating较为相近的的用户匹配到一组。当成功匹配后，匹配系统就会返回结果给springboot的后端服务器，继而返回给客户端即前端。然后我们就能在前端看到匹配到的对手是谁啦。

 

举个例子，两个客户端请求两个链接，新建两个类：

public class WebSocketServer {
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 建立连接
        WebSocketServer client1 = new WebSocketServer();
        WebSocketServer client2 = new WebSocketServer();
    }

    @OnClose
    public void onClose() {
        // 关闭链接
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 从Client接收消息
    }

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

websocket协议

因为匹配是异步的过程，且需要前后端双向交互,而普通的http协议是单向的，一问一答式的，属于立即返回结果的类型，不能满足我们的异步需求，因此我们需要一个新的协议websocket： 不仅客户端可以主动向服务器端发送请求，服务器端也可以主动向客户端发送请求，是双向双通的，且支持异步。简单来说就是客户端向后端发送请求，经过不确定的时间，会返回一次或多次结果给客户端。

基本原理： 每一个ws连接都会在后端维护起来，客户端连接服务器的时候会创建一个WebSocketServer类。每创建一个链接就是new一个WebSocketServer类的实例，所有与链接相关的信息，都会存在这个类里面。

比如我们的Clint1连接到我们的服务器、其实一个连接就是一个类

其实就是一个websocketserver类，每来一个连接，其实就是new一个这个类的实例

先创建这个类，我们每次来一个连接的时候本质上就是new一个这个类的实例

每一个连接都是这个类的一个实列来维护的、所有和这个连接相关的信息都会存到这个类里面、如果是每一个连接自己独有的信息、比如说维护这个连接对应的用户是谁那可以存成私有变量、如果是维护所有连接的公共信息

比如我们想去维护一下当前哪些用户建立的连接、那么可以存成一个静态变量

WebSocket就是一个多线程、每来一个连接就会开一个新的线程来维护它这个websocket就是一个类

每来一个连接就会开一个线程创建一个类，去维护这个连接流程

用户开始匹配的时候向后端发送一个请求、就会在后端websocket里new一个新的类开一个线程来维护这个链接那么接收到这个请求之后、我们会把我们的信息发送给我们的匹配系统

匹配系统是一个单独的额外的程序、匹配系统当接收到很多的用户之后随着时间的推移

出现两名玩家的战斗力比较接近匹配出来一局、匹配系统就会将信息返回给我们的后端服务器

也就是我们的websocket服务器、websocket服务器接受到这个信息之后就会将这个信息返回给这局对战的两名玩家、根据两名玩家建立的链接返还到他们的前端的浏览器里面

同时在我们的服务器端创建一个游戏的过程、因为整个游戏的判断地图的生成都是在云端进行的

前面逻辑的优化

由于每次刷新都会刷新不同的地图，为了公平起见，应该把地图的生成放在服务器端，然后返回结果给前端。

我们在云端维护游戏的整个流程

先生成一个地图，将两个地图传给两个客户端，传完之后等待用户输入

waiting、我们可以从代码端获取下一步操作也可以客户端返还代码端要用微服务了，waiting可以写一个死循环每次循环前先sleep一秒钟

然后判断一下是否两条蛇的下一步操作都有了、如果有的话进行下一步如果没有的话继续等待、当然我们可以设定一个最大时间最大5s
如果5s之内没有得到下一步操作的话、我们就判断没有输入操作的蛇输
如果超时就判断输赢、如果获得输入写一个judging程序、判断是否合法和撞墙、这个游戏的逻辑

为了防止作弊，游戏的一系列操作、判断逻辑都应该放在服务器端，前端只是呈现动画。

我们可以从客户端获取输入，也可以通过微服务从代码端获得输入。

简单的流程如下：

Game -> Create map -> 返回给客户端 -> 客户端等待匹配waiting (sleep) -> 匹配成功则进行一系列游戏逻辑 

准备配置

1. 集成WebSocket 

在pom.xml文件中添加依赖：

spring-boot-starter-websocket
fastjson

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.7.4</version>
        </dependency>
        <!--
         https://mvnrepository.com/artifact/com.alibaba/fastjson
        -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>2.0.11</version>
        </dependency>

添加config/WebSocketConfig配置类

package com.kill9.backend.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();
    }
}

 添加consumer/WebSocketServer类

package com.kill9.backend.consumer;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

@Component
@ServerEndpoint("/websocket/{token}")
public class WebSocketServer {// 注意不要以'/'结尾
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 建立连接
    }

    @OnClose
    public void onClose() {
        // 关闭链接
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 从Client接收消息
    }

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

}

实现后端向前端发送信息，要手写个辅助函数sendMessage:

首先要存储所有链接，因为我们要根据用户Id找到所对应的链接是什么，才可以通过这个链接向前端发请求（全局变量要用static）其次还要有链接与用户一一对应，每个链接都用一个session维护

需要注意的是：WebSocketServer并不是一个标准的Springboot的组件，不是一个单例模式(每一个类同一时间只能有一个实例，这里每建一个链接都会new一个类，所以不是单例模式)，向里面注入数据库并不像在Controller里一样直接@Autowired，要改成先定义一个static变量,再@Autowired加入到setUsersMapper函数上,如下：

    private static UsersMapper usersMapper;

    @Autowired
    public void setUsersMapper(UsersMapper usersMapper) {
        WebSocketServer.usersMapper = usersMapper; //静态变量访问要用类名访问
    }

@Autowired写在set()方法上，在spring会根据方法的参数类型从ioc容器中找到该类型的Bean对象注入到方法的行参中，并且自动反射调用该方法(被@Autowired修饰的方法一定会执行)，所以一般使用在set方法中、普通方法不用。

consumer/WebSocketServer.java:

package com.kill9.backend.consumer;

import com.kill9.backend.mapper.UserMapper;
import com.kill9.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.concurrent.ConcurrentHashMap;

@Component
@ServerEndpoint("/websocket/{token}")
public class WebSocketServer {// 注意不要以'/'结尾
    //与线程安全有关的哈希表，将userID映射到相应用户的WebSocketServer
    private static ConcurrentHashMap<Integer,WebSocketServer> users = new ConcurrentHashMap<>();

    //当前链接请求的用户
    private User user;

    //后端向前端发信息,每个链接用session维护
    private Session session = null;

    private static UserMapper userMapper;

    @Autowired
    public void setUsersMapper(UserMapper userMapper) {
        WebSocketServer.userMapper = userMapper; //静态变量访问要用类名访问
    }

    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 建立连接
        System.out.println("connected");
        this.session = session;
        //为了方便调试，初阶段只把token当成userId看
        Integer userId = Integer.parseInt(token);
        this.user = userMapper.selectById(userId);
        users.put(userId,this);
    }

    @OnClose
    public void onClose() {
        // 关闭链接
        System.out.println("disconnected!");
        //断开连接的话要将user移除
        if (this.user != null) {
            users.remove((this.user.getId()));
        }
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 从Client接收消息
        System.out.println("receive message!");
    }

    //后端向前端发信息
    private void sendMessage(String message){
        //异步通信要加上锁
        synchronized (this.session){
            try {
                this.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

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

}

 放行websocket连接

配置config/SecurityConfig

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/websocket/**");
}

前端

onMounted: 当组件被挂载的时候执行的函数
onUnmonted: 当组件被卸载的时候执行的函数
初步调试阶段，我们是将token传进user.id的

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.opponent_photo;
        },
        updateStatus(state,status){
            state.status = status;
        }
    },
    actions: {


    },
    modules: {
        user: ModuleUser,
    }
}

将pk引入store中

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,
  }
})

前端与后端建立连接

views/pk/PKIndex.vue

<template>
    <PlayGround>

    </PlayGround>
</template>
<script>

import PlayGround from '../../components/PlayGround.vue';
import { useStore } from "vuex"
import { onMounted, onUnmounted } from "vue";

export default{
    components:{
        PlayGround,
    },

    setup(){
        const store = useStore();
        //字符串中有${}表达式操作的话要用``，不能用引号
        const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.id}/`;
        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("disconnect");
            }
        });
        
        onUnmounted(() => { //当当前页面关闭时调用
            socket.close(); //卸载的时候断开连接
        });
    }
}
</script>
<style scoped>
.refresh-map{
    position: absolute;
    left: 50%;
}
</style>

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

将token改成jwt验证

若使用userId建立ws连接，用户可伪装成任意用户，因此这是不安全的 

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

添加ws的jwt验证，根据token判断用户是否存在

consumer/utils/JwtAuthenciation.java

package com.kill9.backend.consumer.utils;


import com.kill9.backend.utils.JwtUtil;
import io.jsonwebtoken.Claims;

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 {
        // 建立连接
        System.out.println("connected");
        this.session = session;
        //为了方便调试，初阶段只把token当成userId看
        Integer userId = JwtAuthentication.getUserId(token);
        this.user = userMapper.selectById(userId);
        if(this.user!=null){
            // ID  对应一个连接
            users.put(userId,this);
        }else{
            this.session.close();
        }
    }

 实现前端逻辑

匹配界面

用grid系统布局自己头像:对手头像= 6 : 6
逻辑很简单，只要点击匹配按钮，就向后端发送请求开始匹配.

components/MatchGround.vue

<template>
    <div class="matchground">
        <div class="row">
            <div class="col-4">
                <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-4">
                    <div class="user-select-bot">
                        <select v-model="select_bot" class="form-select" aria-label="Default select example">
                            <option value="-1">亲自上阵</option>
                            <option v-for="bot in bots" :key="bot.id" :value="bot.id">{{bot.title}}</option>
                        </select>
                    </div>
            </div>
            
            <div class="col-4">
                <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>
        <div class="col-12" style="text-align:center;">
            <button @click="click_match_btn" type="button" :class="'btn ' + match_class + ' match-btn'">{{match_btn_info}}</button>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue';
import {useStore} from 'vuex';
import $ from 'jquery';

export default{
    setup(){
        let match_btn_info = ref("开始匹配");
        let match_class = ref("btn-warning");
        const store = useStore();
        let bots = ref([]);

        let select_bot = ref("-1");

        const click_match_btn = () =>{
            if(match_btn_info.value === "开始匹配"){
                match_btn_info.value = "取消匹配";
                match_class.value="btn-danger";
                store.state.pk.socket.send(JSON.stringify({
                    event:"start-matching",
                    bot_id:select_bot.value,

                }))

            }else{  
                match_btn_info.value = "开始匹配";
                match_class.value="btn-warning";
                store.state.pk.socket.send(JSON.stringify({
                    event:"stop-matching",
                }));
                
            }
        }

        const refresh_bots = () =>{
        $.ajax({
            url:"http://localhost:3000/user/bot/getlist/",
            type:"get",
            headers:{
                Authorization:"Bearer " + store.state.user.token,

            },
            success(resp){
                bots.value = resp;
            }
        });
       }

       refresh_bots();//从云端动态获取bot

        return{
            match_btn_info,
            click_match_btn,
            match_class,
            bots,
            select_bot,
        }
    }
   
}

</script>

<style scoped>

div.user-select-bot{
    padding-top: 28vh;

}
div.user-select-bot>select{
   /* background-color:rgba(111, 111, 111, 0.402); */
   background-color:rgba(99, 154, 176, 0.7);
   color: white;
   margin: 0 auto;

}
div.matchground{
    width:60vw;
    height: 70vh;
    margin: 40px auto;
    /* background-color: rgba(50,50,50,0.5); */
    background-color:  rgba(247, 209, 215,0.7);

}
div.user-photo{
    text-align: center;
    padding-top: 10vh;
}
div.user-photo > img{
    width: 20vh;
    border-radius: 50%;
}
div.user-photo > img:hover{
    scale: 1.2;
    transition: 100ms;
}
div.user-username{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color:  white;
    margin-top: 2vh;
}
.match-btn{
    border-radius: 20px;
    margin-top: 10vh;
    width: 20%;
}
.match-btn:hover{
    scale: 1.2;
    transition: 100ms;
}
</style>

对战界面和匹配界面的切换
views/pk/PKindex.vue

<template>

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

解决token为空bug

在user.js中

 这里调用updateUser会把原来已经更新的token覆盖为空

 

前端向后端发送请求：store.state.pk.socket.send(字符串);
以开始匹配为例：

store.state.pk.socket.send(JSON.stringify({
                    event: "start matching",
                }));

后端可以在onMessage那里接收到前端的请求，并且解析传送过来的数据
consumer/WebSocketServer.java 

 @OnMessage
    public void onMessage(String message, Session session) {
        // 从Client接收消息
        System.out.println("receive message!");
        //将字符串转换成json对象
        JSONObject data = JSONObject.parseObject(message);
        String event = data.getString("event");
        //防止空指针
        if("start matching".equals(event)){
            startMatching();
        }else if("stop matching".equals(event)){
            stopMatching();
        }
    }

用线程安全的set定义匹配池：

final private static CopyOnWriteArraySet<Users> matchPoll = new CopyOnWriteArraySet<>();

开始匹配时，将用户放进拼配池里，取消匹配时将用户移除匹配池
匹配过程在目前调试阶段可以简单地两两匹配

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);
            //给A返回数据
            JSONObject respA = new JSONObject();
            respA.put("event","start_matching");
            respA.put("opponent_username",b.getUsername());
            respA.put("opponent_photo",b.getPhoto());
            users.get(a.getId()).sendMessage(respA.toJSONString());

            JSONObject respB = new JSONObject();
            respA.put("event","start_matching");
            respA.put("opponent_username",a.getUsername());
            respA.put("opponent_photo",a.getPhoto());
            users.get(b.getId()).sendMessage(respB.toJSONString());

        }

    }
    private void stopMatching(){
        System.out.println("stop Matching");
        //把自己从匹配池删掉
        matchPool.remove(this.user);
    }

后端返回信息给前端后，在前端接受并处理信息
views/PKindex.vue 

socket.onmessage = msg =>{ //前端接收到信息时调用的函数
                const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
                if(data.event==="start_matching"){//这个这个start-matching是respA或respB返回的
                    //匹配成功,更新对手信息
                    //调用pk.js中 actions中的函数
                    store.commit("updateOpponent",{
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                }
            }

这样，我们就能初步实现匹配系统了。
匹配成功2s后跳到pk页面,只需要updateStatus即可
注意的是卸载组件的时候要记得把状态改为matching
views/PK/PKindex.vue

socket.onmessage = msg =>{ //前端接收到信息时调用的函数
                const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
                if(data.event==="start_matching"){//这个这个start-matching是respA或respB返回的
                    //匹配成功,更新对手信息
                    //调用pk.js中 actions中的函数
                    store.commit("updateOpponent",{
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(()=>{
                        store.commit("updateStatus", "playing");//延时函数，单位是毫秒
                    },2000);
                }
            }
            socket.onclose = () =>{
                console.log("disconnect");
                store.commit("updateStatus", "matching");
            }

添加随机图片

onMounted(()=>{

            store.commit("updateOpponent",{
                username:"Opponent",
                photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })

解决同步问题

前文也提到过，生成地图，游戏逻辑等与游戏相关的操作都应该放在服务端，不然的话客户每次刷新得到的地图都不一样，游戏的公平性也不能得到保证。因此，我们要将之前在前端写的游戏逻辑全部转移到后端（云端），前端只负责动画的演示即可。

后端实现
首先要在后端创建一个Game类实现游戏流程，其实就是把之前在前端写的js全部翻译成Java就好了
consumer/utils/Game.java

直接按照之前的gamemap.js搬过去就好了

package com.kill9.backend.consumer.utils;

import java.util.Random;

//支持多线程
public class Game{
    private final Integer rows;
    private final Integer cols;
    private final Integer innerWallsCount;

    private  final static int[] dx = {-1,0,1,0},dy={0,1,0,-1};


    final int[][] g;

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

    }
    public int[][] getG(){
        return g;
    }
    //判断连通性 flood fill
    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<this.rows && x>=0 && y<this.cols && y>=0 && 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.innerWallsCount/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;
                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;
        }
    }
    //将地图转成字符串
    private String getMapString(){
        StringBuilder res = new StringBuilder();
        for(int i = 0;i<rows;i++){
            for(int j = 0;j<cols;j++){
                res.append(g[i][j]);
            }
        }
        return res.toString();
    }

}

 然后在websocketserver中 传给前端

while(matchPool.size() >= 2){
            Iterator<User> it = matchPool.iterator();
            //从匹配池挑两个人出来
            User a = it.next(),b = it.next();
            System.out.println(a);
            System.out.println(b);
            //当两个匹配成功就从匹配池删除
            matchPool.remove(a);
            matchPool.remove(b);
            //给A返回数据
            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());

        }

在 前端 pk.js中

import ModuleUser from './user'
export default {
    state: {
        socket:null ,//ws连接
        opponent_username:"",
        opponent_photo:"",
        status:"matching",matching表示匹配界面，playing表示对战界面
        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: {
        user: ModuleUser,
    }
}

在pkindexview中

 socket.onmessage = msg =>{ //前端接收到信息时调用的函数
                const data = JSON.parse(msg.data); //不同的框架数据定义的格式不一样
                console.log(data);
                if(data.event==="start-matching"){//这个这个start-matching是respA或respB返回的
                    //匹配成功,更新对手信息
                    //调用pk.js中 actions中的函数
                    store.commit("updateOpponent",{
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(()=>{
                        store.commit("updateStatus", "playing");//延时函数，单位是毫秒
                    },2000);
                    store.commit("updateGamemap",data.gamemap);
                }
            }

在gamemap.vue中传一个store给gamemap.js

import { AcGameObject } from "./AcGameObject";
import { Wall } from "./Wall";
import { Snake } from "./Snake";
export class GameMap extends AcGameObject{
    constructor(ctx,parent,store){
        super();
        this.ctx = ctx;
        this.parent = parent;
        this.L = 0;

        this.rows = 13;
        this.cols = 14;
        this.store = store

        this.inner_walls_count = 20;
        this.wall = [];
        //创建两条蛇
        this.snakes = [
            //左下角
            new Snake({id:0,color:"#0c8998",r:this.rows-2,c:1},this),
            //右上角
            new Snake({id:1,color:"#faaf00",r:1,c:this.cols-2},this),
        ];
    }

    start(){
        this.add_listening_events();
        for(let i = 0;i<1000;i++){
            if(this.create_walls()){
                break;
            }
        }
    }
    add_listening_events(){
        this.ctx.canvas.focus();//聚焦
        const [snake0,snake1] = this.snakes;
        //添加键盘监听事件
        this.ctx.canvas.addEventListener("keydown",e=>{
            if(e.key === 'w') snake0.set_direction(0);//上
            else if(e.key === 'd') snake0.set_direction(1);//右
            else if(e.key === 's') snake0.set_direction(2);//下
            else if(e.key === 'a') snake0.set_direction(3);//左
            else if(e.key === 'ArrowUp') snake1.set_direction(0);
            else if(e.key === 'ArrowRight') snake1.set_direction(1);
            else if(e.key === 'ArrowDown') snake1.set_direction(2);
            else if(e.key === 'ArrowLeft') snake1.set_direction(3);
        });
    }

    // check_connectivity(g,sx,sy,tx,ty){
    //     if(sx==tx&&sy==ty) return true;
    //     g[sx][sy] = true;

    //     let dx = [-1,0,1,0],dy=[0,1,0,-1];

    //     for(let i = 0;i<4;i++){
    //         let x = sx+dx[i],y = sy+dy[i];
    //         if(!g[x][y] && this.check_connectivity(g,x,y,tx,ty))
    //         return true;
    //     }
    //     return false;

    // }
    create_walls(){
         墙 true 无 false
        const g = this.store.state.pk.gamemap;
        
        for(let r = 0;r<this.rows;r++){
            for(let c = 0;c<this.cols;c++){
                if(g[r][c]){
                    this.wall.push(new Wall(r,c,this));
                }
            }
        }
    }

    update_size(){
        //计算小正方形的边长
        this.L = Math.min(this.parent.clientWidth/this.cols,this.parent.clientHeight / this.rows);
        this.ctx.canvas.width = this.L * this.cols;
        this.ctx.canvas.height = this.L * this.rows;

    }
    next_step(){ //让两条蛇都进入下一个回合
        for(const snake of this.snakes){
            snake.next_step();
        }
    }

    check_valid(cell){
        //检测目标位置是否合法，没有撞到两条蛇的身体和墙
        for(const w of this.wall){
            if(w.r === cell.r && w.c === cell.c) return false;
        }

        for(const snake of this.snakes){
            let k = snake.cells.length;
            if(!snake.check_tail_increasing())
                //当蛇尾会前进的时候，蛇尾不要判断
                k--;
            
            for(let i = 0 ;i<k;i++){
                if(snake.cells[i].r === cell.r && snake.cells[i].c === cell.c)
                    return false;
            }
        }
        return true;
    }

    check_ready(){
        //判断两条蛇是否准备下一回合了
        for(const snake of this.snakes){
            //非静止
            if(snake.status !== "idle") return false;
            //无指令
            if(snake.direction === -1) return false;
        }
        return true;
    }
    update(){
      this.update_size();
      if(this.check_ready()){
        this.next_step();
      }
      this.render();
    }

    render() {
        const color_eve = "#f2d2be",color_odd = "#fbb5b6";
        for(let r = 0;r<this.rows;r++){
            for(let c = 0;c<this.cols;c++){
                if((r+c)%2==0){
                    this.ctx.fillStyle = color_eve;
                }else{
                    this.ctx.fillStyle = color_odd;
                }
            
            this.ctx.fillRect(c*this.L,r*this.L,this.ctx.canvas.width,this.ctx.canvas.height);
          }
        }
    }
}

ok～～