当前位置：首页 > news >正文

嵌入式开发—C++使用websocketpp 创建WebSocket服务器，并向浏览器发送图片

news 来源：原创 2024/9/29 14:28:04

文章目录

- 前言
- - websocketpp 库的主要特点
  - 使用 websocketpp 创建 WebSocket 服务器
- C++ 实现简单的WebSocket服务器
- 发送图片数据到网页示例
- - Base64编码图片的具体应用场景
  - 服务端实现
  - 网页端实现
  - 测试效果

前言

websocketpp 是一个开源的 C++ 库，用于创建 WebSocket 服务器和客户端。它提供了简单易用的接口，并且支持 WebSocket 协议的完整实现，适合高性能应用。

websocketpp 库的主要特点

跨平台：支持在多种平台上运行，包括 Windows、Linux 和 macOS。
依赖少：只依赖于 Boost.Asio 或 standalone Asio。非常方便进行嵌入式平台进行移植
高性能：设计用于处理高性能 WebSocket 应用。
完全实现 WebSocket 协议：支持 WebSocket 协议的完整实现，包括握手、消息发送和接收、连接管理等。

使用 websocketpp 创建 WebSocket 服务器

步骤 1：安装依赖项

websocketpp 依赖于 Boost.Asio 或 standalone Asio

在ubuntu上安装Boost:

sudo apt-get update
sudo apt-get install libboost-all-dev

步骤 2：安装 websocketpp

从 GitHub 仓库下载并安装 websocketpp：

git clone https://github.com/zaphoyd/websocketpp.git
cd websocketpp
mkdir build
cmake ..
sudo make
sudo make install

执行完上述步骤，相关的头文件已经复制到ubuntu系统了，只需要在编写代码的时候调用相关头文件即可。

C++ 实现简单的WebSocket服务器

完整代码（可读取图片文件发送给浏览器）如下：

#include <websocketpp/config/asio_no_tls.hpp>
#include <websocketpp/server.hpp>
#include <websocketpp/base64/base64.hpp>#include <iostream>
#include <fstream>
#include <vector>
#include <set>
#include <memory>typedef websocketpp::server<websocketpp::config::asio> server;class websocket_server {
public:websocket_server() {// 初始化 asio 库m_server.init_asio();// 注册回调函数m_server.set_http_handler(bind(&websocket_server::on_http, this, std::placeholders::_1));m_server.set_open_handler(bind(&websocket_server::on_open, this, std::placeholders::_1));m_server.set_close_handler(bind(&websocket_server::on_close, this, std::placeholders::_1));m_server.set_message_handler(bind(&websocket_server::on_message, this, std::placeholders::_1, std::placeholders::_2));}void run(uint16_t port) {// 监听指定端口m_server.listen(port);// 开始接受连接m_server.start_accept();// 启动 asio io_service 运行循环try {m_server.run();} catch (const std::exception &e) {std::cerr << "Error: " << e.what() << std::endl;}}private:typedef std::set<websocketpp::connection_hdl, std::owner_less<websocketpp::connection_hdl>> con_list;server m_server;con_list m_connections;void on_http(websocketpp::connection_hdl hdl) {server::connection_ptr con = m_server.get_con_from_hdl(hdl);std::string response_body = "Hello, World!";con->set_body(response_body);con->set_status(websocketpp::http::status_code::ok);}void on_open(websocketpp::connection_hdl hdl) {m_connections.insert(hdl);std::cout << "Connection opened" << std::endl;}void on_close(websocketpp::connection_hdl hdl) {m_connections.erase(hdl);std::cout << "Connection closed" << std::endl;}void on_message(websocketpp::connection_hdl hdl, server::message_ptr msg) {std::cout << "Received message: " << msg->get_payload() << std::endl;if (msg->get_payload() == "img") {std::cout << "send img" << std::endl;// Read the image file and encode to base64 each time a request is receivedstd::ifstream imageFile("test.jpg", std::ios::binary);if (imageFile.is_open()) {std::vector<unsigned char> imageData((std::istreambuf_iterator<char>(imageFile)),std::istreambuf_iterator<char>());std::string base64ImageData = websocketpp::base64_encode(imageData.data(), imageData.size());m_server.send(hdl, base64ImageData, websocketpp::frame::opcode::text);} else {std::cerr << "Failed to open image file" << std::endl;}} else {m_server.send(hdl, "Message received: " + msg->get_payload(), msg->get_opcode());}}
};int main() {websocket_server server_instance;server_instance.run(8080);return 0;
}

当服务器初始化的时候，主要是初始化asio库和注册处理的回调函数

  // 初始化 asio 库m_server.init_asio();// 注册回调函数m_server.set_http_handler(bind(&websocket_server::on_http, this, std::placeholders::_1));m_server.set_open_handler(bind(&websocket_server::on_open, this, std::placeholders::_1));m_server.set_close_handler(bind(&websocket_server::on_close, this, std::placeholders::_1));m_server.set_message_handler(bind(&websocket_server::on_message, this, std::placeholders::_1, std::placeholders::_2));

下方这段代码，监听了8080端口。当访问浏览器的时候，会回应hello world 。

注意：访问的时候，不能是https 只能是http

void on_http(websocketpp::connection_hdl hdl) {server::connection_ptr con = m_server.get_con_from_hdl(hdl);std::string response_body = "Hello, World!";con->set_body(response_body);con->set_status(websocketpp::http::status_code::ok);}

效果如下：

在这里插入图片描述

 void on_message(websocketpp::connection_hdl hdl, server::message_ptr msg) {std::cout << "Received message: " << msg->get_payload() << std::endl;if (msg->get_payload() == "img") {std::cout << "send img" << std::endl;// Read the image file and encode to base64 each time a request is receivedstd::ifstream imageFile("test.jpg", std::ios::binary);if (imageFile.is_open()) {std::vector<unsigned char> imageData((std::istreambuf_iterator<char>(imageFile)),std::istreambuf_iterator<char>());std::string base64ImageData = websocketpp::base64_encode(imageData.data(), imageData.size());m_server.send(hdl, base64ImageData, websocketpp::frame::opcode::text);} else {std::cerr << "Failed to open image file" << std::endl;}} else {m_server.send(hdl, "Message received: " + msg->get_payload(), msg->get_opcode());}}

接收消息的函数，接收js / WebSocket client的消息

发送图片数据到网页示例

websocketpp 支持发送文本，发送二进制码流，可以使用Base64将二进制的图片文件转为字符发送，而且js支持直接读取Base64编码显示图片，减少了网页端编码难度。

Base64编码图片的具体应用场景

嵌入HTML/CSS：在HTML或CSS中，使用Base64编码可以将图片嵌入到文件中，这样在加载网页时不需要单独请求图片资源，减少HTTP请求次数，提升页面加载速度。
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
```
电子邮件附件：在电子邮件中，附件通常以MIME格式发送。Base64编码用于将二进制附件转换为文本，使其可以嵌入到邮件正文中。
```
Content-Type: image/jpeg
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="image.jpg"
/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDA...
```
Web API 传输：某些API只支持文本数据（如JSON）。通过将图片Base64编码，可以在API请求和响应中传输图片数据。
```
{"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
}
```
数据存储：在某些数据库系统中，尤其是那些设计为以文本形式存储数据的系统，将图片Base64编码后存储，可以避免二进制数据存储时可能遇到的兼容性问题。

服务端实现

读取当前目录的图片文件，使用websocketpp::base64编码成Base64数据，通过Socket文本形式传输。

 std::ifstream imageFile("test.jpg", std::ios::binary);if (imageFile.is_open()) {std::vector<unsigned char> imageData((std::istreambuf_iterator<char>(imageFile)),std::istreambuf_iterator<char>());std::string base64ImageData = websocketpp::base64_encode(imageData.data(), imageData.size());m_server.send(hdl, base64ImageData, websocketpp::frame::opcode::text);} else {std::cerr << "Failed to open image file" << std::endl;}

网页端实现

完整代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket Image and Text Receiver</title>
</head><body><h1>WebSocket Image and Text Receiver</h1><div id="imageContainer"></div><div><input type="text" id="textInput" placeholder="Type your message here"><button onclick="sendMessage()">Send Message</button></div><script>const socket = new WebSocket('ws://192.168.1.11:8080');socket.binaryType = 'arraybuffer'; // Specify that binary data will be receivedsocket.onmessage = function (event) {// Received text datadisplayImage(event.data);};// Convert ArrayBuffer to base64 stringfunction arrayBufferToBase64(buffer) {const binary = [];const bytes = new Uint8Array(buffer);const len = bytes.byteLength;for (let i = 0; i < len; i++) {binary.push(String.fromCharCode(bytes[i]));}const base64String = window.btoa(binary.join(''));return base64String;}// Display image in the image containerfunction displayImage(base64Image) {const imageContainer = document.getElementById('imageContainer');const img = document.createElement('img');img.src = 'data:image/jpeg;base64,' + base64Image;console.log(img.src)imageContainer.appendChild(img);}// Display text messagefunction displayText(message) {const messageContainer = document.getElementById('imageContainer');const textNode = document.createTextNode(message);messageContainer.appendChild(textNode);messageContainer.appendChild(document.createElement('br')); // Add line break}// Send text message to serverfunction sendMessage() {const textInput = document.getElementById('textInput');const message = textInput.value;if (socket.readyState === WebSocket.OPEN) {socket.send(message);textInput.value = ''; // Clear the input field} else {console.log('WebSocket is not open');}}</script>
</body></html>