1、简介
WebSocket 是从 HTML5 开始支持的一种网页端和服务端保持长连接的消息推送机制。
- 传统的
web程序都是属于 "⼀问⼀答" 的形式，即客户端给服务器发送了⼀个HTTP请求，服务器给客户端返回⼀个HTTP响应。这种情况下服务器是属于被动的一方，如果客户端不主动发起请求服务器就无法主动给客户端响应 - 像网页即时聊天或者我们做的五子棋游戏这样的程序都是非常依赖 "消息推送" 的， 即需要服务器主动推动消息到客户端。如果只是使用原生的
HTTP协议，要想实现消息推送⼀般需要通过 "轮询" 的⽅式实现，而轮询的成本比较高并且也不能及时的获取到消息的响应。
基于上述两个问题， 就产生了 WebSocket 协议。WebSocket 更接近于 TCP 这种级别的通信⽅式，⼀旦连接建立完成客户端或者服务器都可以主动的向对方发送数据。
并且要注意，WebSocket 和我们平时说的 Socket 是没有半毛钱关系的，注意区分开来！
2、特点
- 建立在
TCP协议之上，支持双向通信，实时性更强。 - 与
HTTP协议有着良好的兼容性，握手阶段采用HTTP协议，默认端口是80和443。 - 数据格式比较轻量，性能开销小、通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是
ws（如果加密，则为wss），形式：ws://echo.websocket.org。 - 支持扩展。
ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
3、原理解析
WebSocket 协议本质上是⼀个基于 TCP 的协议。为了建立⼀个 WebSocket 连接，客户端浏览器首先要向服务器发起⼀个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了⼀些附加头信息，通过这个附加头信息完成握手过程并升级协议的过程。
通过一些抓包来分析一下切换过程中 HTTP 请求和 HTTP 响应的包有何不同：
HTTP请求：
GET /ws hTTP/1.1 // URL通常会设置为/ws表示这是websocket
Host: localhost:2021
Upgrade: websocket // 希望升级的协议格式
Connection: Upgrade // 希望升级协议
Sec-Websocket-Key: mViTimINUhcF0fBHeX+wqA== // 是客户端发送的一个base64编码的秘文，
Sec-Websocket-Version: 13 // 该websocket的版本Sec-Websocket-Key是客户端发送的一个base64编码的秘文，要求服务端返回一个对应加密的Sec-Websocket-Accept应答，否则客户端会抛出 “Error during WebSocket handshake” 错误，并关闭连接。Sec-Websocket-Version: 13表示websocket的版本，如果服务端不支持该版本，需要返回一个Sec-Websocket-Version里面包含服务端支持的版本号。
HTTP响应：
HTTP/1.1 101 Switching Protocols // 表示服务端接受websocket协议的
Connection: Upgrade // 升级协议
Upgrade: websocket // 升级的协议格式
Sec-Websocket-Accept: YLcYR/p/mS8hENqlgMXtFTggdv8=Sec-Websocket-Accept是服务端采用与客户端一致的秘钥计算出来后返回客户端。HTTP/1.1 101 Switching Protocols表示服务端接受WebSocket协议的客户端连接。
4、报文格式
报文字段比较多，我们重点关注这几个字段：
- FIN：
WebSocket协议传输数据以消息为概念单位，⼀个消息有可能由⼀个或多个帧组成- 占
1个比特大小：- 如果是
1，表示这是消息的最后一个分片 - 如果是
0，表示这不是消息的最后一个分片
- 如果是
- RSV1、RSV2、RSV3：
- 各占
1个比特大小：- 保留字段，只在扩展时使用，若未启用扩展则应置
1，若收到不全为0的数据帧，且未协商扩展则立即终止连接。
- 保留字段，只在扩展时使用，若未启用扩展则应置
- 各占
- Opcode：
- 占
4个比特，标志当前数据帧的类型：- 0x0：表示一个延续帧。当
Opcode为0时，表示本次数据传输采用了数据分片，当前收到的数据帧为其中一个数据分片。 - 0x1：表示这是一个文本帧（frame）
- 0x2：表示这是一个二进制帧（frame）
- 0x3-0x7：保留的操作代码，用于后续定义的非控制帧
- 0x8：表示连接断开
- 0x9：表示这是一个 ping 操作
- 0xA：表示这是一个 pong 操作
- 0xB-0xF：保留的操作代码，用于后续定义的控制帧
- 0x0：表示一个延续帧。当
- 占
- Mask：
- 表示是否要对数据载荷也就是
Payload数据字段进行掩码操作：- 从客户端向服务端发送数据时，需要对数据进行掩码操作。如果服务端接收到的数据没有进行掩码操作，服务端需要断开连接！
- 从服务端向客户端发送数据时，不需要对数据进行掩码操作。
- 占
1个比特大小：- 如果为
1，那么Masking-key字段中会定义一个掩码键，并用这个掩码键对数据载荷进行反掩码。
- 如果为
- 表示是否要对数据载荷也就是
- Payload length：
- 数据载荷的长度，单位是字节。有可能为
7位、7+16位、7+64位，假设x为数据载荷的长度，则其表示如下：- x 在[0,126) 内：数据的长度就是 Payload length 表示的大小
- x 为 126：后续
2个字节代表⼀个16位的无符号整数，该无符号整数的值为数据的长度 - x 为 127：后续
8个字节代表⼀个64位的无符号整数（最高位为**0**），该无符号整数的值为数据的长度
- 数据载荷的长度，单位是字节。有可能为
- Masking-key：
- 占
0或4字节Mask为1，则包含4字节的Masking-keyMask为0，则不包含Masking-key
- 占
- Payload data：
- 报文携带的载荷数据
- 如果没有协商使用扩展的话，扩展数据为
0字节。所有的扩展都必须声明扩展数据的长度，扩展如何使用必须在握手阶段就协商好
- 如果没有协商使用扩展的话，扩展数据为
- 报文携带的载荷数据
Ⅱ. WebSocketpp
1、认识
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 服务器。
下面是该项目的⼀些常用网站：
2、常用接口
这里做一下下面接口和类的大概介绍：
- 下面的几个指定事件的回调事件，如
set_open_handler()函数，它们都是用来 设置 针对不同事件而设置的处理函数，而处理函数是由我们自己来写的，因为WebSocketpp负责搭建服务器，它给不同的事件分配了不同的处理函数指针，比如open_handler其实就是握手成功后处理函数的指针，当服务器收到了指定的数据，触发了指定的事件之后，就会通过函数指针去调用我们自己写的那些处理函数！ server类是继承于endpoint类的，我们后面也是通过创建server类来完成搭建服务器的操作。connection这个类也很重要，它提供了一些接口，用于处理连接的事件和状态，而connection_hdl是一个指向connection对象的轻量级句柄。它的作用是在WebSocket库内部，用于管理和操作connection对象，以及在回调函数中传递连接对象的引用。- 一般来说我们通过
server类的get_con_from_hdl()函数，通过connection_hdl就能获得connection_ptr从而来操作connection类的函数！
- 一般来说我们通过
- 通常如
connection、message_buffer等类都是用于在回调函数中请求和响应的类！
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);
// 取消定时器，立刻触发之前设置的callback函数
std::size_t cancel();
};
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请求头部中key关键字的
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,
};
}
}
}3、websocketpp库搭建服务器
搭建流程
一般我们搭建服务器都是统一形式的，大概流程如下：
- 实例化
server对象- 实例化的时候，因为命名空间一般我们不展开，所以要引用命名空间
websocketpp里面的server，注意不要落了模板，一般模板里面的config这里都是使用websocketpp::config::asio
- 实例化的时候，因为命名空间一般我们不展开，所以要引用命名空间
- 设置日志等级
- 初始化
asio调度器和启用地址重用 - 设置回调函数
- 设置回调函数的时候，
connection_hdl类型是要通过命名空间websocketpp来引入的，就是websocketpp::connection_hdl。而对于set_http_handler()函数来说，它还多了一个函数指针message_ptr，因为它是属于endpoint类，或者它的子类server的，所以通过我们typedef的server类型wsserver_t来取出这个函数指针，就是wsserver_t::message_ptr。
- 设置回调函数的时候，
- 设置监听窗口
- 获取新连接
- 启动服务器
主体框架
我们先将主体框架搭起来，其中头文件我们要使用的是 server.hpp 和 asio_no_tls.hpp，因为 websocketpp 库是放在 /usr/include/ 中的，所以要使用这些头文件的话还得进入它们对应的路径下面引入。
#include <iostream>
#include <string>
#include <websocketpp/server.hpp>
#include <websocketpp/config/asio_no_tls.hpp>
using wsserver_t = websocketpp::server<websocketpp::config::asio>;
void open_callback(websocketpp::connection_hdl hdl)
{}
void close_callback(websocketpp::connection_hdl hdl)
{}
void http_callback(websocketpp::connection_hdl hdl)
{}
void message_callback(websocketpp::connection_hdl hdl, wsserver_t::message_ptr msgptr)
{}
int main()
{
// 1.实例化server对象
wsserver_t server;
// 2.设置日志等级
server.set_access_channels(websocketpp::log::alevel::none);
// 3.初始化asio调度器和地址重用
server.init_asio();
server.set_reuse_addr(true);
// 4.设置回调函数
server.set_open_handler(open_callback);
server.set_close_handler(close_callback);
server.set_message_handler(message_callback);
server.set_http_handler(http_callback);
// 5.设置监听窗口
server.listen(8080);
// 6.开始获取新连接
server.start_accept();
// 7.启动服务器
server.run();
return 0;
} 但是一般我们在回调函数中还需要用到 server 对象的 指针 或者 引用，所以要多传一个参数，但是我们不希望影响到这些函数的参数列表，因为比如这里的 typedef lib::function<void(connection_hdl)> open_handler 等函数已经要求参数中只能有一个参数，那要是我们想多传一个参数又不想影响包装器，怎么办呢❓❓❓
此时就需要使用 std::bind 绑定器，终于有用武之地了哈哈！
绑定器的作用就是可以将一些参数直接绑定到形参，相当于让计算机帮我们自动填我们预先设置好的参数，就仿佛这个参数不存在一样，有点像缺省参数，但不同的是，绑定器绑定的函数可以生成一个新的函数指针进行返回！
下面我们就给每个回调函数多传一个 server 对象的指针，然后在设置回调函数那里进行参数绑定：
void open_callback(wsserver_t* server, websocketpp::connection_hdl hdl)
{}
void close_callback(wsserver_t* server, websocketpp::connection_hdl hdl)
{}
void http_callback(wsserver_t* server, websocketpp::connection_hdl hdl)
{}
void message_callback(wsserver_t* server, websocketpp::connection_hdl hdl, wsserver_t::message_ptr msgptr)
{}
int main()
{
......
// 4.设置回调函数
server.set_open_handler(std::bind(open_callback, &server, std::placeholders::_1));
server.set_close_handler(std::bind(close_callback, &server, std::placeholders::_1));
server.set_message_handler(std::bind(message_callback, &server, std::placeholders::_1, std::placeholders::_2));
server.set_http_handler(std::bind(http_callback, &server, std::placeholders::_1));
......
}填充回调函数细节
-
http_callback() 函数
// 任务：打印请求内容，并且设置响应内容 void http_callback(wsserver_t* server, websocketpp::connection_hdl hdl) { // 首先将一些请求内容打印到终端 wsserver_t::connection_ptr conn_ptr = server->get_con_from_hdl(hdl); // 获取connection_ptr std::cout << "body: " << conn_ptr->get_request_body() << std::endl; // 打印请求正文 websocketpp::http::parser::request req = conn_ptr->get_request(); // 获取http请求对象 std::cout << "method: " << req.get_method() << std::endl; // 打印请求方法 std::cout << "uri: " << req.get_uri() << std::endl; // 打印请求路径资源 std::cout << "version: " << req.get_version() << std::endl; // 打印请求版本 // 然后填充响应资源 std::string body = "<html><body><h1>Hello Liren!</h1></body></html>"; // 写一个简单的html页面格式 conn_ptr->set_body(body); // 设置响应正文 conn_ptr->append_header("Content-Type", "text/html"); // 设置响应头部 conn_ptr->set_status(websocketpp::http::status_code::ok); // 设置响应状态码 } -
open_callback 函数
void open_callback(wsserver_t* server, websocketpp::connection_hdl hdl) { std::cout << "websocket握手成功！" << std::endl; } -
close_callback 函数
void close_callback(wsserver_t* server, websocketpp::connection_hdl hdl) { std::cout << "websocket断开连接！" << std::endl; } -
message_callback 函数
// 任务：收到一个消息进行打印，然后进行响应 void message_callback(wsserver_t* server, websocketpp::connection_hdl hdl, wsserver_t::message_ptr msgptr) { // 打印获取的消息 wsserver_t::connection_ptr conn_ptr = server->get_con_from_hdl(hdl); // 获取connection_ptr std::cout << "message: " << msgptr->get_payload() << std::endl; // 打印消息 // 响应 std::string callback = "server say: client say " + msgptr->get_payload(); // 创建响应内容 conn_ptr->send(callback, websocketpp::frame::opcode::text); // 发送响应 }
4、编写 makefile 文件
因为 websocketpp 用到了 pthread 和 boost_system，所以要在编译的时候指定：
server:wsserver.cpp
g++ -o $@ $^ -std=c++11 -lboost_system -lpthread
.PHONY:clean
clean:
rm -f server5、websocket客户端
如果使用的是 http 客户端，也就是直接用浏览器输入 ip + 端口号，那么就能直接访问了。其连接等时候触发的是 http_callback() 函数。
而这里我们用自己写一个 html 页面来充当 websocket 客户端，来测试一下服务器是否能正确的收发信息，其触发的是 message_callback() 函数！
<!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>Test Websocket</title>
</head>
<body>
<input type="text" id="message">
<button id="submit">提交</button>
<script>
// 创建 websocket 实例
// ws://192.168.51.100:8888
// 类比http：
// ws表示websocket协议
// 192.168.51.100 表示服务器地址
// 8888表⽰服务器绑定的端⼝
let websocket = new WebSocket("ws://81.71.97.127:8080/");
// 处理连接打开的回调函数
websocket.onopen = function() {
alert("连接建⽴");
}
// 处理收到消息的回调函数
// 控制台打印消息
websocket.onmessage = function(e) {
alert("收到消息: " + e.data);
}
// 处理连接异常的回调函数
websocket.onerror = function() {
alert("连接异常");
}
// 处理连接关闭的回调函数
websocket.onclose = function() {
alert("连接关闭");
}
// 实现点击按钮后, 通过 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> 然后我们在桌面可以创建一个 html 文件，将其复制进去之后，打开这个文件，就能测试了！
