嵌入式开辟—C++使用websocketpp 创建WebSocket服务器，并向浏览器发送图片 - ToB企服应用市场:ToB评测及商务社交产业平台

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

复制代码

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

复制代码

#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 库
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 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());
}
}

复制代码

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>

复制代码