websocketpp 使用安装与使用

最新推荐文章于 2025-03-31 11:04:38 发布

炬火初现

最新推荐文章于 2025-03-31 11:04:38 发布

阅读量1k

点赞数 11

文章标签：后端中间件 c++ websocket

本文链接：https://blog.youkuaiyun.com/qq_35639854/article/details/146164572

版权

1.介绍与使用

Websocket 协议介绍

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

• 传统的 web 程序都是属于 " 一问一答 " 的形式，即客户端给服务器发送了一个

HTTP 请求，服务器给客户端返回一个 HTTP 响应。这种情况下服务器是属于被动的

一方，如果客户端不主动发起请求服务器就无法主动给客户端响应

• 像网页即时聊天或者我们做的五子棋游戏这样的程序都是非常依赖 " 消息推送 " 的，

即需要服务器主动推动消息到客户端。如果只是使用原生的 HTTP 协议，要想实现消

息推送一般需要通过 " 轮询 " 的方式实现，而轮询的成本比较高并且也不能及时的获取

到消息的响应。

基于上述两个问题，就产生了 WebSocket 协议。 WebSocket 更接近于 TCP 这种级别

的通信方式，一旦连接建立完成客户端或者服务器都可以主动的向对方发送数据。

原理解析

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客

户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，

包含了一些附加头信息，通过这个附加头信息完成握手过程并升级协议的过程。

2.安装

apt-get install libboost-dev libboost-system-dev libwebsocketpp-dev

安装完毕后，若在 /usr/include 下有了 websocketpp 目录就表示安装成功了

3.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 两种网络协议

下面是该项目的一些常用网站，大家多去学习。

• github ： https://github.com/zaphoyd/websocketpp

• 用户手册： http://docs.websocketpp.org/

• 官网： http://www.zaphoyd.com/websocketpp

4.websocketpp 简单使用

main.cpp

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

void on_open(websocketpp::connection_hdl hdl)
{
    std::cout << "长连接建立成功" << std::endl;
}

void on_close(websocketpp::connection_hdl hdl)
{
    std::cout << "长连接断开" << std::endl;
}

void on_message(server *server, websocketpp::connection_hdl hdl, server::message_ptr msg)
{
    // 获取消息内容
    std::string msg_str = msg->get_payload();
    // 输出收到的消息
    cout << "收到消息：" << msg_str << endl;

    // 通过连接句柄获取连接对象
    auto connection_hdl = server->get_con_from_hdl(hdl);
    // 发送回显消息并附加" hello!"
    connection_hdl->send(msg_str + " hello!", websocketpp::frame::opcode::value::text);
}



int main()
{
    server server;

    // 设置服务器访问日志级别为无
    server.set_access_channels(websocketpp::log::alevel::none);

    // 初始化Asio库
    server.init_asio();

    // 设置连接打开时的回调函数
    server.set_open_handler(on_open);

    // 设置连接关闭时的回调函数
    server.set_close_handler(on_close);

    // 设置消息处理函数
    auto set_message_handler = std::bind(&on_message, &server, std::placeholders::_1, std::placeholders::_2);
    server.set_message_handler(set_message_handler);

    // 允许地址复用
    server.set_reuse_addr(true);

    // 监听9092端口
    server.listen(9092);

    // 开始接受连接
    server.start_accept();

    // 运行服务器
    server.run();

    return 0;
}

makefile

main:main.cpp
	g++ $^ -o $@ -std=c++17 -lpthread -lboost_system

@PHNOY:clean
clean:
	rm -f main

test.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>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://192.168.45.129:9092");
 
 // 处理连接打开的回调函数
 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>

测试截图