嵌入式开辟—C++使用websocketpp 创建WebSocket服务器，并向浏览器发送图片
前言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);
}
效果如下：
https://img-blog.csdnimg.cn/direct/a84009eebb5e498a94113dfe7ec76215.png#pic_center
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请求次数，提拔页面加载速度。
<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 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));
}
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 等候网页端链接
打开网页的时候触发连接的回调函数
https://img-blog.csdnimg.cn/direct/c4fd96a8d021417b8b0a396825c3e8ad.png#pic_center
输入img 指令 发送给服务器端， 服务器读取图片发送Base64编码，网页解析显示图片
https://img-blog.csdnimg.cn/direct/d3fa596e930042fc860c9fa427415fb2.png#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]