1.项目介绍

2.开发环境

3.核心技术

4.环境搭建

5.WebSocketpp介绍

5.1WebSocketpp是什么

5.2为什么使用WebSocketpp

5.3原理解析：

5.4WebSocketpp主要特性

6.WebSocketpp使用

7.JsonCpp使用

8.MySQL API

9.项目模块设计以及流程图

10.封装日志宏

11.封装util工具类

12.数据管理模块的实现

12.1数据库的设计

12.2数据库类(user_table)的设计

13.在线用户管理模块

14.游戏房间管理模块

14.1游戏房间类的设计

14.2游戏房间管理类的设计

15.session管理模块

15.1session是什么

15.2session工作原理

15.3session模块设计

15.4session管理模块设计

16.玩家匹配管理模块

16.1玩家匹配队列

16.2玩家匹配管理模块

17.服务器模块

17.1通信接口的设计（协议定制）

17.1.1静态资源的请求

17.1.2注册用户

17.1.3用户登录

17.1.4获取客户端信息

17.1.5websocket长连接协议切换请求（进入游戏大厅）

17.1.6开始对战匹配

17.1.7停⽌匹配

17.1.8websocket长连接协议切换请求（进入游戏房间）

17.1.9走棋

17.1.9聊天

17.2服务器模块实现

18.前端模块

18.1注册页面

18.2登录页面

18.3游戏大厅页面

18.4游戏房间页面

19.项目扩展

20.项目源码

1.项目介绍

此项目实现了一个网页版的五子棋对战的游戏，玩家可以通过浏览器访问服务器来实现人与人之间的对战，主要支持一下功能：

1.用户管理：实现用户注册，用户登录，展示用户的信息包括分数，比赛场次等

2.匹配对战：两个用户在相同的分数段进行匹配对战，胜利一方加分，失败扣分

3.聊天功能：实现两个玩家在下棋的同时还能支持实时聊天的功能

项目成果展示：

注册页面：

登录页面：

登录成功之后游戏大厅页面：

匹配进入游戏房间并进行下棋和聊天的功能展示：

比赛获胜以及对局中实时聊天展示：

2.开发环境

Linux（Centos-7.6）

VSCode/Vim

g++/gdb
Makefile

3.核心技术

HTTP/WebSocket 用于网络通信
Websocketpp 用于服务器可以主动向客户端发送信息
JsonCpp 用于序列化和反序列化
Mysql 用于保存用户的数据
C++11 包装器&bind&智能指针等的使用
BlockQueue 使用list来封装，原因后面讲述
HTML/CSS/JS/AJAX 用于前端页面的展示

4.环境搭建

通过yum来安装各种需要使用到的工具：
gcc/g++编译器、gdb调试器、git、boost库、jsoncpp库、MySQL、cmake工具

5.WebSocketpp介绍

5.1WebSocketpp是什么

WebSocket是从HTML5开始⽀持的⼀种⽹⻚端和服务端保持⻓连接的消息推送机制。

5.2为什么使用WebSocketpp

传统的web程序都是属于"⼀问⼀答"的形式，即客⼾端给服务器发送了⼀个HTTP请求，服务器给客⼾端返回⼀个HTTP响应。这种情况下服务器是属于被动的⼀⽅，如果客⼾端不主动发起请求服务器就⽆法主动给客户端响应。
像⽹⻚即时聊天或者我们做的五⼦棋游戏这样的程序都是⾮常依赖"消息推送"的，即需要服务器主动推动消息到客⼾端。如果只是使⽤原⽣的HTTP协议，要想实现消息推送⼀般需要通过"轮询"的⽅式实现，⽽轮询的成本⽐较⾼并且也不能及时的获取到消息的响应。
基于上述两个问题，就产⽣了WebSocket协议。WebSocket更接近于TCP这种级别的通信⽅式，⼀旦连接建⽴完成客⼾端或者服务器都可以主动的向对⽅发送数据。

这是http下的通信模式：

这是websocket的通信模式：

从上图就可以知道websocket下的通信方式是比http的效率高很多的

5.3原理解析：

WebSocket协议本质上是⼀个基于TCP的协议。为了建⽴⼀个WebSocket连接，客户端浏览器⾸先要向服务器发起⼀个HTTP请求，这个请求和通常的HTTP请求不同，包含了⼀些附加头信息，通过这个附加头信息完成握⼿过程并升级协议的过程。

协议升级流程：

5.4WebSocketpp主要特性

事件驱动的接口
⽀持HTTP/HTTPS、WS/WSS、IPv6
灵活的依赖管理—Boost库/C++11标准库
可移植性：Posix/Windows、32/64bit、Intel/ARM
线程安全

6.WebSocketpp使用

6.1常见接口使用：

namespace websocketpp {
 typedef lib::weak_ptr<void> connection_hdl;
 
 template <typename config>
 class endpoint : public config::socket_type {
 typedef lib::shared_ptr<lib::asio::steady_timer> timer_ptr;
 typedef typename connection_type::ptr connection_ptr;
 typedef typename connection_type::message_ptr message_ptr;
 
 typedef lib::function<void(connection_hdl)> open_handler;
 typedef lib::function<void(connection_hdl)> close_handler;
 typedef lib::function<void(connection_hdl)> http_handler;
 typedef lib::function<void(connection_hdl,message_ptr)> 
message_handler;
 /* websocketpp::log::alevel::none 禁⽌打印所有⽇志*/
 void set_access_channels(log::level channels);/*设置⽇志打印等级*/
 void clear_access_channels(log::level channels);/*清除指定等级的⽇志*/ /*设置指定事件的回调函数*/
 void set_open_handler(open_handler h);/*websocket握⼿成功回调处理函数*/ void set_close_handler(close_handler h);/*websocket连接关闭回调处理函数*/ void set_message_handler(message_handler h);/*websocket消息回调处理函数*/ void set_http_handler(http_handler h);/*http请求回调处理函数*/
 /*发送数据接⼝*/
 void send(connection_hdl hdl, std::string& payload, 
frame::opcode::value op);
 void send(connection_hdl hdl, void* payload, size_t len, 
frame::opcode::value op);
 /*关闭连接接⼝*/
 void close(connection_hdl hdl, close::status::value code, std::string& 
reason);
 /*获取connection_hdl 对应连接的connection_ptr*/
 connection_ptr get_con_from_hdl(connection_hdl hdl);
 /*websocketpp基于asio框架实现，init_asio⽤于初始化asio框架中的io_service调度器*/
 void init_asio();
 /*设置是否启⽤地址重⽤*/
 void set_reuse_addr(bool value);
 /*设置endpoint的绑定监听端⼝*/
 void listen(uint16_t port);
 /*对io_service对象的run接⼝封装，⽤于启动服务器*/
 std::size_t run();
 /*websocketpp提供的定时器，以毫秒为单位*/
 timer_ptr set_timer(long duration, timer_handler callback);
 };
 template <typename config>
 class server : public endpoint<connection<config>,config> {
 /*初始化并启动服务端监听连接的accept事件处理*/
 void start_accept();
 }；
 
 template <typename config>
 class connection
 : public config::transport_type::transport_con_type
 , public config::connection_base
 {
 /*发送数据接⼝*/
 error_code send(std::string&payload, frame::opcode::value 
op=frame::opcode::text);
 /*获取http请求头部*/
 std::string const & get_request_header(std::string const & key)
 /*获取请求正⽂*/
 std::string const & get_request_body();
 /*设置响应状态码*/
 void set_status(http::status_code::value code);
 /*设置http响应正⽂*/
 void set_body(std::string const & value);
 /*添加http响应头部字段*/
 void append_header(std::string const & key, std::string const & val);
 /*获取http请求对象*/
 request_type const & get_request();
 /*获取connection_ptr 对应的 connection_hdl */
 connection_hdl get_handle();
 };
 
 namespace http {
 namespace parser {
 class parser {
 std::string const & get_header(std::string const & key)
 }
 class request : public parser {
 /*获取请求⽅法*/
 std::string const & get_method()
 /*获取请求uri接⼝*/
 std::string const & get_uri()
 };
 }};
 
 namespace message_buffer {
 /*获取websocket请求中的payload数据类型*/
 frame::opcode::value get_opcode();
 /*获取websocket中payload数据*/
 std::string const & get_payload();
 };
 
 namespace http {
 namespace status_code {
 enum value {
 uninitialized = 0,
 continue_code = 100,
 switching_protocols = 101,
 ok = 200,
 created = 201,
 accepted = 202,
 non_authoritative_information = 203,
 no_content = 204,
 reset_content = 205,
 partial_content = 206,
 multiple_choices = 300,
 moved_permanently = 301,
 found = 302,
 see_other = 303,
 not_modified = 304,
 use_proxy = 305,
 temporary_redirect = 307,
 bad_request = 400,
 unauthorized = 401,
 payment_required = 402,
 forbidden = 403,
 not_found = 404,
 method_not_allowed = 405,
 not_acceptable = 406,
 proxy_authentication_required = 407,
 request_timeout = 408,
 conflict = 409,
 gone = 410,
 length_required = 411,
 precondition_failed = 412,
 request_entity_too_large = 413,
 request_uri_too_long = 414,
 unsupported_media_type = 415,
 request_range_not_satisfiable = 416,
 expectation_failed = 417,
 im_a_teapot = 418,
 upgrade_required = 426,
 precondition_required = 428,
 too_many_requests = 429,
 request_header_fields_too_large = 431,
 internal_server_error = 500,
 not_implemented = 501,
 bad_gateway = 502,
 service_unavailable = 503,
 gateway_timeout = 504,
 http_version_not_supported = 505,
 not_extended = 510,
 network_authentication_required = 511
 };}}
}

这是我们之后使用到的主要的接口，其中status_code中主要使用到的是ok:200 、bad_request:400 、not found:404

通过了解上面的接口，我们可以做出一个简单的服务器：

实现步骤：
1.创建服务器，设置日志等级，设置调度器asio，然后设置各个websocket的各个回调函数，

因为传入的是一个包装器，所以这里需要使用的是C++11中bind开绑定参数解决。例如连接成功和断开以及http返回页面还有信息的处理（这里简单处理，用于测试)

2.监听，建立新连接，启动服务器

#include <iostream>
#include <string>
#include <functional>
#include <websocketpp/server.hpp>
#include <websocketpp/config/asio_no_tls.hpp>
using namespace std;

using wsserver_t = websocketpp::server<websocketpp::config::asio>;

void http_callback(wsserver_t* wsserver,websocketpp::connection_hdl hdl)
{
    //给用户返回一个hello world界面
    wsserver_t::connection_ptr conn = wsserver->get_con_from_hdl(hdl);
    std::cout<<"body: "<<conn->get_request_body()<<std::endl;
    websocketpp::http::parser::request req = conn->get_request();
    std::cout<<"uri: "<<req.get_uri()<<std::endl;
    std::cout<<"method: "<<req.get_method()<<std::endl;
    std::string body = "<html><body><h1>Hello World</h1></body></html>";
    conn->set_body(conn->get_request_body());
    //conn->set_body(body);
    //conn->append_header("Content-Type","text/html");
    conn->set_status(websocketpp::http::status_code::ok);
}
void open_callback(wsserver_t* wsserver,websocketpp::connection_hdl hdl)
{
    cout<<"握手成功"<<endl;
}

void close_callback(wsserver_t* wsserver,websocketpp::connection_hdl hdl)
{
    cout<<"连接断开"<<endl;
}

void message_callback(wsserver_t* wsserver,websocketpp::connection_hdl hdl,wsserver_t::message_ptr msg)
{
    wsserver_t::connection_ptr conn = wsserver->get_con_from_hdl(hdl);
    std::cout<<"wsserver message: "<<msg->get_payload()<<std::endl;
    std::string resp = "client say: "+msg->get_payload();
    conn->send(resp,websocketpp::frame::opcode::text);
}

int main()
{
    //使用websocket创建服务器
    wsserver_t wsserver;
    //设置日志等级
    wsserver.set_access_channels(websocketpp::log::alevel::none);
    //设置调度器asio
    wsserver.init_asio();
    //设置回调函数
    wsserver.set_http_handler(bind(http_callback,&wsserver,std::placeholders::_1));
    wsserver.set_open_handler(bind(open_callback,&wsserver,std::placeholders::_1));
    wsserver.set_close_handler(bind(close_callback,&wsserver,std::placeholders::_1));
    wsserver.set_message_handler(bind(message_callback,&wsserver,std::placeholders::_1,std::placeholders::_2));
    //监听
    wsserver.listen(3389);
    //建立新连接
    wsserver.start_accept();
    //启动服务器
    wsserver.run();
    return 0;
}

我们很容易就可以获得到通过上述代码获取到一个我们返回的html页面

html代码：

<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>Test Websocket</title>
 </head>
 <body>
 <input type="text" id="message">
 <button id="submit">提交</button>
 <script>
 let websocket = new WebSocket("ws://43.139.37.242:3389");
 
 // 处理连接打开的回调函数
 websocket.onopen = function() {
 console.log("连接建立");
 }
 // 处理收到消息的回调函数
 // 控制台打印消息
 websocket.onmessage = function(e) {
 console.log("收到消息: " + e.data);
 }
 // 处理连接异常的回调函数
 websocket.onerror = function() {
 console.log("连接异常");
 }
 // 处理连接关闭的回调函数
 websocket.onclose = function() {
 console.log("连接关闭");
 }
 // 实现点击按钮后, 通过 websocket实例 向服务器发送请求
 let input = document.querySelector('#message');
 let button = document.querySelector('#submit');
 button.onclick = function() {
 console.log("发送消息: " + input.value);
 websocket.send(input.value);
 }
 </script>
</body>
</html>

7.JsonCpp使用

Json是什么：Json 是⼀种数据交换格式，它采⽤完全独⽴于编程语⾔的⽂本格式来存储和表⽰数据。

数据存储格式：
对象：使⽤花括号 {} 括起来的表⽰⼀个对象
数组：使⽤中括号 [] 括起来的表⽰⼀个数组
字符串：使⽤常规双引号 "" 括起来的表⽰⼀个字符串
数字：包括整形和浮点型，直接使⽤

JsonCpp库中提供的数据对象表示：
class Json::Value{
 Value &operator=(const Value &other); //Value重载了[]和=，因此所有的赋值和获取数据都可以通过
 Value& operator[](const std::string& key);//简单的⽅式完成 val["name"] = "xx";
 Value& operator[](const char* key);
 Value removeMember(const char* key);//移除元素
 const Value& operator[](ArrayIndex index) const; //val["score"][0]
 Value& append(const Value& value);//添加数组元素val["score"].append(88);  ArrayIndex size() const;//获取数组元素个数 val["score"].size();
 bool isNull(); //⽤于判断是否存在某个字段
 std::string asString() const;//转string string name = 
val["name"].asString();
 const char* asCString() const;//转char* char *name = 
val["name"].asCString();
 Int asInt() const;//转int int age = val["age"].asInt();
 float asFloat() const;//转float float weight = val["weight"].asFloat(); bool asBool() const;//转 bool bool ok = val["ok"].asBool();
};

JsonCpp提供的序列化和反序列化接口：
序列化接口：

class JSON_API StreamWriter {
 virtual int write(Value const& root, std::ostream* sout) = 0;
}
class JSON_API StreamWriterBuilder : public StreamWriter::Factory {
 virtual StreamWriter* newStreamWriter() const;
}

反序列化接口：

class JSON_API CharReader {
 virtual bool parse(char const* beginDoc, char const* endDoc, 
 Value* root, std::string* errs) = 0;
}
class JSON_API CharReaderBuilder : public CharReader::Factory {
 virtual CharReader* newCharReader() const;
}

测试用例编写：

序列化步骤：构造一个streamwritebuilder对象来构造一个streamwrite对象，通过steamwrite中的write函数进行序列化：
反序列化步骤：构造一个charreadbuilder对象来构造一个charread对象，通过steamwrite中的read函数进行反序列化最后输出结果(如果是数组要获取它的长度再进行打印)：

#include <iostream>
#include <string>
#include <sstream>
#include <vector>
#include <jsoncpp/json/json.h>

std::string serialize()
{
    // 使用json::value对象存储数据
    Json::Value root;
    root["姓名"] = "小明";
    root["年龄"] = 20;
    root["成绩"].append(90);
    root["成绩"].append(80);
    root["成绩"].append(70);
    // 构建一个StreamWriterBuilder对象
    Json::StreamWriterBuilder swb;
    // 通过StreamWriterBuilder来构建一个StreamWriter对象
    Json::StreamWriter *sw = swb.newStreamWriter();
    // 使用json进行序列化
    std::stringstream ss;
    int ret = sw->write(root, &ss);
    if (ret != 0)
    {
        std::cerr << "json serilize failed!" << std::endl;
        return "";
    }
    std::cout << "序列化结果: " << ss.str() << std::endl;
    delete sw;
    return ss.str();
}

//反序列化
void unserialize(std::string& s)
{
    //构建一个CharReaderBuilder对象
    Json::CharReaderBuilder crb;
    //通过CharReaderBuilder构建出一个CharReader对象
    Json::CharReader* cb = crb.newCharReader();
    //构建json::value对象来接受反序列化结果
    Json::Value root;
    std::string err;
    //反序列化
    bool ret = cb->parse(s.c_str(),s.c_str()+s.size(),&root,&err);
    if(ret == false)
    {
        std::cerr<<"unserialize failed!"<<std::endl;
        return;
    }
    //输出结果 
    std::cout<<"姓名"<<root["姓名"].asString()<<std::endl;
    std::cout<<"年龄"<<root["年龄"].asInt()<<std::endl;
    int sz = root["成绩"].size();
    for(int i = 0;i<sz;++i)
    {
        std::cout<<"成绩"<<root["成绩"][i]<<std::endl;
    }
    delete cb;
}



int main()
{
    std::string s = serialize();
    unserialize(s);
    return 0;
}

结果：

8.MySQL API

MySQL 是 C/S 模式， C API 其实就是⼀个 MySQL 客⼾端，提供⼀种⽤ C 语⾔代码操作数据库的流程

其中的主要操作：
1.初始化MySQL操作句柄

2.连接服务器，对各个数据进行传入

3.设置字符集，为了保证编码格式相同，统一使用utf8编码格式

4.进行MySQL的操作，这里增删改操作都是对数据库的修改，我们可以通过数据库来查看的到结果，但是查就不行了，因为查是需要保存结果到本地的

5.如果有查，那么就要保存结果到本地，然后获取本地行数和列数，然后进行本地的查看即可

6.最后一定要记得关闭MySQL操作句柄，以防止资源泄露。

#include <stdio.h>
#include <string.h>
#include <mysql/mysql.h>

//定义连接服务器所需要的宏
#define HOST "127.0.0.1"
#define USER "root"
#define PASSWD NULL
#define DBNAME "gobang"
#define PORT 3306


int main()
{
    //1.初始化mysql操作句柄
    MYSQL* mysql = mysql_init(NULL);
    if(mysql == NULL)
    {
        printf("mysql init fail\n");
        mysql_close(mysql);
        return -1;
    }
    //2.连接服务器
    if(mysql_real_connect(mysql,HOST,USER,PASSWD,DBNAME,PORT,NULL,0) == NULL)
    {
        printf("mysql connect fail\n");
        mysql_close(mysql);
        return -1;
    }
    //3.设置字符集
    if(mysql_set_character_set(mysql,"utf8") != 0)
    {
        printf("set character fail\n");
        mysql_close(mysql);
        return -1;
    }   
    //4.连接数据库，在第二步已经完成
    //5.进行数据库的增删改操作
    const char* sql = "insert into stu values(1,18,'曹操')";
    //const char* sql = "update stu set age=20 where id = 1";
    //const char* sql = "delete from stu where id = 1";
    //const char* sql = "select * from stu";
    //const char* sql = "select * from user";
    int ret = mysql_query(mysql,sql);
    if(ret != 0)
    {
        printf("%s ",sql);
        printf("mysql query fail: %s",mysql_errno(mysql));
        mysql_close(mysql);
        return -1;
    }
    // //6.如果有读，那么就先保存查询结果到本地
    // MYSQL_RES* res = mysql_store_result(mysql);
    // if(res == NULL)
    // {
    //     printf("mysql store result fail\n");
    //     mysql_close(mysql);
    //     return -1;
    // }
    // //7.获取结果的行列数
    // int row = mysql_num_rows(res);
    // int field = mysql_num_fields(res);
    // //8.遍历结果集，得到结果
    // for(int i = 0;i<row;++i)
    // {
    //     //获取列
    //     MYSQL_ROW rows= mysql_fetch_row(res);
    //     for(int j = 0;j<field;++j)
    //     {
    //         printf("%s\t",rows[j]);
    //     }
    //     printf("\n");
    // }
    // //9.释放结果集
    // mysql_free_result(res);
    // //10.释放mysql操作句柄
    // mysql_close(mysql);
    return 0;
}