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);//设置调度器asiowsserver.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 3306int 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;
}