【C++】在线五子棋对战项目网页版

传统的 web 程序都是属于 "⼀问⼀答" 的形式，即客户端给服务器发送了⼀个 HTTP 请求，服务器给客⼾端返回⼀个 HTTP 响应。这种情况下服务器是属于被动的一方，在HTTP协议中，如果客⼾端不主动发起请求，服务器就⽆法主动给客⼾端响应
像网页即时聊天或者我们做的五子棋游戏这样的程序都是非常依赖 "消息推送" 的，即需要服务器主动推动消息到客户端。如果只是使用原生的 HTTP 协议，要想实现消息推送⼀般需要通过 "轮询" 的方式实现，⽽轮询的成本⽐较⾼并且也不能及时的获取到消息的响应。

1.2.什么是轮询呢？

比如上图，服务端是无法向主机B主动发送信息，必须让主机B先主动发送信息请求信息到服务端，问服务端有信息了吗，对于主机A也是同样如此，要想获取主机B从服务端发送的信息，服务端是不能主动发送信息到主机A，必须由主机A自己多次申请，这就是“轮询”！

基于上述两个问题，就产⽣了WebSocket协议。WebSocket 更接近于 TCP 这种级别的通信⽅式，⼀旦连接建⽴完成客户端或者服务器都可以主动的向对⽅发送数据。

1.3.websocket协议切换过程

websocketpp协议是由HTTP协议切换过来的，客户端发送协议切换的请求，服务端进行响应，同意切换，这样就变成了websocket的通信连接了

1.4.websocketpp库常用接口认识

1.5.websocketpp库搭建服务器流程

实例化server对象
设置日志输出等级
初始化asio框架种的调度器
设置业务处理回调函数(具体业务处理的函数由我们自己实现)
设置服务器监听端口
开始获取新建连接
启动服务器

1.6.websocketpp库搭建服务器

代码：

#include <iostream> #include <string> #include <websocketpp/server.hpp> #include <websocketpp/config/asio_no_tls.hpp> typedef websocketpp::server<websocketpp::config::asio> wsserver_t; void print(const std::string &str) { std::cout << str << std::endl; } void http_callback(wsserver_t *srv, websocketpp::connection_hdl hdl) { //给客户端返回一个hello world的页面 wsserver_t::connection_ptr conn = srv->get_con_from_hdl(hdl); std::cout << "body: " << conn->get_request_body() << std::endl; websocketpp::http::parser::request req = conn->get_request(); std::cout << "method: " << req.get_method() << std::endl; std::cout << "uri: " << req.get_uri() << std::endl; std::string body = "<html><body><h1>Hello World</h1></body></html>"; conn->set_body(body); conn->append_header("Content-Type", "text/html"); //conn->set_body(conn->get_request_body()); conn->set_status(websocketpp::http::status_code::ok); //wsserver_t::timer_ptr tp = srv->set_timer(5000, std::bind(print, "bitejiuyeke")); //tp->cancel();//定时任务的取消，会导致定时任务立即被执行 } void wsopen_callback(wsserver_t *srv, websocketpp::connection_hdl hdl) { std::cout << "websocket握手成功！！\n"; } void wsclose_callback(wsserver_t *srv, websocketpp::connection_hdl hdl) { std::cout << "websocket连接断开！！\n"; } void wsmsg_callback(wsserver_t *srv, websocketpp::connection_hdl hdl, wsserver_t::message_ptr msg) { wsserver_t::connection_ptr conn = srv->get_con_from_hdl(hdl); std::cout << "wsmsg: " << msg->get_payload() << std::endl; std::string rsp = "client say: " + msg->get_payload(); conn->send(rsp, websocketpp::frame::opcode::text); } int main() { //1. 实例化server对象 wsserver_t wssrv; //2. 设置日志等级 wssrv.set_access_channels(websocketpp::log::alevel::none); //3. 初始化asio调度器 wssrv.init_asio(); wssrv.set_reuse_addr(true); //4. 设置回调函数 wssrv.set_http_handler(std::bind(http_callback, &wssrv, std::placeholders::_1)); wssrv.set_open_handler(std::bind(wsopen_callback, &wssrv, std::placeholders::_1)); wssrv.set_close_handler(std::bind(wsclose_callback, &wssrv, std::placeholders::_1)); wssrv.set_message_handler(std::bind(wsmsg_callback, &wssrv, std::placeholders::_1, std::placeholders::_2)); //5. 设置监听端口 wssrv.listen(8085); //6. 开始获取新连接 wssrv.start_accept(); //7. 启动服务器 wssrv.run(); return 0; }

我们想要在页面生成一个Hello World

成功生成！我们使用websocketpp协议搭建网络通信平台成功！

2.mysqlclient库-接口认识

mysql数据库的访问操作流程:
客户端初始化过程:
1.初始化mysql操作句柄
2.连接mysql服务器
3.设置客户端的字符集
4.选择想要操作的数据库
客户端对数据库中数据的操作:
新增，修改，删除，都是只要sql语句执行成功了，数据库中的数据就发生了改变，没有反馈结果
查询是不一样的，因为需要首先执行语句成功，需要将查询结果保存到本地进行访问
5.执行sql语句
一旦成功，如果是增删改，则就完毕了，
查询:
6.将查询结果保存到本地
7.获取查询结果集中的结果条数
8.遍历获取结果集中的每一条数据进行处理
9.释放结果集，避免内存泄露

10.释放MySQL操作句柄

用例代码：

#include <stdio.h> #include <string.h> #include <mysql/mysql.h> #define HOST "127.0.0.1" #define PORT 3306 #define USER "root" #define PASS "[email protected]" #define DBNAME "gobang" int main() { //1. 初始化mysql句柄 // MYSQL *mysql_init(MYSQL *mysql); MYSQL *mysql = mysql_init(NULL); if (mysql == NULL) { printf("mysql init failed!\n"); return -1; } //2. 连接服务器 // MYSQL *mysql_real_connect(mysql, host, user, pass, dbname, port, unix_socket, flag); if (mysql_real_connect(mysql, HOST, USER, PASS, DBNAME, PORT, NULL, 0) == NULL) { printf("connect mysql server failed : %s\n", mysql_error(mysql)); mysql_close(mysql); return -1; } //3. 设置客户端字符集 // int mysql_set_character_set(mysql, "utf8"); if (mysql_set_character_set(mysql, "utf8") != 0) { printf("set client character failed : %s\n", mysql_error(mysql)); mysql_close(mysql); return -1; } //4. 选择要操作的数据库 // int mysql_select_db(mysql, dbname) // mysql_select_db(mysql, DBNAME); //5. 执行sql语句 // int mysql_query(MYSQL *mysql, char *sql); //char *sql = "insert stu values(null, '小明', 18, 53, 68, 87);"; //char *sql = "update stu set ch=ch+40 where sn=1;"; //char *sql = "delete from stu where sn=1;"; char *sql = "select * from stu;"; int ret = mysql_query(mysql, sql); if (ret != 0) { printf("%s\n", sql); printf("mysql query failed : %s\n", mysql_error(mysql)); mysql_close(mysql); return -1; } //6. 如果sql语句是查询语句，则需要保存结果到本地 // MYSQL_RES *mysql_store_result(MYSQL *mysql) MYSQL_RES *res = mysql_store_result(mysql); if (res == NULL) { mysql_close(mysql); return -1; } //7. 获取结果集中的结果条数 // int mysql_num_rows(MYSQL_RES *res); // int mysql_num_fields(MYSQL_RES *res); int num_row = mysql_num_rows(res); int num_col = mysql_num_fields(res); //8. 遍历保存到本地的结果集 for (int i = 0; i < num_row; i++) { // MYSQL_ROW mysql_fetch_row(MYSQL *res); MYSQL_ROW row = mysql_fetch_row(res); for (int i = 0; i < num_col; i++) { printf("%s\t", row[i]); } printf("\n"); } //9. 释放结果集 mysql_free_result(res); //10. 关闭连接，释放句柄 mysql_close(mysql); return 0; }

试着插入新数据，查询结果，成功！

3.项目模块的划分：

4.项目流程图：

4.1.玩家用户角度流程图：

4.2.服务器流程结构图：

5.实用的工具模块：

5.1.日志的实现

日志宏的实现的一些前置知识：

代码：

#ifndef __M_LOGGER_H__ #define __M_LOGGER_H__ #include <stdio.h> #include <time.h> #define INF 0 #define DBG 1 #define ERR 2 #define DEFAULT_LOG_LEVEL INF #define LOG(level, format, ...) do{\ if (DEFAULT_LOG_LEVEL > level) break;\ time_t t = time(NULL);\ struct tm *lt = localtime(&t);\ char buf[32] = {0};\ strftime(buf, 31, "%H:%M:%S", lt);\ fprintf(stdout, "[%s %s:%d] " format "\n", buf, __FILE__, __LINE__, ##__VA_ARGS__);\ }while(0) #define ILOG(format, ...) LOG(INF, format, ##__VA_ARGS__) #define DLOG(format, ...) LOG(DBG, format, ##__VA_ARGS__) #define ELOG(format, ...) LOG(ERR, format, ##__VA_ARGS__) #endif

5.2.mysql工具类编译与测试

这个报错是为什么？

因为我们把第一步忘记了，第一步需要创建表结构

添加表结构之后，我们再执行一遍，成功添加小黑的信息！

代码：

class mysql_util { public: static MYSQL *mysql_create(const std::string &host, const std::string &username, const std::string &password, const std::string &dbname, uint16_t port = 3306) { MYSQL *mysql = mysql_init(NULL); if (mysql == NULL) { ELOG("mysql init failed!"); return NULL; } //2. 连接服务器 if (mysql_real_connect(mysql, host.c_str(), username.c_str(), password.c_str(), dbname.c_str(), port, NULL, 0) == NULL) { ELOG("connect mysql server failed : %s", mysql_error(mysql)); mysql_close(mysql); return NULL; } //3. 设置客户端字符集 if (mysql_set_character_set(mysql, "utf8") != 0) { ELOG("set client character failed : %s", mysql_error(mysql)); mysql_close(mysql); return NULL; } return mysql; } static bool mysql_exec(MYSQL *mysql, const std::string &sql) { int ret = mysql_query(mysql, sql.c_str()); if (ret != 0) { ELOG("%s\n", sql.c_str()); ELOG("mysql query failed : %s\n", mysql_error(mysql)); return false; } return true; } static void mysql_destroy(MYSQL *mysql) { if (mysql != NULL) { mysql_close(mysql); } return ; } };

5.3.json工具类编译与测试：

这个工具类是用来干嘛的？序列化和反序列化成功！

编译成功！

代码：

class json_util{ public: static bool serialize(const Json::Value &root, std::string &str) { Json::StreamWriterBuilder swb; std::unique_ptr<Json::StreamWriter>sw(swb.newStreamWriter()); std::stringstream ss; int ret = sw->write(root, &ss); if (ret != 0) { ELOG("json serialize failed!!"); return false; } str = ss.str(); return true; } static bool unserialize(const std::string &str, Json::Value &root) { Json::CharReaderBuilder crb; std::unique_ptr<Json::CharReader> cr(crb.newCharReader()); std::string err; bool ret = cr->parse(str.c_str(), str.c_str() + str.size(), &root, &err); if (ret == false) { ELOG("json unserialize failed: %s", err.c_str()); return false; } return true; } };

5.4.string工具类编译与测试

该工具类是为了分割字符串来提取内容

成功分割，提取到内容！

代码：

class string_util{ public: static int split(const std::string &src, const std::string &sep, std::vector<std::string> &res) { // 123,234,,,,345 size_t pos, idx = 0; while(idx < src.size()) { pos = src.find(sep, idx); if (pos == std::string::npos) { //没有找到,字符串中没有间隔字符了，则跳出循环 res.push_back(src.substr(idx)); break; } if (pos == idx) { idx += sep.size(); continue; } res.push_back(src.substr(idx, pos - idx)); idx = pos + sep.size(); } return res.size(); } };

5.5.file工具类编译与测试

该工具是为了提取文件内容

定义一个 size_t 类型的变量 fsize，用于存储文件的大小。
将文件读取指针移动到文件的末尾，以获取文件的大小。
使用 tellg 函数获取当前文件指针的位置，即文件的大小，并将其存储在 fsize 中。

成功将makefile文件里面的内容进行读取和打印！

代码：

class file_util { public: static bool read(const std::string &filename, std::string &body) { //打开文件 std::ifstream ifs(filename, std::ios::binary); if (ifs.is_open() == false) { ELOG("%s file open failed!!", filename.c_str()); return false; } //获取文件大小 size_t fsize = 0; ifs.seekg(0, std::ios::end); fsize = ifs.tellg(); ifs.seekg(0, std::ios::beg); body.resize(fsize); //将文件所有数据读取出来 ifs.read(&body[0], fsize); if (ifs.good() == false) { ELOG("read %s file content failed!", filename.c_str()); ifs.close(); return false; } //关闭文件 ifs.close(); return true; } };

6.用户信息表的设计：

运行结果与我们创建表的效果一致！

代码：

drop database if exists gobang; create database if not exists gobang; use gobang; create table if not exists user( id int primary key auto_increment, username varchar(32) unique key not null, password varchar(128) not null, score int, total_count int, win_count int );

7.数据管理模块类的设计

整体思路：

代码的整体框架：

代码：

#ifndef __M_DB_H__ #define __M_DB_H__ #include "util.hpp" #include <mutex> #include <cassert> class user_table{ private: MYSQL *_mysql; //mysql操作句柄 std::mutex _mutex;//互斥锁保护数据库的访问操作 public: user_table(const std::string &host, const std::string &username, const std::string &password, const std::string &dbname, uint16_t port = 3306) { _mysql = mysql_util::mysql_create(host, username, password, dbname, port); assert(_mysql != NULL); } ~user_table() { mysql_util::mysql_destroy(_mysql); _mysql = NULL; } //注册时新增用户 bool insert(Json::Value &user) { #define INSERT_USER "insert user values(null, '%s', password('%s'), 1000, 0, 0);" // sprintf(void *buf, char *format, ...) if (user["password"].isNull() || user["username"].isNull()) { DLOG("INPUT PASSWORD OR USERNAME"); return false; } char sql[4096] = {0}; sprintf(sql, INSERT_USER, user["username"].asCString(), user["password"].asCString()); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("insert user info failed!!\n"); return false; } return true; } //登录验证，并返回详细的用户信息 bool login(Json::Value &user) { if (user["password"].isNull() || user["username"].isNull()) { DLOG("INPUT PASSWORD OR USERNAME"); return false; } //以用户名和密码共同作为查询过滤条件，查询到数据则表示用户名密码一致，没有信息则用户名密码错误 #define LOGIN_USER "select id, score, total_count, win_count from user where username='%s' and password=password('%s');" char sql[4096] = {0}; sprintf(sql, LOGIN_USER, user["username"].asCString(), user["password"].asCString()); MYSQL_RES *res = NULL; { std::unique_lock<std::mutex> lock(_mutex); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("user login failed!!\n"); return false; } //按理说要么有数据，要么没有数据，就算有数据也只能有一条数据 res = mysql_store_result(_mysql); if (res == NULL) { DLOG("have no login user info!!"); return false; } } int row_num = mysql_num_rows(res); if (row_num != 1) { DLOG("the user information queried is not unique!!"); return false; } MYSQL_ROW row = mysql_fetch_row(res); user["id"] = (Json::UInt64)std::stol(row[0]); user["score"] = (Json::UInt64)std::stol(row[1]); user["total_count"] = std::stoi(row[2]); user["win_count"] = std::stoi(row[3]); mysql_free_result(res); return true; } // 通过用户名获取用户信息 bool select_by_name(const std::string &name, Json::Value &user) { #define USER_BY_NAME "select id, score, total_count, win_count from user where username='%s';" char sql[4096] = {0}; sprintf(sql, USER_BY_NAME, name.c_str()); MYSQL_RES *res = NULL; { std::unique_lock<std::mutex> lock(_mutex); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("get user by name failed!!\n"); return false; } //按理说要么有数据，要么没有数据，就算有数据也只能有一条数据 res = mysql_store_result(_mysql); if (res == NULL) { DLOG("have no user info!!"); return false; } } int row_num = mysql_num_rows(res); if (row_num != 1) { DLOG("the user information queried is not unique!!"); return false; } MYSQL_ROW row = mysql_fetch_row(res); user["id"] = (Json::UInt64)std::stol(row[0]); user["username"] = name; user["score"] = (Json::UInt64)std::stol(row[1]); user["total_count"] = std::stoi(row[2]); user["win_count"] = std::stoi(row[3]); mysql_free_result(res); return true; } // 通过用户名获取用户信息 bool select_by_id(uint64_t id, Json::Value &user) { #define USER_BY_ID "select username, score, total_count, win_count from user where id=%ld;" char sql[4096] = {0}; sprintf(sql, USER_BY_ID, id); MYSQL_RES *res = NULL; { std::unique_lock<std::mutex> lock(_mutex); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("get user by id failed!!\n"); return false; } //按理说要么有数据，要么没有数据，就算有数据也只能有一条数据 res = mysql_store_result(_mysql); if (res == NULL) { DLOG("have no user info!!"); return false; } } int row_num = mysql_num_rows(res); if (row_num != 1) { DLOG("the user information queried is not unique!!"); return false; } MYSQL_ROW row = mysql_fetch_row(res); user["id"] = (Json::UInt64)id; user["username"] = row[0]; user["score"] = (Json::UInt64)std::stol(row[1]); user["total_count"] = std::stoi(row[2]); user["win_count"] = std::stoi(row[3]); mysql_free_result(res); return true; } //胜利时天梯分数增加30分，战斗场次增加1，胜利场次增加1 bool win(uint64_t id) { #define USER_WIN "update user set score=score+30, total_count=total_count+1, win_count=win_count+1 where id=%ld;" char sql[4096] = {0}; sprintf(sql, USER_WIN, id); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("update win user info failed!!\n"); return false; } return true; } //失败时天梯分数减少30，战斗场次增加1，其他不变 bool lose(uint64_t id) { #define USER_LOSE "update user set score=score-30, total_count=total_count+1 where id=%ld;" char sql[4096] = {0}; sprintf(sql, USER_LOSE, id); bool ret = mysql_util::mysql_exec(_mysql, sql); if (ret == false) { DLOG("update lose user info failed!!\n"); return false; } return true; } }; #endif

数据管理模块类的编译测试

验证登录功能和登录验证功能：

我们以xiaoming，但是输入不同的密码

程序会报错！

测试通过用户名获得用户信息

成功！

8.在线用户管理设计思想

在线用户管理类的设计

代码的整体框架：

具体实现：

#ifndef __M_ONLINE_H__ #define __M_ONLINE_H__ #include "util.hpp" #include <mutex> #include <unordered_map> class online_manager{ private: std::mutex _mutex; //用于建立游戏大厅用户的用户ID与通信连接的关系 std::unordered_map<uint64_t, wsserver_t::connection_ptr> _hall_user; //用于建立游戏房间用户的用户ID与通信连接的关系 std::unordered_map<uint64_t, wsserver_t::connection_ptr> _room_user; public: //websocket连接建立的时候才会加入游戏大厅&游戏房间在线用户管理 void enter_game_hall(uint64_t uid, wsserver_t::connection_ptr &conn) { std::unique_lock<std::mutex> lock(_mutex); _hall_user.insert(std::make_pair(uid, conn)); } void enter_game_room(uint64_t uid, wsserver_t::connection_ptr &conn) { std::unique_lock<std::mutex> lock(_mutex); _room_user.insert(std::make_pair(uid, conn)); } //websocket连接断开的时候，才会移除游戏大厅&游戏房间在线用户管理 void exit_game_hall(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); _hall_user.erase(uid); } void exit_game_room(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); _room_user.erase(uid); } //判断当前指定用户是否在游戏大厅/游戏房间 bool is_in_game_hall(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _hall_user.find(uid); if (it == _hall_user.end()) { return false; } return true; } bool is_in_game_room(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _room_user.find(uid); if (it == _room_user.end()) { return false; } return true; } //通过用户ID在游戏大厅/游戏房间用户管理中获取对应的通信连接 wsserver_t::connection_ptr get_conn_from_hall(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _hall_user.find(uid); if (it == _hall_user.end()) { return wsserver_t::connection_ptr(); } return it->second; } wsserver_t::connection_ptr get_conn_from_room(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _room_user.find(uid); if (it == _room_user.end()) { return wsserver_t::connection_ptr(); } return it->second; } }; #endif

在线用户管理类的编译与测试

因为现阶段没有对应的业务，所以只能简单的进行测试是否在房间中，当退出的时候看是否成功退出房间

测试代码：

测试结果如下图，成功！

9.游戏房间的设计思想：

代码整体框架：

具体代码实现：

#ifndef __M_ROOM_H__ #define __M_ROOM_H__ #include "util.hpp" #include "logger.hpp" #include "online.hpp" #include "db.hpp" #define BOARD_ROW 15 #define BOARD_COL 15 #define CHESS_WHITE 1 #define CHESS_BLACK 2 typedef enum { GAME_START, GAME_OVER }room_statu; class room { private: uint64_t _room_id; room_statu _statu; int _player_count; uint64_t _white_id; uint64_t _black_id; user_table *_tb_user; online_manager *_online_user; std::vector<std::vector<int>> _board; private: bool five(int row, int col, int row_off, int col_off, int color) { //row和col是下棋位置， row_off和col_off是偏移量，也是方向 int count = 1; int search_row = row + row_off; int search_col = col + col_off; while(search_row >= 0 && search_row < BOARD_ROW && search_col >= 0 && search_col < BOARD_COL && _board[search_row][search_col] == color) { //同色棋子数量++ count++; //检索位置继续向后偏移 search_row += row_off; search_col += col_off; } search_row = row - row_off; search_col = col - col_off; while(search_row >= 0 && search_row < BOARD_ROW && search_col >= 0 && search_col < BOARD_COL && _board[search_row][search_col] == color) { //同色棋子数量++ count++; //检索位置继续向后偏移 search_row -= row_off; search_col -= col_off; } return (count >= 5); } uint64_t check_win(int row, int col, int color) { // 从下棋位置的四个不同方向上检测是否出现了5个及以上相同颜色的棋子（横行，纵列，正斜，反斜） if (five(row, col, 0, 1, color) || five(row, col, 1, 0, color) || five(row, col, -1, 1, color)|| five(row, col, -1, -1, color)) { //任意一个方向上出现了true也就是五星连珠，则设置返回值 return color == CHESS_WHITE ? _white_id : _black_id; } return 0; } public: room(uint64_t room_id, user_table *tb_user, online_manager *online_user): _room_id(room_id), _statu(GAME_START), _player_count(0), _tb_user(tb_user), _online_user(online_user), _board(BOARD_ROW, std::vector<int>(BOARD_COL, 0)){ DLOG("%lu 房间创建成功!!", _room_id); } ~room() { DLOG("%lu 房间销毁成功!!", _room_id); } uint64_t id() { return _room_id; } room_statu statu() { return _statu; } int player_count() { return _player_count; } void add_white_user(uint64_t uid) { _white_id = uid; _player_count++; } void add_black_user(uint64_t uid) { _black_id = uid; _player_count++; } uint64_t get_white_user() { return _white_id; } uint64_t get_black_user() { return _black_id; } /*处理下棋动作*/ Json::Value handle_chess(Json::Value &req) { Json::Value json_resp = req; // 2. 判断房间中两个玩家是否都在线，任意一个不在线，就是另一方胜利。 int chess_row = req["row"].asInt(); int chess_col = req["col"].asInt(); uint64_t cur_uid = req["uid"].asUInt64(); if (_online_user->is_in_game_room(_white_id) == false) { json_resp["result"] = true; json_resp["reason"] = "运气真好！对方掉线，不战而胜！"; json_resp["winner"] = (Json::UInt64)_black_id; return json_resp; } if (_online_user->is_in_game_room(_black_id) == false) { json_resp["result"] = true; json_resp["reason"] = "运气真好！对方掉线，不战而胜！"; json_resp["winner"] = (Json::UInt64)_white_id; return json_resp; } // 3. 获取走棋位置，判断当前走棋是否合理（位置是否已经被占用） if (_board[chess_row][chess_col] != 0) { json_resp["result"] = false; json_resp["reason"] = "当前位置已经有了其他棋子！"; return json_resp; } int cur_color = cur_uid == _white_id ? CHESS_WHITE : CHESS_BLACK; _board[chess_row][chess_col] = cur_color; // 4. 判断是否有玩家胜利（从当前走棋位置开始判断是否存在五星连珠） uint64_t winner_id = check_win(chess_row, chess_col, cur_color); if (winner_id != 0) { json_resp["reason"] = "五星连珠，战无敌！"; } json_resp["result"] = true; json_resp["winner"] = (Json::UInt64)winner_id; return json_resp; } /*处理聊天动作*/ Json::Value handle_chat(Json::Value &req) { Json::Value json_resp = req; //检测消息中是否包含敏感词 std::string msg = req["message"].asString(); size_t pos = msg.find("垃圾"); if (pos != std::string::npos) { json_resp["result"] = false; json_resp["reason"] = "消息中包含敏感词，不能发送！"; return json_resp; } //广播消息---返回消息 json_resp["result"] = true; return json_resp; } /*处理玩家退出房间动作*/ void handle_exit(uint64_t uid) { //如果是下棋中退出，则对方胜利，否则下棋结束了退出，则是正常退出 Json::Value json_resp; if (_statu == GAME_START) { uint64_t winner_id = (Json::UInt64)(uid == _white_id ? _black_id : _white_id); json_resp["optype"] = "put_chess"; json_resp["result"] = true; json_resp["reason"] = "对方掉线，不战而胜！"; json_resp["room_id"] = (Json::UInt64)_room_id; json_resp["uid"] = (Json::UInt64)uid; json_resp["row"] = -1; json_resp["col"] = -1; json_resp["winner"] = (Json::UInt64)winner_id; uint64_t loser_id = winner_id == _white_id ? _black_id : _white_id; _tb_user->win(winner_id); _tb_user->lose(loser_id); _statu = GAME_OVER; broadcast(json_resp); } //房间中玩家数量-- _player_count--; return; } /*总的请求处理函数，在函数内部，区分请求类型，根据不同的请求调用不同的处理函数，得到响应进行广播*/ void handle_request(Json::Value &req) { //1. 校验房间号是否匹配 Json::Value json_resp; uint64_t room_id = req["room_id"].asUInt64(); if (room_id != _room_id) { json_resp["optype"] = req["optype"].asString(); json_resp["result"] = false; json_resp["reason"] = "房间号不匹配！"; return broadcast(json_resp); } //2. 根据不同的请求类型调用不同的处理函数 if (req["optype"].asString() == "put_chess") { json_resp = handle_chess(req); if (json_resp["winner"].asUInt64() != 0) { uint64_t winner_id = json_resp["winner"].asUInt64(); uint64_t loser_id = winner_id == _white_id ? _black_id : _white_id; _tb_user->win(winner_id); _tb_user->lose(loser_id); _statu = GAME_OVER; } }else if (req["optype"].asString() == "chat") { json_resp = handle_chat(req); }else { json_resp["optype"] = req["optype"].asString(); json_resp["result"] = false; json_resp["reason"] = "未知请求类型"; } std::string body; json_util::serialize(json_resp, body); DLOG("房间-广播动作: %s", body.c_str()); return broadcast(json_resp); } /*将指定的信息广播给房间中所有玩家*/ void broadcast(Json::Value &rsp) { //1. 对要响应的信息进行序列化，将Json::Value中的数据序列化成为json格式字符串 std::string body; json_util::serialize(rsp, body); //2. 获取房间中所有用户的通信连接 //3. 发送响应信息 wsserver_t::connection_ptr wconn = _online_user->get_conn_from_room(_white_id); if (wconn.get() != nullptr) { wconn->send(body); }else { DLOG("房间-白棋玩家连接获取失败"); } wsserver_t::connection_ptr bconn = _online_user->get_conn_from_room(_black_id); if (bconn.get() != nullptr) { bconn->send(body); }else { DLOG("房间-黑棋玩家连接获取失败"); } return; } };

游戏房间类的编译纠错

测试代码：

这里只需要代码的编译成功即可

10.房间管理的设计思想：

10.1.房间管理类的设计

具体代码：

using room_ptr = std::shared_ptr<room>; class room_manager{ private: uint64_t _next_rid; std::mutex _mutex; user_table *_tb_user; online_manager *_online_user; std::unordered_map<uint64_t, room_ptr> _rooms; std::unordered_map<uint64_t, uint64_t> _users; public: /*初始化房间ID计数器*/ room_manager(user_table *ut, online_manager *om): _next_rid(1), _tb_user(ut), _online_user(om) { DLOG("房间管理模块初始化完毕！"); } ~room_manager() { DLOG("房间管理模块即将销毁！"); } //为两个用户创建房间，并返回房间的智能指针管理对象 room_ptr create_room(uint64_t uid1, uint64_t uid2) { //两个用户在游戏大厅中进行对战匹配，匹配成功后创建房间 //1. 校验两个用户是否都还在游戏大厅中，只有都在才需要创建房间。 if (_online_user->is_in_game_hall(uid1) == false) { DLOG("用户：%lu 不在大厅中，创建房间失败!", uid1); return room_ptr(); } if (_online_user->is_in_game_hall(uid2) == false) { DLOG("用户：%lu 不在大厅中，创建房间失败!", uid2); return room_ptr(); } //2. 创建房间，将用户信息添加到房间中 std::unique_lock<std::mutex> lock(_mutex); room_ptr rp(new room(_next_rid, _tb_user, _online_user)); rp->add_white_user(uid1); rp->add_black_user(uid2); //3. 将房间信息管理起来 _rooms.insert(std::make_pair(_next_rid, rp)); _users.insert(std::make_pair(uid1, _next_rid)); _users.insert(std::make_pair(uid2, _next_rid)); _next_rid++; //4. 返回房间信息 return rp; } /*通过房间ID获取房间信息*/ room_ptr get_room_by_rid(uint64_t rid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _rooms.find(rid); if (it == _rooms.end()) { return room_ptr(); } return it->second; } /*通过用户ID获取房间信息*/ room_ptr get_room_by_uid(uint64_t uid) { std::unique_lock<std::mutex> lock(_mutex); //1. 通过用户ID获取房间ID auto uit = _users.find(uid); if (uit == _users.end()) { return room_ptr(); } uint64_t rid = uit->second; //2. 通过房间ID获取房间信息 auto rit = _rooms.find(rid); if (rit == _rooms.end()) { return room_ptr(); } return rit->second; } /*通过房间ID销毁房间*/ void remove_room(uint64_t rid) { //因为房间信息，是通过shared_ptr在_rooms中进行管理，因此只要将shared_ptr从_rooms中移除 //则shared_ptr计数器==0，外界没有对房间信息进行操作保存的情况下就会释放 //1. 通过房间ID，获取房间信息 room_ptr rp = get_room_by_rid(rid); if (rp.get() == nullptr) { return; } //2. 通过房间信息，获取房间中所有用户的ID uint64_t uid1 = rp->get_white_user(); uint64_t uid2 = rp->get_black_user(); //3. 移除房间管理中的用户信息 std::unique_lock<std::mutex> lock(_mutex); _users.erase(uid1); _users.erase(uid2); //4. 移除房间管理信息 _rooms.erase(rid); } /*删除房间中指定用户，如果房间中没有用户了，则销毁房间，用户连接断开时被调用*/ void remove_room_user(uint64_t uid) { room_ptr rp = get_room_by_uid(uid); if (rp.get() == nullptr) { return; } //处理房间中玩家退出动作 rp->handle_exit(uid); //房间中没有玩家了，则销毁房间 if (rp->player_count() == 0) { remove_room(rp->id()); } return ; } };

房间管理类的编译纠错

测试代码：

编译成功！

11.session的基础了解

websocketpp中定时器的基础使用和特殊的细节

这两个任务没有直接被执行，而是等了5秒钟之后才会被执行。

特殊的细节：tp->cancel();//定时任务的取消，会导致定时任务立即被执行

12.session类的设计：

总体思想：

框架的搭建：

具体代码的实现：

typedef enum {UNLOGIN, LOGIN} ss_statu; class session { private: uint64_t _ssid;//标识符 uint64_t _uid;//session对应的用户ID ss_statu _statu;//用户状态：未登录，已登录 wsserver_t::timer_ptr _tp;//session关联的定时器 public: session(uint64_t ssid): _ssid(ssid){ DLOG("SESSION %p 被创建！！", this); } ~session() { DLOG("SESSION %p 被释放！！", this); } uint64_t ssid() { return _ssid; } void set_statu(ss_statu statu) { _statu = statu; } void set_user(uint64_t uid) { _uid = uid; } uint64_t get_user() { return _uid; } bool is_login() { return (_statu == LOGIN); } void set_timer(const wsserver_t::timer_ptr &tp) { _tp = tp;} wsserver_t::timer_ptr& get_timer() { return _tp; } };

13.session管理类的设计

框架的搭建：

具体代码：

#define SESSION_TIMEOUT 30000 #define SESSION_FOREVER -1 using session_ptr = std::shared_ptr<session>; class session_manager { private: uint64_t _next_ssid; std::mutex _mutex; std::unordered_map<uint64_t, session_ptr> _session; wsserver_t *_server; public: session_manager(wsserver_t *srv): _next_ssid(1), _server(srv){ DLOG("session管理器初始化完毕！"); } ~session_manager() { DLOG("session管理器即将销毁！"); } session_ptr create_session(uint64_t uid, ss_statu statu) { std::unique_lock<std::mutex> lock(_mutex); session_ptr ssp(new session(_next_ssid)); ssp->set_statu(statu); ssp->set_user(uid); _session.insert(std::make_pair(_next_ssid, ssp)); _next_ssid++; return ssp; } void append_session(const session_ptr &ssp) { std::unique_lock<std::mutex> lock(_mutex); _session.insert(std::make_pair(ssp->ssid(), ssp)); } session_ptr get_session_by_ssid(uint64_t ssid) { std::unique_lock<std::mutex> lock(_mutex); auto it = _session.find(ssid); if (it == _session.end()) { return session_ptr(); } return it->second; } void remove_session(uint64_t ssid) { std::unique_lock<std::mutex> lock(_mutex); _session.erase(ssid); } void set_session_expire_time(uint64_t ssid, int ms) { //依赖于websocketpp的定时器来完成session生命周期的管理。 // 登录之后，创建session，session需要在指定时间无通信后删除 // 但是进入游戏大厅，或者游戏房间，这个session就应该永久存在 // 等到退出游戏大厅，或者游戏房间，这个session应该被重新设置为临时，在长时间无通信后被删除 session_ptr ssp = get_session_by_ssid(ssid); if (ssp.get() == nullptr) { return; } wsserver_t::timer_ptr tp = ssp->get_timer(); if (tp.get() == nullptr && ms == SESSION_FOREVER) { // 1. 在session永久存在的情况下，设置永久存在 return ; }else if (tp.get() == nullptr && ms != SESSION_FOREVER) { // 2. 在session永久存在的情况下，设置指定时间之后被删除的定时任务 wsserver_t::timer_ptr tmp_tp = _server->set_timer(ms, std::bind(&session_manager::remove_session, this, ssid)); ssp->set_timer(tmp_tp); }else if (tp.get() != nullptr && ms == SESSION_FOREVER) { // 3. 在session设置了定时删除的情况下，将session设置为永久存在 // 删除定时任务--- stready_timer删除定时任务会导致任务直接被执行 tp->cancel();//因为这个取消定时任务并不是立即取消的 //因此重新给session管理器中，添加一个session信息, 且添加的时候需要使用定时器，而不是立即添加 ssp->set_timer(wsserver_t::timer_ptr());//将session关联的定时器设置为空 _server->set_timer(0, std::bind(&session_manager::append_session, this, ssp)); }else if (tp.get() != nullptr && ms != SESSION_FOREVER) { // 4. 在session设置了定时删除的情况下，将session重置删除时间。 tp->cancel();//因为这个取消定时任务并不是立即取消的 ssp->set_timer(wsserver_t::timer_ptr()); _server->set_timer(0, std::bind(&session_manager::append_session, this, ssp)); //重新给session添加定时销毁任务 wsserver_t::timer_ptr tmp_tp = _server->set_timer(ms, std::bind(&session_manager::remove_session, this, ssp->ssid())); //重新设置session关联的定时器 ssp->set_timer(tmp_tp); } } };

直接编译成功即可！

14.游戏对战匹配设计思想

游戏对战匹配队列设计

代码整体框架：

具体代码的实现：

template <class T> class match_queue { private: /*用链表而不直接使用queue是因为我们有中间删除数据的需要*/ std::list<T> _list; /*实现线程安全*/ std::mutex _mutex; /*这个条件变量主要为了阻塞消费者，后边使用的时候：队列中元素个数<2则阻塞*/ std::condition_variable _cond; public: /*获取元素个数*/ int size() { std::unique_lock<std::mutex> lock(_mutex); return _list.size(); } /*判断是否为空*/ bool empty() { std::unique_lock<std::mutex> lock(_mutex); return _list.empty(); } /*阻塞线程*/ void wait() { std::unique_lock<std::mutex> lock(_mutex); _cond.wait(lock); } /*入队数据，并唤醒线程*/ void push(const T &data) { std::unique_lock<std::mutex> lock(_mutex); _list.push_back(data); _cond.notify_all(); } /*出队数据*/ bool pop(T &data) { std::unique_lock<std::mutex> lock(_mutex); if (_list.empty() == true) { return false; } data = _list.front(); _list.pop_front(); return true; } /*移除指定的数据*/ void remove(T &data) { std::unique_lock<std::mutex> lock(_mutex); _list.remove(data); } };

测试编译：

语法没有问题！

15.游戏对战匹配管理设计

代码框架：

具体代码实现：

class matcher { private: /*普通选手匹配队列*/ match_queue<uint64_t> _q_normal; /*高手匹配队列*/ match_queue<uint64_t> _q_high; /*大神匹配队列*/ match_queue<uint64_t> _q_super; /*对应三个匹配队列的处理线程*/ std::thread _th_normal; std::thread _th_high; std::thread _th_super; room_manager *_rm; user_table *_ut; online_manager *_om; private: void handle_match(match_queue<uint64_t> &mq) { while(1) { //1. 判断队列人数是否大于2，<2则阻塞等待 while (mq.size() < 2) { mq.wait(); } //2. 走下来代表人数够了，出队两个玩家 uint64_t uid1, uid2; bool ret = mq.pop(uid1); if (ret == false) { continue; } ret = mq.pop(uid2); if (ret == false) { this->add(uid1); continue; } //3. 校验两个玩家是否在线，如果有人掉线，则要吧另一个人重新添加入队列 wsserver_t::connection_ptr conn1 = _om->get_conn_from_hall(uid1); if (conn1.get() == nullptr) { this->add(uid2); continue; } wsserver_t::connection_ptr conn2 = _om->get_conn_from_hall(uid2); if (conn2.get() == nullptr) { this->add(uid1); continue; } //4. 为两个玩家创建房间，并将玩家加入房间中 room_ptr rp = _rm->create_room(uid1, uid2); if (rp.get() == nullptr) { this->add(uid1); this->add(uid2); continue; } //5. 对两个玩家进行响应 Json::Value resp; resp["optype"] = "match_success"; resp["result"] = true; std::string body; json_util::serialize(resp, body); conn1->send(body); conn2->send(body); } } void th_normal_entry() { return handle_match(_q_normal); } void th_high_entry() { return handle_match(_q_high); } void th_super_entry() { return handle_match(_q_super); } public: matcher(room_manager *rm, user_table *ut, online_manager *om): _rm(rm), _ut(ut), _om(om), _th_normal(std::thread(&matcher::th_normal_entry, this)), _th_high(std::thread(&matcher::th_high_entry, this)), _th_super(std::thread(&matcher::th_super_entry, this)){ DLOG("游戏匹配模块初始化完毕...."); } bool add(uint64_t uid) { //根据玩家的天梯分数，来判定玩家档次，添加到不同的匹配队列 // 1. 根据用户ID，获取玩家信息 Json::Value user; bool ret = _ut->select_by_id(uid, user); if (ret == false) { DLOG("获取玩家:%d 信息失败！！", uid); return false; } int score = user["score"].asInt(); // 2. 添加到指定的队列中 if (score < 2000) { _q_normal.push(uid); }else if (score >= 2000 && score < 3000) { _q_high.push(uid); }else { _q_super.push(uid); } return true; } bool del(uint64_t uid) { Json::Value user; bool ret = _ut->select_by_id(uid, user); if (ret == false) { DLOG("获取玩家:%d 信息失败！！", uid); return false; } int score = user["score"].asInt(); // 2. 添加到指定的队列中 if (score < 2000) { _q_normal.remove(uid); }else if (score >= 2000 && score < 3000) { _q_high.remove(uid); }else { _q_super.remove(uid); } return true; } };

语法没有基本问题

16.服务器业务请求流程

17.服务器网络通信接口设计

数据格式：

静态资源请求后面的内容就是动态资源请求

18.服务器类设计

整体框架：

服务器类网络通信代码编写

 void http_callback(websocketpp::connection_hdl hdl) { wsserver_t::connection_ptr conn = _wssrv.get_con_from_hdl(hdl); websocketpp::http::parser::request req = conn->get_request(); std::string method = req.get_method(); std::string uri = req.get_uri(); std::string pathname = _web_root + uri; std::string body; file_util::read(pathname,body);//read函数在util头文件里面实现过了 conn->set_status(websocketpp::http::status_code::ok); conn->set_body(body); } public: /*进行成员初始化，以及服务器回调函数的设置*/ gobang_server(const std::string &host, const std::string &user, const std::string &pass, const std::string &dbname, uint16_t port = 3306, const std::string &wwwroot = WWWROOT): _web_root(wwwroot), _ut(host, user, pass, dbname, port), _rm(&_ut, &_om), _sm(&_wssrv), _mm(&_rm, &_ut, &_om) { _wssrv.set_access_channels(websocketpp::log::alevel::none); _wssrv.init_asio(); _wssrv.set_reuse_addr(true); //类的成员函数在绑定的时候 必须要取地址并且使用类名 _wssrv.set_http_handler(std::bind(&gobang_server::http_callback, this, std::placeholders::_1)); _wssrv.set_open_handler(std::bind(&gobang_server::wsopen_callback, this, std::placeholders::_1)); _wssrv.set_close_handler(std::bind(&gobang_server::wsclose_callback, this, std::placeholders::_1)); _wssrv.set_message_handler(std::bind(&gobang_server::wsmsg_callback, this, std::placeholders::_1, std::placeholders::_2)); } /*启动服务器*/ void start(int port) { _wssrv.listen(port); _wssrv.start_accept(); _wssrv.run(); } };

服务器类网络通信编译测试

成功！

19.服务器业务请求处理分类

20.服务器业务静态资源请求处理

 void file_handler(wsserver_t::connection_ptr &conn) { //静态资源请求的处理 //1.获取到请求uri-资源路径，了解客户端请求的页面文件名称 websocketpp::http::parser::request req = conn->get_request();//获取请求信息 std::string uri = req.get_uri();//获取uri //2.组合出文件的实际路径 相对根目录 + uri std::string realpath = _web_root + uri; //3.如果请求的是一个目录，增加一个后缀 login.html // 如何判断是否是目录呢？看最后一个字符如果是/，就代表是目录 if(realpath.back() == '/') { realpath += "login.html"; } //4.读取文件内容 Json::Value resp_json; std::string body; bool ret = file_util::read(realpath, body); // 4.1.文件如果不存在，读取文件内容失败，返回404 if(ret == false) { body += "<html>"; body += "<head>"; body += "<meta charset='UTF-8'/>"; body += "</head>"; body += "<body>"; body += "<h1> Not Found </h1>"; body += "</body>"; //需要自己去设置相应状态码 conn->set_status(websocketpp::http::status_code::not_found); conn->set_body(body); return; } //5.设置相应正文 conn->set_body(body); conn->set_status(websocketpp::http::status_code::ok); }

服务器业务静态资源请求测试

成功！

21.服务器业务用户注册后台处理

后端框架

具体代码：

void http_resp(wsserver_t::connection_ptr &conn, bool result, websocketpp::http::status_code::value code, const std::string &reason) { Json::Value resp_json; resp_json["result"] = result; resp_json["reason"] = reason; std::string resp_body; json_util::serialize(resp_json, resp_body); conn->set_status(code); conn->set_body(resp_body); conn->append_header("Content-Type", "application/json"); return; } void reg(wsserver_t::connection_ptr &conn) { //用户注册功能请求的处理 websocketpp::http::parser::request req = conn->get_request(); //1. 获取到请求正文 std::string req_body = conn->get_request_body(); //2. 对正文进行json反序列化，得到用户名和密码 Json::Value login_info; bool ret = json_util::unserialize(req_body, login_info); if (ret == false) { DLOG("反序列化注册信息失败"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "请求的正文格式错误"); } //3. 进行数据库的用户新增操作 if (login_info["username"].isNull() || login_info["password"].isNull()) { DLOG("用户名密码不完整"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "请输入用户名/密码"); } ret = _ut.insert(login_info); if (ret == false) { DLOG("向数据库插入数据失败"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "用户名已经被占用!"); } // 如果成功了，则返回200 return http_resp(conn, true, websocketpp::http::status_code::ok, "注册用户成功"); }

22.服务器业务用户注册前端处理

具体逻辑：

具体代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div> 网络五子棋对战游戏 </div> <div> <!-- 登录界面的对话框 --> <div> <!-- 提示信息 --> <h3>注册</h3> <!-- 这个表示一行 --> <div> <span>用户名</span> <input type="text" name="username"> </div> <!-- 这是另一行 --> <div> <span>密码</span> <input type="password" name="password"> </div> <!-- 提交按钮 --> <div> <button onclick="reg()">提交</button> </div> </div> </div> <script src="js/jquery.min.js"></script> <script> //1. 给按钮添加点击事件，调用注册函数 //2. 封装实现注册函数 function reg() { // 1. 获取两个输入框空间中的数据，组织成为一个json串 var reg_info = { username: document.getElementById("user_name").value, password: document.getElementById("password").value }; console.log(JSON.stringify(reg_info)); // 2. 通过ajax向后台发送用户注册请求 $.ajax({ url : "/reg", type : "post", data : JSON.stringify(reg_info), success : function(res) { if (res.result == false) { // 4. 如果请求失败，则清空两个输入框内容，并提示错误原因 document.getElementById("user_name").value = ""; document.getElementById("password").value = ""; alert(res.reason); }else { // 3. 如果请求成功，则跳转的登录页面 alert(res.reason); window.location.assign("/login.html"); } }, error : function(xhr) { document.getElementById("user_name").value = ""; document.getElementById("password").value = ""; alert(JSON.stringify(xhr)); } }) } </script> </body> </html>

23.服务器业务用户注册联调测试

有bug

问题：

注册的时候，往数据库中插入数据失败了

注册的问题是，你的mysql版本是8.0，password这个函数在mysql8.0已经被移除了，简单说就没有这个函数了，所以插入失败了，这里我直接换成了md5这个相对简单的哈希算法

24.服务器业务用户登录后台处理

代码整体框架：

具体代码：

void login(wsserver_t::connection_ptr &conn) { //用户登录功能请求的处理 //1. 获取请求正文，并进行json反序列化，得到用户名和密码 std::string req_body = conn->get_request_body(); Json::Value login_info; bool ret = json_util::unserialize(req_body, login_info); if (ret == false) { DLOG("反序列化登录信息失败"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "请求的正文格式错误"); } //2. 校验正文完整性，进行数据库的用户信息验证 if (login_info["username"].isNull() || login_info["password"].isNull()) { DLOG("用户名密码不完整"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "请输入用户名/密码"); } ret = _ut.login(login_info); if (ret == false) { // 1. 如果验证失败，则返回400 DLOG("用户名密码错误"); return http_resp(conn, false, websocketpp::http::status_code::bad_request, "用户名密码错误"); } //3. 如果验证成功，给客户端创建session uint64_t uid = login_info["id"].asUInt64(); session_ptr ssp = _sm.create_session(uid, LOGIN); if (ssp.get() == nullptr) { DLOG("创建会话失败"); return http_resp(conn, false, websocketpp::http::status_code::internal_server_error , "创建会话失败"); } _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); //4. 设置响应头部：Set-Cookie,将sessionid通过cookie返回 std::string cookie_ssid = "SSID=" + std::to_string(ssp->ssid()); conn->append_header("Set-Cookie", cookie_ssid); return http_resp(conn, true, websocketpp::http::status_code::ok , "登录成功"); }

25.服务器业务用户登录前端处理：

整体框架：

具体代码的实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div> 网络五子棋对战游戏 </div> <div> <!-- 登录界面的对话框 --> <div> <!-- 提示信息 --> <h3>登录</h3> <!-- 这个表示一行 --> <div> <span>用户名</span> <input type="text"> </div> <!-- 这是另一行 --> <div> <span>密码</span> <input type="password"> </div> <!-- 提交按钮 --> <div> <button onclick="login()">提交</button> </div> </div> </div> <script src="./js/jquery.min.js"></script> <script> //1. 给按钮添加点击事件，调用登录请求函数 //2. 封装登录请求函数 function login() { // 1. 获取输入框中的用户名和密码，并组织json对象 var login_info = { username: document.getElementById("user_name").value, password: document.getElementById("password").value }; // 2. 通过ajax向后台发送登录验证请求 $.ajax({ url: "/login", type: "post", data: JSON.stringify(login_info), success: function(result) { // 3. 如果验证通过，则跳转游戏大厅页面 alert("登录成功"); window.location.assign("/game_hall.html"); }, error: function(xhr) { // 4. 如果验证失败，则提示错误信息，并清空输入框 alert(JSON.stringify(xhr)); document.getElementById("user_name").value = ""; document.getElementById("password").value = ""; } }) } </script> </body> </html>

26.服务器业务用户信息获取后台处理

代码整体框架：

具体代码：

bool get_cookie_val(const std::string &cookie_str, const std::string &key, std::string &val) { // Cookie: SSID=XXX; path=/; //1. 以 ; 作为间隔，对字符串进行分割，得到各个单个的cookie信息 std::string sep = "; "; std::vector<std::string> cookie_arr; string_util::split(cookie_str, sep, cookie_arr); for (auto str : cookie_arr) { //2. 对单个cookie字符串，以 = 为间隔进行分割，得到key和val std::vector<std::string> tmp_arr; string_util::split(str, "=", tmp_arr); if (tmp_arr.size() != 2) { continue; } if (tmp_arr[0] == key) { val = tmp_arr[1]; return true; } } return false; } void info(wsserver_t::connection_ptr &conn) { //用户信息获取功能请求的处理 Json::Value err_resp; // 1. 获取请求信息中的Cookie，从Cookie中获取ssid std::string cookie_str = conn->get_request_header("Cookie"); if (cookie_str.empty()) { //如果没有cookie，返回错误：没有cookie信息，让客户端重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到cookie信息，请重新登录"); } // 1.5. 从cookie中取出ssid std::string ssid_str; bool ret = get_cookie_val(cookie_str, "SSID", ssid_str); if (ret == false) { //cookie中没有ssid，返回错误：没有ssid信息，让客户端重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到ssid信息，请重新登录"); } // 2. 在session管理中查找对应的会话信息 session_ptr ssp = _sm.get_session_by_ssid(std::stol(ssid_str)); if (ssp.get() == nullptr) { //没有找到session，则认为登录已经过期，需要重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "登录过期，请重新登录"); } // 3. 从数据库中取出用户信息，进行序列化发送给客户端 uint64_t uid = ssp->get_user(); Json::Value user_info; ret = _ut.select_by_id(uid, user_info); if (ret == false) { //获取用户信息失败，返回错误：找不到用户信息 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到用户信息，请重新登录"); } std::string body; json_util::serialize(user_info, body); conn->set_body(body); conn->append_header("Content-Type", "application/json"); conn->set_status(websocketpp::http::status_code::ok); // 4. 刷新session的过期时间 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); }

27.服务器业务用户信息获取前端处理

实现逻辑：

原码：
login.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div> 网络五子棋对战游戏 </div> <div> <!-- 登录界面的对话框 --> <div> <!-- 提示信息 --> <h3>登录</h3> <!-- 这个表示一行 --> <div> <span>用户名</span> <input type="text"> </div> <!-- 这是另一行 --> <div> <span>密码</span> <input type="password"> </div> <!-- 提交按钮 --> <div> <button onclick="login()">提交</button> </div> </div> </div> <script src="./js/jquery.min.js"></script> <script> //1. 给按钮添加点击事件，调用登录请求函数 //2. 封装登录请求函数 function login() { // 1. 获取输入框中的用户名和密码，并组织json对象 var login_info = { username: document.getElementById("user_name").value, password: document.getElementById("password").value }; // 2. 通过ajax向后台发送登录验证请求 $.ajax({ url: "/login", type: "post", data: JSON.stringify(login_info), success: function(result) { // 3. 如果验证通过，则跳转游戏大厅页面 alert("登录成功"); window.location.assign("/game_hall.html"); }, error: function(xhr) { // 4. 如果验证失败，则提示错误信息，并清空输入框 alert(JSON.stringify(xhr)); document.getElementById("user_name").value = ""; document.getElementById("password").value = ""; } }) } </script> </body> </html>

28.服务器业务用户登录联调测试

session的自动创建和自动销毁

从登录页面跳转到游戏页面的成功！

服务器业务用户信息获取后台处理

从上一个图可以看到，中间框框是黑色的，并没有显示出来用户的信息

29.用户信息获取功能请求的处理

代码整体逻辑

原码：

bool get_cookie_val(const std::string &cookie_str, const std::string &key, std::string &val) { // Cookie: SSID=XXX; path=/; //1. 以 ; 作为间隔，对字符串进行分割，得到各个单个的cookie信息 std::string sep = "; "; std::vector<std::string> cookie_arr; string_util::split(cookie_str, sep, cookie_arr); for (auto str : cookie_arr) { //2. 对单个cookie字符串，以 = 为间隔进行分割，得到key和val std::vector<std::string> tmp_arr; string_util::split(str, "=", tmp_arr); if (tmp_arr.size() != 2) { continue; } if (tmp_arr[0] == key) { val = tmp_arr[1]; return true; } } return false; } void info(wsserver_t::connection_ptr &conn) { //用户信息获取功能请求的处理 Json::Value err_resp; // 1. 获取请求信息中的Cookie，从Cookie中获取ssid std::string cookie_str = conn->get_request_header("Cookie"); if (cookie_str.empty()) { //如果没有cookie，返回错误：没有cookie信息，让客户端重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到cookie信息，请重新登录"); } // 1.5. 从cookie中取出ssid std::string ssid_str; bool ret = get_cookie_val(cookie_str, "SSID", ssid_str); if (ret == false) { //cookie中没有ssid，返回错误：没有ssid信息，让客户端重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到ssid信息，请重新登录"); } // 2. 在session管理中查找对应的会话信息 session_ptr ssp = _sm.get_session_by_ssid(std::stol(ssid_str)); if (ssp.get() == nullptr) { //没有找到session，则认为登录已经过期，需要重新登录 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "登录过期，请重新登录"); } // 3. 从数据库中取出用户信息，进行序列化发送给客户端 uint64_t uid = ssp->get_user(); Json::Value user_info; ret = _ut.select_by_id(uid, user_info); if (ret == false) { //获取用户信息失败，返回错误：找不到用户信息 return http_resp(conn, true, websocketpp::http::status_code::bad_request, "找不到用户信息，请重新登录"); } std::string body; json_util::serialize(user_info, body); conn->set_body(body); conn->append_header("Content-Type", "application/json"); conn->set_status(websocketpp::http::status_code::ok); // 4. 刷新session的过期时间 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); }

30.服务器业务用户信息获取前端处理

game_hall.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>游戏大厅</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/game_hall.css"> </head> <body> <div>网络五子棋对战游戏</div> <!-- 整个页面的容器元素 --> <div> <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 --> <div> <!-- 展示用户信息 --> <div></div> <!-- 匹配按钮 --> <div>开始匹配</div> </div> </div> <script src="./js/jquery.min.js"></script> <script> var ws_url = "ws://" + location.host + "/hall"; var ws_hdl = null; window.onbeforeunload = function() { ws_hdl.close(); } //按钮有两个状态：没有进行匹配的状态，正在匹配中的状态 var button_flag = "stop"; //点击按钮的事件处理： var be = document.getElementById("match-button"); be.onclick = function() { if (button_flag == "stop") { //1. 没有进行匹配的状态下点击按钮，发送对战匹配请求 var req_json = { optype: "match_start" } ws_hdl.send(JSON.stringify(req_json)); }else { //2. 正在匹配中的状态下点击按钮，发送停止对战匹配请求 var req_json = { optype: "match_stop" } ws_hdl.send(JSON.stringify(req_json)); } } function get_user_info() { $.ajax({ url: "/info", type: "get", success: function(res) { var info_html = "<p>" + "用户：" + res.username + " 积分：" + res.score + "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>"; var screen_div = document.getElementById("screen"); screen_div.innerHTML = info_html; ws_hdl = new WebSocket(ws_url); ws_hdl.onopen = ws_onopen; ws_hdl.onclose = ws_onclose; ws_hdl.onerror = ws_onerror; ws_hdl.onmessage = ws_onmessage; }, error: function(xhr) { alert(JSON.stringify(xhr)); location.replace("/login.html"); } }) } function ws_onopen() { console.log("websocket onopen"); } function ws_onclose() { console.log("websocket onopen"); } function ws_onerror() { console.log("websocket onopen"); } function ws_onmessage(evt) { var rsp_json = JSON.parse(evt.data); if (rsp_json.result == false) { alert(evt.data); location.replace("/login.html"); return; } if (rsp_json["optype"] == "hall_ready") { alert("游戏大厅连接建立成功！"); }else if (rsp_json["optype"] == "match_success") { //对战匹配成功 alert("对战匹配成功，进入游戏房间！"); location.replace("/game_room.html"); }else if (rsp_json["optype"] == "match_start") { console.log("玩家已经加入匹配队列"); button_flag = "start"; be.innerHTML = "匹配中....点击按钮停止匹配!"; return; }else if (rsp_json["optype"] == "match_stop"){ console.log("玩家已经移除匹配队列"); button_flag = "stop"; be.innerHTML = "开始匹配"; return; }else { alert(evt.data); location.replace("/login.html");//页面的转换 return; } } get_user_info(); </script> </body> </html>

31.服务器业务用户信息获取前后端联调

成功显示用户信息！

32.服务器业务长连接分类

分为两种长连接：（根据uri资源判定来区分）

游戏大厅的长连接
游戏房间的长连接

33.服务器业务游戏大厅长连接建立成功处理

大厅长连接建立成功后的思路：

代码：

void wsopen_game_hall(wsserver_t::connection_ptr conn) { //游戏大厅长连接建立成功 Json::Value resp_json; //1. 登录验证--判断当前客户端是否已经成功登录 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //2. 判断当前客户端是否是重复登录 if (_om.is_in_game_hall(ssp->get_user()) || _om.is_in_game_room(ssp->get_user())) { resp_json["optype"] = "hall_ready"; resp_json["reason"] = "玩家重复登录！"; resp_json["result"] = false; return ws_resp(conn, resp_json); } //3. 将当前客户端以及连接加入到游戏大厅 _om.enter_game_hall(ssp->get_user(), conn); //4. 给客户端响应游戏大厅连接建立成功 resp_json["optype"] = "hall_ready"; resp_json["result"] = true; ws_resp(conn, resp_json); //5. 记得将session设置为永久存在 _sm.set_session_expire_time(ssp->ssid(), SESSION_FOREVER); } void wsopen_game_room(wsserver_t::connection_ptr conn) { Json::Value resp_json; //1. 获取当前客户端的session session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //2. 当前用户是否已经在在线用户管理的游戏房间或者游戏大厅中---在线用户管理 if (_om.is_in_game_hall(ssp->get_user()) || _om.is_in_game_room(ssp->get_user())) { resp_json["optype"] = "room_ready"; resp_json["reason"] = "玩家重复登录！"; resp_json["result"] = false; return ws_resp(conn, resp_json); } //3. 判断当前用户是否已经创建好了房间 --- 房间管理 room_ptr rp = _rm.get_room_by_uid(ssp->get_user()); if (rp.get() == nullptr) { resp_json["optype"] = "room_ready"; resp_json["reason"] = "没有找到玩家的房间信息"; resp_json["result"] = false; return ws_resp(conn, resp_json); } //4. 将当前用户添加到在线用户管理的游戏房间中 _om.enter_game_room(ssp->get_user(), conn); //5. 将session重新设置为永久存在 _sm.set_session_expire_time(ssp->ssid(), SESSION_FOREVER); //6. 回复房间准备完毕 resp_json["optype"] = "room_ready"; resp_json["result"] = true; resp_json["room_id"] = (Json::UInt64)rp->id(); resp_json["uid"] = (Json::UInt64)ssp->get_user(); resp_json["white_id"] = (Json::UInt64)rp->get_white_user(); resp_json["black_id"] = (Json::UInt64)rp->get_black_user(); return ws_resp(conn, resp_json); } void wsopen_callback(websocketpp::connection_hdl hdl) { //websocket长连接建立成功之后的处理函数 wsserver_t::connection_ptr conn = _wssrv.get_con_from_hdl(hdl); websocketpp::http::parser::request req = conn->get_request(); std::string uri = req.get_uri(); if (uri == "/hall") { //建立了游戏大厅的长连接 return wsopen_game_hall(conn); }else if (uri == "/room") { //建立了游戏房间的长连接 return wsopen_game_room(conn); } }

服务器业务游戏大厅和游戏房间的长连接关闭处理

代码：

 void wsclose_game_hall(wsserver_t::connection_ptr conn) { //游戏大厅长连接断开的处理 //1. 登录验证--判断当前客户端是否已经成功登录 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //1. 将玩家从游戏大厅中移除 _om.exit_game_hall(ssp->get_user()); //2. 将session恢复生命周期的管理，设置定时销毁 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); } void wsclose_game_room(wsserver_t::connection_ptr conn) { //获取会话信息，识别客户端 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //1. 将玩家从在线用户管理中移除 _om.exit_game_room(ssp->get_user()); //2. 将session回复生命周期的管理，设置定时销毁 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); //3. 将玩家从游戏房间中移除，房间中所有用户退出了就会销毁房间 _rm.remove_room_user(ssp->get_user()); } void wsclose_callback(websocketpp::connection_hdl hdl) { //websocket连接断开前的处理 wsserver_t::connection_ptr conn = _wssrv.get_con_from_hdl(hdl); websocketpp::http::parser::request req = conn->get_request(); std::string uri = req.get_uri(); if (uri == "/hall") { //建立了游戏大厅的长连接 return wsclose_game_hall(conn); }else if (uri == "/room") { //建立了游戏房间的长连接 return wsclose_game_room(conn); } }

服务器业务游戏大厅消息请求处理

代码：

 void wsmsg_game_hall(wsserver_t::connection_ptr conn, wsserver_t::message_ptr msg) { Json::Value resp_json; std::string resp_body; //1. 身份验证，当前客户端到底是哪个玩家 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //2. 获取请求信息 std::string req_body = msg->get_payload(); Json::Value req_json; bool ret = json_util::unserialize(req_body, req_json); if (ret == false) { resp_json["result"] = false; resp_json["reason"] = "请求信息解析失败"; return ws_resp(conn, resp_json); } //3. 对于请求进行处理： if (!req_json["optype"].isNull() && req_json["optype"].asString() == "match_start"){ // 开始对战匹配：通过匹配模块，将用户添加到匹配队列中 _mm.add(ssp->get_user()); resp_json["optype"] = "match_start"; resp_json["result"] = true; return ws_resp(conn, resp_json); }else if (!req_json["optype"].isNull() && req_json["optype"].asString() == "match_stop") { // 停止对战匹配：通过匹配模块，将用户从匹配队列中移除 _mm.del(ssp->get_user()); resp_json["optype"] = "match_stop"; resp_json["result"] = true; return ws_resp(conn, resp_json); } resp_json["optype"] = "unknow"; resp_json["reason"] = "请求类型未知"; resp_json["result"] = false; return ws_resp(conn, resp_json); } void wsmsg_game_room(wsserver_t::connection_ptr conn, wsserver_t::message_ptr msg) { Json::Value resp_json; //1. 获取客户端session，识别客户端身份 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { DLOG("房间-没有找到会话信息"); return; } //2. 获取客户端房间信息 room_ptr rp = _rm.get_room_by_uid(ssp->get_user()); if (rp.get() == nullptr) { resp_json["optype"] = "unknow"; resp_json["reason"] = "没有找到玩家的房间信息"; resp_json["result"] = false; DLOG("房间-没有找到玩家房间信息"); return ws_resp(conn, resp_json); } //3. 对消息进行反序列化 Json::Value req_json; std::string req_body = msg->get_payload(); bool ret = json_util::unserialize(req_body, req_json); if (ret == false) { resp_json["optype"] = "unknow"; resp_json["reason"] = "请求解析失败"; resp_json["result"] = false; DLOG("房间-反序列化请求失败"); return ws_resp(conn, resp_json); } DLOG("房间：收到房间请求，开始处理...."); //4. 通过房间模块进行消息请求的处理 return rp->handle_request(req_json); } void wsmsg_callback(websocketpp::connection_hdl hdl, wsserver_t::message_ptr msg) { //websocket长连接通信处理 wsserver_t::connection_ptr conn = _wssrv.get_con_from_hdl(hdl); websocketpp::http::parser::request req = conn->get_request(); std::string uri = req.get_uri(); if (uri == "/hall") { //建立了游戏大厅的长连接 return wsmsg_game_hall(conn, msg); }else if (uri == "/room") { //建立了游戏房间的长连接 return wsmsg_game_room(conn, msg); } }

34.服务器业务游戏大厅前端事件处理

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>游戏大厅</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/game_hall.css"> </head> <body> <div>网络五子棋对战游戏</div> <!-- 整个页面的容器元素 --> <div> <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 --> <div> <!-- 展示用户信息 --> <div></div> <!-- 匹配按钮 --> <div>开始匹配</div> </div> </div> <script src="./js/jquery.min.js"></script> <script> var ws_url = "ws://" + location.host + "/hall"; var ws_hdl = null; window.onbeforeunload = function() { ws_hdl.close(); } //按钮有两个状态：没有进行匹配的状态，正在匹配中的状态 var button_flag = "stop"; //点击按钮的事件处理： var be = document.getElementById("match-button"); be.onclick = function() { if (button_flag == "stop") { //1. 没有进行匹配的状态下点击按钮，发送对战匹配请求 var req_json = { optype: "match_start" } ws_hdl.send(JSON.stringify(req_json)); }else { //2. 正在匹配中的状态下点击按钮，发送停止对战匹配请求 var req_json = { optype: "match_stop" } ws_hdl.send(JSON.stringify(req_json)); } } function get_user_info() { $.ajax({ url: "/info", type: "get", success: function(res) { var info_html = "<p>" + "用户：" + res.username + " 积分：" + res.score + "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>"; var screen_div = document.getElementById("screen"); screen_div.innerHTML = info_html; ws_hdl = new WebSocket(ws_url); ws_hdl.onopen = ws_onopen; ws_hdl.onclose = ws_onclose; ws_hdl.onerror = ws_onerror; ws_hdl.onmessage = ws_onmessage; }, error: function(xhr) { alert(JSON.stringify(xhr)); location.replace("/login.html"); } }) } function ws_onopen() { console.log("websocket onopen"); } function ws_onclose() { console.log("websocket onopen"); } function ws_onerror() { console.log("websocket onopen"); } function ws_onmessage(evt) { var rsp_json = JSON.parse(evt.data); if (rsp_json.result == false) { alert(evt.data); location.replace("/login.html"); return; } if (rsp_json["optype"] == "hall_ready") { alert("游戏大厅连接建立成功！"); }else if (rsp_json["optype"] == "match_success") { //对战匹配成功 alert("对战匹配成功，进入游戏房间！"); location.replace("/game_room.html"); }else if (rsp_json["optype"] == "match_start") { console.log("玩家已经加入匹配队列"); button_flag = "start"; be.innerHTML = "匹配中....点击按钮停止匹配!"; return; }else if (rsp_json["optype"] == "match_stop"){ console.log("玩家已经移除匹配队列"); button_flag = "stop"; be.innerHTML = "开始匹配"; return; }else { alert(evt.data); location.replace("/login.html");//页面的转换 return; } } get_user_info(); </script> </body> </html>

35.服务器业务游戏大厅所有功能联调测试

注意不能使用同一个浏览器进行测试，因为同一个浏览器的cookie和session会互相影响

成功相应！

服务器业务游戏房间长连接关闭处理

代码：

 void wsclose_game_hall(wsserver_t::connection_ptr conn) { //游戏大厅长连接断开的处理 //1. 登录验证--判断当前客户端是否已经成功登录 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //1. 将玩家从游戏大厅中移除 _om.exit_game_hall(ssp->get_user()); //2. 将session恢复生命周期的管理，设置定时销毁 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); } void wsclose_game_room(wsserver_t::connection_ptr conn) { //获取会话信息，识别客户端 session_ptr ssp = get_session_by_cookie(conn); if (ssp.get() == nullptr) { return; } //1. 将玩家从在线用户管理中移除 _om.exit_game_room(ssp->get_user()); //2. 将session回复生命周期的管理，设置定时销毁 _sm.set_session_expire_time(ssp->ssid(), SESSION_TIMEOUT); //3. 将玩家从游戏房间中移除，房间中所有用户退出了就会销毁房间 _rm.remove_room_user(ssp->get_user()); } void wsclose_callback(websocketpp::connection_hdl hdl) { //websocket连接断开前的处理 wsserver_t::connection_ptr conn = _wssrv.get_con_from_hdl(hdl); websocketpp::http::parser::request req = conn->get_request(); std::string uri = req.get_uri(); if (uri == "/hall") { //建立了游戏大厅的长连接 return wsclose_game_hall(conn); }else if (uri == "/room") { //建立了游戏房间的长连接 return wsclose_game_room(conn); } }

36.服务器业务游戏房间前端长连接建立

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>游戏房间</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/game_room.css"> </head> <body> <div>网络五子棋对战游戏</div> <div> <div> <!-- 棋盘区域, 需要基于 canvas 进行实现 --> <canvas></canvas> <!-- 显示区域 --> <div> 等待玩家连接中... </div> </div> <div> <div> <p>你好！</p></br> <p>你好！</p></br> <p>leihoua~</p></br> </div> <div> <input type="text"> <button>发送</button> </div> </div> </div> <script> let chessBoard = []; let BOARD_ROW_AND_COL = 15; let chess = document.getElementById('chess'); let context = chess.getContext('2d');//获取chess控件的2d画布 var ws_url = "ws://" + location.host + "/room"; var ws_hdl = new WebSocket(ws_url); var room_info = null;//用于保存房间信息 var is_me; function initGame() { initBoard(); context.strokeStyle = "#BFBFBF"; // 背景图片 let logo = new Image(); logo.src = "image/sky.jpeg"; logo.onload = function () { // 绘制图片 context.drawImage(logo, 0, 0, 450, 450); // 绘制棋盘 drawChessBoard(); } } function initBoard() { for (let i = 0; i < BOARD_ROW_AND_COL; i++) { chessBoard[i] = []; for (let j = 0; j < BOARD_ROW_AND_COL; j++) { chessBoard[i][j] = 0; } } } // 绘制棋盘网格线 function drawChessBoard() { for (let i = 0; i < BOARD_ROW_AND_COL; i++) { context.moveTo(15 + i * 30, 15); context.lineTo(15 + i * 30, 430); //横向的线条 context.stroke(); context.moveTo(15, 15 + i * 30); context.lineTo(435, 15 + i * 30); //纵向的线条 context.stroke(); } } //绘制棋子 function oneStep(i, j, isWhite) { if (i < 0 || j < 0) return; context.beginPath(); context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); context.closePath(); var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); // 区分黑白子 if (!isWhite) { gradient.addColorStop(0, "#0A0A0A"); gradient.addColorStop(1, "#636766"); } else { gradient.addColorStop(0, "#D1D1D1"); gradient.addColorStop(1, "#F9F9F9"); } context.fillStyle = gradient; context.fill(); } //棋盘区域的点击事件 chess.onclick = function (e) { // 1. 获取下棋位置，判断当前下棋操作是否正常 // 1. 当前是否轮到自己走棋了 // 2. 当前位置是否已经被占用 // 2. 向服务器发送走棋请求 if (!is_me) { alert("等待对方走棋...."); return; } let x = e.offsetX; let y = e.offsetY; // 注意, 横坐标是列, 纵坐标是行 // 这里是为了让点击操作能够对应到网格线上 let col = Math.floor(x / 30); let row = Math.floor(y / 30); if (chessBoard[row][col] != 0) { alert("当前位置已有棋子！"); return; } //oneStep(col, row, true); //向服务器发送走棋请求，收到响应后，再绘制棋子 send_chess(row, col); } function send_chess(r, c) { var chess_info = { optype : "put_chess", room_id: room_info.room_id, uid: room_info.uid, row: r, col: c }; ws_hdl.send(JSON.stringify(chess_info)); console.log("click:" + JSON.stringify(chess_info)); } window.onbeforeunload = function() { ws_hdl.close(); } ws_hdl.onopen = function() { console.log("房间长连接建立成功"); } ws_hdl.onclose = function() { console.log("房间长连接断开"); } ws_hdl.onerror = function() { console.log("房间长连接出错"); } function set_screen(me) { var screen_div = document.getElementById("screen"); if (me) { screen_div.innerHTML = "轮到己方走棋..."; }else { screen_div.innerHTML = "轮到对方走棋..."; } } ws_hdl.onmessage = function(evt) { //1. 在收到room_ready之后进行房间的初始化 // 1. 将房间信息保存起来 var info = JSON.parse(evt.data); console.log(JSON.stringify(info)); if (info.optype == "room_ready") { room_info = info; is_me = room_info.uid == room_info.white_id ? true : false; set_screen(is_me); initGame(); }else if (info.optype == "put_chess"){ console.log("put_chess" + evt.data); //2. 走棋操作 // 3. 收到走棋消息，进行棋子绘制 if (info.result == false) { alert(info.reason); return; } //当前走棋的用户id，与我自己的用户id相同，就是我自己走棋，走棋之后，就轮到对方了 is_me = info.uid == room_info.uid ? false : true; //绘制棋子的颜色，应该根据当前下棋角色的颜色确定 isWhite = info.uid == room_info.white_id ? true : false; //绘制棋子 if (info.row != -1 && info.col != -1){ oneStep(info.col, info.row, isWhite); //设置棋盘信息 chessBoard[info.row][info.col] = 1; } //是否有胜利者 if (info.winner == 0) { return; } var screen_div = document.getElementById("screen"); if (room_info.uid == info.winner) { screen_div.innerHTML = info.reason; }else { screen_div.innerHTML = "你输了"; } var chess_area_div = document.getElementById("chess_area"); var button_div = document.createElement("div"); button_div.innerHTML = "返回大厅"; button_div.onclick = function() { ws_hdl.close(); location.replace("/game_hall.html"); } chess_area_div.appendChild(button_div); } else if (info.optype == "chat") { //收到一条消息，判断result，如果为true则渲染一条消息到显示框中 if(info.result == false) { alert(info.reason); return; } var msg_div = document.createElement("p"); msg_div.innerHTML = info.message; if (info.uid == room_info.uid) { msg_div.setAttribute("id", "self_msg"); }else { msg_div.setAttribute("id", "peer_msg"); } var br_div = document.createElement("br"); var msg_show_div = document.getElementById("chat_show"); msg_show_div.appendChild(msg_div); msg_show_div.appendChild(br_div); document.getElementById("chat_input").value = ""; } } //3. 聊天动作 // 1. 捕捉聊天输入框消息 // 2. 给发送按钮添加点击事件，点击俺就的时候，获取到输入框消息，发送给服务器 var cb_div = document.getElementById("chat_button"); cb_div.onclick = function() { var send_msg = { optype : "chat", room_id : room_info.room_id, uid : room_info.uid, message : document.getElementById("chat_input").value }; ws_hdl.send(JSON.stringify(send_msg)); } </script> </body> </html>