网页版五子棋——匹配模块（客户端开发）

前一篇文章：网页版五子棋——用户模块（客户端开发）-CSDN博客

·前言

一、前后端交互接口设计

二、游戏大厅页面

1.页面代码编写

2.前后端交互代码编写

3.测试获取用户信息功能

·结尾

·前言

前面文章介绍完了五子棋项目用户模块的代码编写，从本篇文章就开始介绍五子棋项目匹配模块的代码编写了，匹配模块这里要做的事情就是可以让多个用户在游戏大厅中能够进行匹配，我们会按照天梯积分，把实力相近的两个玩家匹配到一起进行对战，本篇文章要介绍的内容是前后端交互接口的设计，以及游戏大厅页面的编写，还有前后端交互代码的编写，本篇文章新增的代码文件如下图圈起来的文件所示：

下面就开始本篇文章的内容介绍。

一、前后端交互接口设计

我们先来设计一下匹配模块这里前后端交互的接口，像匹配这样的功能就需要用到前面文章中提到的消息推送机制了（文章链接：网页版五子棋—— WebSocket 协议-CSDN博客）这是因为玩家发送匹配请求的事情是可以确定的（当玩家点击匹配按钮，就会发送匹配请求），但是服务器什么时候告诉玩家匹配结果是不确定的，这就需要等待匹配结束的时候才能告知，如下图的场景：

如上图所示，此时玩家2 点击匹配按钮，给服务器发送“我要进行匹配”这样的请求，服务器就会响应玩家2 的请求，同时要主动告诉玩家1 匹配成功，并告诉玩家1 它匹配到了哪个对手，这也就是消息推送的机制，所以我们下面要设计的前后端交互接口也都是基于 WebSocket 来展开的，前面文章介绍了 WebSocket 可以传输文本数据也可以传输二进制数据，我们这里就直接设计成让 WebSocket 传输 JSON 格式的文本数据即可，那么接口的设计就如下所示了：

匹配连接：

                ws://127.0.0.1:8080/findMatch

匹配请求：

                {

                message: 'startMatch' / 'stopMatch', // 开始/结束匹配

                }

匹配响应1：

                {

                  ok: true / false, // 匹配成功/失败

                  reason: "", // 匹配如果失败, 失败原因的信息

                  message: 'startMatch' / 'stopMatch',

                }

这个响应是客户端给服务器发送匹配请求之后，服务器立即返回的匹配响应。

匹配响应2：

                {

                  ok: true / false, // 匹配成功/失败

                  reason: "",

                  message: 'matchSuccess',

                }

这个响应是真正匹配到对手后，服务器主动推送回来的信息，匹配到的对手不需要在这个响应中体现，仍然都放在服务器中保存即可。

上面设计好匹配模块中前后端交互的接口后，在通过 WebSocket 传输请求数据的时候，数据中不需要带有用户的身份信息，当前用户的身份信息在前面登录完成后就已经保存在 HttpSession 中了，在 WebSocket 中也是可以拿到之前登录完存在 HttpSession 中的信息。

关于上面的响应还要注意两点：

客户端（页面）收到匹配的响应之后，就直接跳转到游戏房间页面；
如果返回的匹配响应 ok 的值为 false，则弹框的方式显示错误原因，并跳转回登录页面。

二、游戏大厅页面

1.页面代码编写

我们要编写游戏大厅页面的大致轮廓如下图所示：

上图中的导航栏与页面主题区域的样式在前面已经编写过了，存放在了公共样式设置的 common.css 代码中，在下面编写游戏大厅页面的代码时就可以直接进行引用了，下面我们就来创建 game_hall.html 在这里编写游戏大厅的代码，这里主要包含：

#screen 用于显示玩家的分数信息；
#match-button 作为匹配按钮

代码及详细的介绍如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <!-- 引入 css 样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

</body>
</html>

游戏大厅样式 game_hall.css 的代码及介绍如下所示：

/* 游戏大厅样式 */

/* 设置页面主体区域样式 */
.container {
    width: 100%;
    /* 导航栏已经占据 50px 像素
       这里使游戏大厅界面把剩余部分铺满 */
    height: calc(100% - 50px);
    /* 设置弹性布局 */
    display: flex;
    /* 设置位置
       垂直水平居中 */
    align-items: center;
    justify-content: center;
}

/* 设置用户信息的展示框样式 */
#screen {
    width: 400px;
    height: 200px;
    /* 设置文字样式 */
    font-size: 20px;
    /* 设置背景颜色 */
    background-color: gray;
    /* 设置文字颜色 */
    color: white;
    /* 把边框的棱角钝化 */
    border-radius: 10px;
    /* 设置玩家信息内部位置 */
    text-align: center;
    /* 两行文本 */
    line-height: 100px;
}

/* 设置匹配按钮的样式 */
#match-button {
    width: 400px;
    height: 50px;
    /* 设置字体样式 */
    font-size: 20px;
    color: white;
    /* 设置背景颜色 */
    background-color: orange;
    /* 去除边框与轮廓线 */
    border: none;
    outline: none;
    /* 把边框的棱角钝化 */
    border-radius: 10px;
    /* 设置文字位置 */
    text-align: center;
    /* 使文字垂直居中 */
    line-height: 50px;
    /* 增加与上面 div 的间距 */
    margin-top: 20px;
}

/* 设置按钮被点击后的样式 */
#match-button:active {
    background-color: gray;
}

到这里，游戏房间页面的代码就编写完毕了，页面如下图所示：

由于没有进行前后端交互代码的编写，所以这里的玩家信息还暂且获取不到。

2.前后端交互代码编写

为了让游戏大厅的页面能够获取到用户的信息，我们使用 Ajax 来使页面和服务器之间进行交互，这里的步骤是先引入 jQuery 代码，然后根据前面文章中规定好的获取用户信息的接口来编写这里前后端交互的代码，获取用户信息的接口如下图所示：

在 game_hall.html 中编写 js 代码，通过 jQuery 中的 Ajax 来和服务器进行交互，同时创建 WebSocket 实例，建立 WebSocket 连接，来为后续匹配功能做准备，代码及详细介绍如下所示：

    <!-- 引入 jQuery 代码 -->
    <script src="js/jquery.min.js"></script>
    <script>
        // 由于当前请求是在页面加载时就发送的
        // 所以直接进行前后端交互
        $.ajax({
            type: 'get',
            url: '/userInfo',
            success: function(body) {
                let screeDiv = document.querySelector('#screen');
                // 把要显示的数据组织好,放入 inneerHTML 中,进而显示到页面上
                screeDiv.innerHTML = '玩家: ' + body.username + " 分数: " + body.score
                    + "<br> 比赛场次: " + body.totalCount + " 获胜场次: " + body.winCount;
            },
            error: function() {
                alert("获取用户信息失败!");
            }
        });

        // 此处进行初始化 WebSocket, 并且实现前端的匹配逻辑.
        let websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");
        websocket.onopen = function() {
            console.log("onopen");
        }
        websocket.onclose = function() {
            console.log("onclose");
        }
        websocket.onerror = function() {
            console.log("onerror");
        }
        // 监听页面关闭事件,在页面关闭之前,手动调用这里的 websocket 的 close 方法.
        websocket.onbeforeunload = function() {
            websocket.close();
        }
        // 处理服务器返回的响应数据
        websocket.onmessage = function(e) {
            // 这个响应是针对 "开始匹配" / "停止匹配" 来对应的
            // 解析得到的响应对象,返回的数据是一个 JSON 字符串,解析成 js 对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if (!resp.ok) {
                console.log("游戏大厅中接收到了失败响应! " + resp.reason);
                return;
            }
            if (resp.message == 'startMatch') {
                // 开始匹配请求发送成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if (resp.message == 'stopMatch') {
                // 结束匹配请求发送成功
                console.log("离开匹配队列成功!");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                // 已经匹配到对手
                console.log("匹配到对手! 进入游戏房间!");
                location.assign("/game_room.html");
            } else {
                console.log("收到了非法的响应! message = " + resp.message);
            }
        }

        // 给匹配按钮添加一个点击事件
        let matchButton = document.querySelector('#match-button');
        // 点击匹配按钮后触发的操作
        matchButton.onclick = function() {
            // 在触发 websocket 请求之前,先确认下 websocket 连接是否正常
            if (websocket.readyState == websocket.OPEN) {
                // 当前 readyState 处在 OPEN 状态,表示连接正常
                // 这里发送的数据有两种可能, 开始匹配/停止匹配
                if (matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    // 通过 websocket 发送数据
                    // send 是把一个 JSON 类型的数据进行发送
                    // JSON.stringify() 先把我们要发送的数据转换成 JSON 字符串
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if (matchButton.innerHTML == "匹配中...(点击停止)") {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                }
            } else {
                // 这是说明连接当前是异常的状态
                alert("当前您的连接已经断开! 请重新登录!");
                location.assign("/login.html");
            }
        }
    </script>

在上面前后端交互代码的编写中，我们还要注意一点， JSON 字符串和 JS 对象的转换，这里 JSON 字符串转成 JS 对象用到的方法是 JSON.parse，JS 对象转成 JSON 字符串使用的方法是 JSON.stringify。

编写完前后端交互的代码后，我们要注意一点，当我们修改完 css 样式或者 js 文件之后，往往需要在访问的页面中使用 Ctrl + F5 强制刷新一下页面才能生效，否则，浏览器可能仍然使用旧版本的代码，这是由于 css / js 的代码一般比较大，加载会比较慢，服务器会在第一次加载页面的时候把 css / js 部分的代码下载下来作为缓存，这样下次访问速度就会变快，Ctrl + F5 就是清除页面缓存让浏览器重新加载 css / js 代码。

3.测试获取用户信息功能

前后端交互做好之后，我们就可以启动服务器，在浏览器中输入：http://127.0.0.1:8080/login.html 进入登录页面，通过登录跳转到游戏大厅页面，来观察是否可以正确获取到用户信息，测试过程如下图所示：

经过测试，图中的结果符合预期，游戏大厅页面中获取用户信息的功能就算是一个正常的功能了。

·结尾

文章到此就要结束了，本篇文章对匹配模块要用到的前后端交互接口进行了设计，并将游戏大厅的页面进行了编写，完成了获取用户信息的前后端交互代码，并测试了其功能的正确性，那么到这，五子棋匹配模块中的客户端代码开发也就基本完成了，如果对本篇文章内容有所疑惑，欢迎在评论区进行留言，如果感觉本篇文章还不错，希望能收到你的三连支持，下一篇文章就开始五子棋项目匹配模块中服务器端的代码开发了，我们下一篇文章再见吧~~~