C++在线五子棋对战(网页版)项目:websocket协议

目标:认识理解websocket协议、websocket切换过程和websocket协议格式。认识和学会使用websocketpp库常用接口。了解websocketpp库搭建服务器流程,认识和学会使用websocketpp库bin接口,最后使用websocketpp库搭建服务器。

初识websocket

WebSocket是从HTML5开始支持的一种网页端和服务端保持长连接的消息推送机制。

在传统的Web程序都属于是“一问一答”的形式,即客户端给服务器发送了HTTP请求,服务端才会给客户端返回一个HTTP响应。在这种情况下,服务端属于被动的一方,如果客户端不给服务端发送HTTP请求,服务端是不会主动给客户端发送HTTP响应的。

而在网页即时聊天或者五子棋对战中这种程序中,都是非常依赖“消息推送”的,即需要服务端主动推送消息给客户端。因此,只是使用原生的HTTP协议,想要实现消息推送一般需要通过轮询的方式实现。

C++在线五子棋对战(网页版)项目:websocket协议_第1张图片

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

原理解析

在建立TCP连接后,客户端向服务端发送一个HTTP请求,希望可以切换协议,切换成websocket协议。在HTTP请求当中,包含的重要信息有:

HTTP请求行  GET/ws HTTP/1.1

希望切换协议 Connection:Upgrade

切换的协议格式 Upgrade:Websocket

切换的协议的版本 Sec-WebSocket-Version:xxx 

通信的钥匙 Sec-WebSocket-Key:xxx 

服务端收到请求后,会查看客户端想要切换的协议和版本自己是否支持,如果支持,那么就会同意切换,并且发送HTTP响应给客户端,HTTP响应中包含的重要信息有:

响应行 HTTP/1.1 101 xxx  101表示切换协议的响应

切换协议 Connection:Upgrade

切换的协议格式 Upgrade:Websocket

通信的钥匙,也表示同意切换 Sec-WebSocket-Accept:xxx 

切换完成,后续客户端和服务端直接就可以使用websocket协议进行通信,服务端可以主动给客户端推送请求了。

C++在线五子棋对战(网页版)项目:websocket协议_第2张图片

WebSocket协议格式

C++在线五子棋对战(网页版)项目:websocket协议_第3张图片

FIN:WebSocket传输数据以消息为概念单位,⼀个消息有可能由⼀个或多个帧组成,FIN字段为1表示末尾帧。

RSV1~3:保留字段,只在扩展时使⽤,若未启⽤扩展则应置1,若收到不全为0的数据帧,且未协商扩展则⽴即终⽌连接。

  

opcode:标志当前数据帧的类型。

0x0:表示这是个延续帧,当opcode为0表示本次数据传输采用了数据分片,当前收到的帧为
其中⼀个分片。
◦ 0x1:表示这是文本帧。
◦ 0x2:表示这是二进制帧。

◦ 0x3-0x7:保留,暂未使用。
◦ 0x8:表示连接断开。
◦ 0x9:表示ping帧。
◦ 0xa:表示pong帧。
◦ 0xb-0xf:保留,暂未使⽤。

  

mask:表示Payload数据是否被编码,若为1则必有Mask-Key,用于解码Payload数据。仅客户端发送给服务端的消息需要设置。

  
Payload length:数据载荷的长度,单位是字节,有可能为7位、7+16位、7+64位。假设Payload length=x。
◦ x为0~126:数据的长度为x字节。
◦ x为126:后续2个字节代表⼀个16位的无符号整数,该无符号整数的值为数据的长度。
◦ x为127:后续8个字节代表⼀个64位的无符号整数(最⾼位为0),该无符号整数的值为数据的长度。

Mask-Key: 当mask为1时存在,⻓度为4字节,解码规则:DECODED[i]=ENCODED[i]^MASK[i%4],即数据的每一个字节,逐个字节都需要与mask-key的四个字节进行异或操作。

websocketpp库常用接口

WebSocketpp是⼀个跨平台的开源(BSD许可证)头部专⽤C++库,它实现了RFC6455(WebSocket协议)和RFC7692(WebSocketCompression Extensions)。它允许将WebSocket客⼾端和服务器功能集成到C++程序中。在最常见的配置中,全功能⽹络I/O由Asio⽹络库提供。

WebSocketpp的主要特性包括:

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

WebSocketpp同时支持HTTP和Websocket两种网络协议,比较适用于我们本次的项目,所以我们选用该库作为项目的依赖库用来搭建HTTP和WebSocket服务器。

下面是websocketpp的常用接口,用于在写项目时做参考:

//需要记住websocketpp命名空间
namespace websocketpp {
	typedef lib::weak_ptr connection_hdl;
	template 
	class endpoint : public config::socket_type {
		typedef lib::shared_ptr timer_ptr;
		typedef typename connection_type::ptr connection_ptr;
		typedef typename connection_type::message_ptr message_ptr;
		typedef lib::function open_handler;
		typedef lib::function close_handler;
		typedef lib::function http_handler;
		typedef lib::function
			message_handler;
		/* websocketpp::log::alevel::none 禁⽌打印所有⽇志*/

		void set_access_channels(log::level channels);/*设置⽇志打印等级*/
		/*,在程序运行的时候,什么样的调试信息需要被打印出来,
		什么不该打印出来,就是通过设置日志等级来控制*/
		void clear_access_channels(log::level channels);/*清除指定等级的⽇志*/
		/*设置指定事件的回调函数*/
		/*回调函数相关接口:针对不同事件设置不同的处理函数,
		websocketpp搭建了服务器之后,给不同的事件设置了不同的处理函数指针这些指针,
		可以指向指定的函数,当服务器收到了指定的数据,
		触发了指定的事件后就会通过函数指针去调用这些函数这时候,
		我们程序员就可以编写一些业务处理函数,将其设置为对应事件的业务处理函数*/
		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 
	class server : public endpoint, config> {
		/*初始化并启动服务端监听连接的accept事件处理*/
		void start_accept();
	};
		template 
	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 log {
		struct alevel {
			static level const none = 0x0;//日志等级
			static level const connect = 0x1;
			static level const disconnect = 0x2;
			static level const control = 0x4;
			static level const frame_header = 0x8;
			static level const frame_payload = 0x10;
			static level const message_header = 0x20;
			static level const message_payload = 0x40;
			static level const endpoint = 0x80;
			static level const debug_handshake = 0x100;
			static level const debug_close = 0x200;
			static level const devel = 0x400;
			static level const app = 0x800;
			static level const http = 0x1000;
			static level const fail = 0x2000;
			static level const access_core = 0x00003003;
			static level const all = 0xffffffff;
		};
	}
	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
			};
		}
	}
	namespace frame {
		namespace opcode {
			enum value {
				continuation = 0x0,
				text = 0x1,//文本形式
				binary = 0x2,//二进制向欧美还是
				rsv3 = 0x3,
				rsv4 = 0x4,
				rsv5 = 0x5,
				rsv6 = 0x6,
				rsv7 = 0x7,
				close = 0x8,
				ping = 0x9,
				pong = 0xA,
				control_rsvb = 0xB,
				control_rsvc = 0xC,
				control_rsvd = 0xD,
				control_rsve = 0xE,
				control_rsvf = 0xF,
			};
		}
	}
}

使用websocketpp搭建服务器

搭建服务器的基本流程

1.实例化server对象。
2.设置日志输出等级。
3.初始化asio框架种的调度器。
4.设置业务处理回调函数(具体业务处理的函数由我们自己实现) 。

5.设置服务器监听端口。
6.开始获取新建连接。

7.启动服务器。

bind的使用 

C++11中的bind,作用是用于实现对函数进行参数绑定的功能。

比如:我们实现了一个print函数:

void print(char *str)f std:cout << str << std:endl; }

在调用的时候,我们需要传入数据:print("nihao");

如果选择使用bind将函数和参数进行绑定,那么就不需要传参数了。

auto func = std:.bind(print, "nihao");
对print函数进行参数绑定并生成了一个新的可调用对象func
func();函数调用等价于print("nihao");

此外,如果还有参数传入,比如:

void print(char *str, int num){ std:cout << str << std:endl; }
print("nihao",10);调用函数的时候需要我们传入参数

在绑定的时候,增加 std:placeholders:._ 1,表示可以增加一个新的参数进去。

auto func = std.bind(print,"nihao",std:placeholders:._ 1);
对print函数进行参数绑定并生成了一个新的可调用对象func
func(10);函数调用等价于print("nihao",10);

示例代码:

#include
#include
#include

void print(const char* str,int num)
{
    std::cout<

C++在线五子棋对战(网页版)项目:websocket协议_第4张图片

使用websocketpp搭建简单服务器

通过上面搭建服务器的基本流程,我们可以逐一实现出来:

1.实例化server对象

从websocketpp的常用接口的介绍中可以看到,server类继承endpoint类,需要传入模板参数websocketpp中的config,而需要用到asio框架。

C++在线五子棋对战(网页版)项目:websocket协议_第5张图片

/*定义server类的类型,可变参数为websocketpp::config::asio,
因为server继承的endpoint类需要传入这个模板参数*/
typedef websocketpp::server wsserver_t;
wsserver_t wssrv;

完整代码如下:

#include
#include
//server的类包含在了webcoketpp中的server.hpp中
#include 
/*需要时用asio框架,就需要有asio的头文件,也是包含在了websocketpp,
我们需要的是非ssl加密的,因此选择asio_no_tls.hpp*/
#include

/*定义server类的类型,可变参数为websocketpp::config::asio,
因为server继承的endpoint类需要传入这个模板参数*/
typedef websocketpp::server wsserver_t;

// 业务请求——处理http请求的回调函数 返回⼀个html欢迎⻚⾯
void http_callback(wsserver_t* srv,websocketpp::connection_hdl hdl)
{
    //给客户端返回一个hello world的页面
    /*通过server获取connection*/
    wsserver_t::connection_ptr conn = srv->get_con_from_hdl(hdl);
    /*获取请求正⽂*/
    std::cout<<"body: "<get_request_body()<get_request();
    /*获取请求⽅法*/
    std::cout<<"method: "<set_body(body);
    conn->append_header("Content-Type","text/html");
    conn->set_status(websocketpp::http::status_code::ok);

}

// websocket连接成功的回调函数
void wsopen_callback(wsserver_t* srv,websocketpp::connection_hdl hdl)
{
    std::cout<<"websocket握手成功!\n";
}
// websocket关闭连接成功的回调函数
void wsclose_callback(wsserver_t* srv,websocketpp::connection_hdl hdl)
{
    std::cout<<"websocket连接断开成功!\n";
}

// websocket连接收到消息的回调函数
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: "<get_payload()<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;
}

接着,我们写一个简单的前端页面,测试一下:





    
    
    
    Test Websocket



    
    
    


测试

运行服务器后:

C++在线五子棋对战(网页版)项目:websocket协议_第6张图片

C++在线五子棋对战(网页版)项目:websocket协议_第7张图片

打开这个前端页面,输入“你好”:

C++在线五子棋对战(网页版)项目:websocket协议_第8张图片

C++在线五子棋对战(网页版)项目:websocket协议_第9张图片

关闭页面:

C++在线五子棋对战(网页版)项目:websocket协议_第10张图片

 

你可能感兴趣的:(C++项目:在线五子棋网页版,Linux网络,websocket,网络协议,网络)