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

鼠扑 · 2024-6-22 12:49:46

前言

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 received
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;
}
} 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 received
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;
}
} 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请求次数，提拔页面加载速度。
1. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
复制代码
电子邮件附件：在电子邮件中，附件通常以MIME格式发送。Base64编码用于将二进制附件转换为文本，使其可以嵌入到邮件正文中。
1. Content-Type: image/jpeg
2. Content-Transfer-Encoding: base64
3. Content-Disposition: attachment; filename="image.jpg"
4. /9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDA...
复制代码
Web API 传输：某些API只支持文本数据（如JSON）。通过将图片Base64编码，可以在API请求和相应中传输图片数据。
1. {
2. "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
3. }
复制代码
数据存储：在某些数据库系统中，尤其是那些设计为以文本情势存储数据的系统，将图片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 received
socket.onmessage = function (event) {
// Received text data
displayImage(event.data);
};
// Convert ArrayBuffer to base64 string
function 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 container
function 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 message
function 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 server
function 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>

复制代码

测试效果

起首在服务器端打开websocket_server 等候网页端链接
打开网页的时候触发连接的回调函数

输入img 指令发送给服务器端，服务器读取图片发送Base64编码，网页解析显示图片

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云