高性能的 C++ Web 开发框架 CPPCMS + WebSocket 模拟实现聊天与文件传输案例。

1. 项目结构

2. config.json

{"service": {"api": "http","port": 8080,"ip": "0.0.0.0"},"http": {"script": "","static": "/static"}
}

3. CMakeLists.txt

cmake_minimum_required(VERSION 3.10)
project(c_web)set(CMAKE_CXX_STANDARD 17)# 指定源文件
set(SOURCE_FILES src/main.cpp src/blog.cpp)# 手动设置 CppCMS 和 Booster 的头文件路径
include_directories(/usr/local/include)# 手动设置库文件路径
link_directories(/usr/local/lib)# 添加可执行文件
add_executable(c_web ${SOURCE_FILES})find_package(Boost REQUIRED COMPONENTS system thread)
include_directories(${Boost_INCLUDE_DIRS})# 添加 nlohmann_json 的头文件路径
include_directories(/usr/include/nlohmann)# 链接 CppCMS 和 Booster 库
target_link_libraries(c_web cppcms booster ${Boost_LIBRARIES})

4. main.cpp

#include <cppcms/service.h>  // 引入CppCMS服务的头文件
#include <cppcms/applications_pool.h>  // 应用池管理类
#include <cppcms/http_response.h>  // 处理HTTP响应的类
#include <cppcms/url_dispatcher.h>  // URL调度器，用于将请求映射到处理程序
#include <boost/beast/core.hpp>  // Beast库的核心部分，用于处理输入输出操作
#include <boost/beast/websocket.hpp>  // Beast库的WebSocket部分，用于WebSocket处理
#include <boost/asio/ip/tcp.hpp>  // ASIO库的TCP/IP协议部分
#include <boost/asio/io_context.hpp>  // ASIO库的IO上下文，用于管理异步操作
#include <boost/asio/strand.hpp>  // ASIO库的strand，用于确保回调顺序
#include <thread>  // C++标准库的线程支持
#include <mutex>  // C++标准库的互斥锁，用于线程安全操作
#include <set>  // C++标准库的集合容器
#include <vector>  // C++标准库的向量容器
#include <iostream>  // 标准输入输出流
#include <fstream>  // 文件流，用于文件读写操作
#include <map>  // 映射容器，用于键值对存储
#include "blog.h"  // 自定义的博客应用程序头文件
#include <nlohmann/json.hpp>  // 引入nlohmann JSON库，用于处理JSON数据namespace beast = boost::beast;  // 简化命名空间
namespace websocket = beast::websocket;  // 简化命名空间
namespace net = boost::asio;  // 简化命名空间
using tcp = net::ip::tcp;  // 使用TCP协议
using json = nlohmann::json;  // 使用nlohmann JSON库进行JSON处理// 用于存储当前所有连接的用户及其对应的WebSocket连接
std::map<std::string, std::shared_ptr<websocket::stream<tcp::socket>>> user_connections;
// 用于确保线程安全地访问user_connections的互斥锁
std::mutex connections_mutex;// 处理每个WebSocket会话的函数
void do_session(std::shared_ptr<websocket::stream<tcp::socket>> ws) {std::string current_user;  // 存储当前用户的用户名try {ws->accept();  // 接受WebSocket连接while(1) {  // 无限循环处理接收的消息beast::flat_buffer buffer;  // 创建一个缓冲区来存储接收到的数据ws->read(buffer);  // 从WebSocket连接中读取数据std::string message = beast::buffers_to_string(buffer.data());  // 将缓冲区中的数据转换为字符串auto data = json::parse(message);  // 解析JSON格式的数据// 处理用户初始化（登录）请求if (data["type"] == "init") {current_user = data["username"];  // 获取并保存当前用户的用户名{// 使用互斥锁确保线程安全地更新user_connectionsstd::lock_guard<std::mutex> lock(connections_mutex);user_connections[current_user] = ws;  // 将用户与其WebSocket连接关联}// 构建一个包含所有已连接用户列表的JSON对象json user_list = { {"type", "user_list"}, {"users", json::array()} };for (const auto& pair : user_connections) {user_list["users"].push_back(pair.first);  // 将每个用户的用户名添加到列表中}// 将用户列表发送给所有已连接的用户for (const auto& pair : user_connections) {pair.second->text(true);  // 设置为文本消息pair.second->write(net::buffer(user_list.dump()));  // 发送用户列表}}// 处理普通消息传递请求else if (data["type"] == "message") {std::string target = data["target"];  // 获取消息的目标用户// 如果目标用户在线，则将消息转发给该用户if (user_connections.find(target) != user_connections.end()) {auto target_ws = user_connections[target];target_ws->text(true);  // 设置为文本消息target_ws->write(net::buffer(message));  // 将消息发送给目标用户}}// 处理文件元数据及文件传输请求else if (data["type"] == "metadata") {std::string target = data["target"];  // 获取文件传输的目标用户// 如果目标用户在线，则发送文件元数据，并准备接收文件内容if (user_connections.find(target) != user_connections.end()) {auto target_ws = user_connections[target];target_ws->text(true);  // 发送文件元数据target_ws->write(net::buffer(message));beast::flat_buffer file_buffer;  // 准备接收文件内容的缓冲区ws->read(file_buffer);  // 从发送者处读取文件内容target_ws->binary(true);  // 设置为二进制消息target_ws->write(file_buffer.data());  // 将文件内容转发给目标用户}}}} catch (std::exception const& e) {  // 捕获并处理异常std::cerr << "WebSocket Error: " << e.what() << std::endl;  // 打印错误信息}// 清理连接，确保在连接断开时从用户列表中移除用户std::lock_guard<std::mutex> lock(connections_mutex);if (!current_user.empty()) {user_connections.erase(current_user);  // 从连接映射中移除当前用户}
}// 程序入口
int main(int argc, char* argv[]) {try {cppcms::service app(argc, argv);  // 创建CppCMS服务对象// 启动WebSocket服务器线程std::thread websocket_thread([]() {net::io_context ioc{1};  // 创建IO上下文对象tcp::acceptor acceptor{ioc, tcp::endpoint(tcp::v4(), 8081)};  // 创建TCP接受器，监听8081端口for (;;) {  // 无限循环，处理每个新的连接auto socket = std::make_shared<websocket::stream<tcp::socket>>(ioc);acceptor.accept(socket->next_layer());  // 接受新的TCP连接，并将其提升为WebSocket连接std::thread(&do_session, socket).detach();  // 为每个连接启动一个新的会话线程}});// 启动CppCMS服务app.applications_pool().mount(cppcms::applications_factory<blog>());  // 将博客应用挂载到服务池中app.run();  // 运行服务websocket_thread.join();  // 等待WebSocket线程结束} catch (std::exception const &e) {  // 捕获并处理异常std::cerr << "Error: " << e.what() << std::endl;  // 打印错误信息return EXIT_FAILURE;  // 以失败状态退出程序}
}

说明：WebSocket服务端口：8081，CppCMS服务端口：8080

5. blog.h

#ifndef BLOG_H
#define BLOG_H
#include <cppcms/application.h>
#include <cppcms/http_response.h>
#include <cppcms/url_dispatcher.h>
#include <cppcms/url_mapper.h>
#include <fstream>
class blog : public cppcms::application {
public:blog(cppcms::service &srv);void index();
private:void serve_html(const std::string &path);};
#endif

6. blog.cpp

#include "blog.h"blog::blog(cppcms::service &srv) : cppcms::application(srv) {dispatcher().map("GET", "/", &blog::index, this);
}void blog::index() {serve_html("./views/index.html");
}void blog::serve_html(const std::string &path) {std::ifstream file(path);if (file.is_open()) {std::string content((std::istreambuf_iterator<char>(file)), std::istreambuf_iterator<char>());response().out() << content;} else {response().status(404);response().out() << "Page not found";}
}

7. index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>File Transfer and Chat</title><!-- 引入 Vue.js 和 Element-UI (包含图标支持) --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.9/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.9/lib/index.js"></script>
</head>
<body><div id="app"><el-container><el-header><h2>实时聊天与文件传输</h2></el-header><el-main><el-row :gutter="20"><el-col :span="6"><el-select v-model="selectedUser" placeholder="选择一个用户" style="width: 100%;"><el-optionv-for="user in users":key="user":label="user":value="user"></el-option></el-select></el-col></el-row><el-row><el-col :span="24"><div id="chatbox" class="chatbox"><el-card v-for="(msg, index) in messages" :key="index" class="box-card"><p><strong>{{ msg.sender }}:</strong><!-- 图片预览 --><template v-if="msg.isImage">{{ msg.content }} <br><img :src="msg.url" alt="Image Preview" style="max-width: 100px; max-height: 100px;"></template><!-- 文件下载链接 --><template v-else>{{ msg.content }} <a :href="msg.url" :download="msg.filename" style="color: blue; text-decoration: underline;">{{ msg.filename }}</a></template></p><p style="font-size: 0.85em; color: #888;">{{ formatDate(msg.timestamp) }}</p></el-card></div></el-col></el-row><el-row><el-col :span="18"><el-input placeholder="输入消息..." v-model="newMessage" @keyup.enter.native="sendMessage"></el-input></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-send" @click="sendMessage">发送</el-button></el-col></el-row><el-row style="margin-top: 20px;"><el-col :span="18"><el-uploadclass="upload-demo"dragaction="":auto-upload="false":on-change="handleFileChange":file-list="fileList"><i class="el-icon-upload"></i><div class="el-upload__text">拖拽文件到此或点击上传</div></el-upload></el-col><el-col :span="6"><el-button type="success" icon="el-icon-upload2" @click="sendFile">发送文件</el-button></el-col></el-row></el-main></el-container></div><script>new Vue({el: '#app',data() {return {ws: null,users: [],selectedUser: null,currentUser: null,newMessage: '',messages: [],fileList: [],pendingFileMessages: [] // 用于存储尚未处理的文件元数据};},mounted() {this.currentUser = prompt("请输入您的用户名：");this.ws = new WebSocket("ws://192.168.186.77:8081");this.ws.onopen = () => {const initMessage = {type: "init",username: this.currentUser};this.ws.send(JSON.stringify(initMessage));};this.ws.onmessage = (event) => {try {const data = JSON.parse(event.data);if (data.type === 'user_list') {this.users = data.users.filter(user => user !== this.currentUser);} else if (data.type === 'message' || data.type === 'metadata') {data.timestamp = new Date();if (data.type === 'metadata') {this.pendingFileMessages.push(data); // 存储文件元数据} else {this.messages.push(data);}}} catch (error) {// 如果解析失败，可能是Blob数据if (event.data instanceof Blob) {this.handleFileData(event.data);} else {console.error("消息解析失败：", error);}}};},methods: {sendMessage() {if (this.newMessage.trim() && this.selectedUser) {const message = {type: "message",sender: this.currentUser,target: this.selectedUser,content: this.newMessage,timestamp: new Date() // 增加时间戳};this.ws.send(JSON.stringify(message));this.messages.push(message);this.newMessage = '';}},handleFileChange(file, fileList) {this.fileList = fileList;},sendFile() {if (this.fileList.length && this.selectedUser) {const file = this.fileList[0].raw;const reader = new FileReader();reader.onload = (event) => {const metadata = {type: "metadata",sender: this.currentUser,target: this.selectedUser,filename: file.name,filesize: file.size,timestamp: new Date().toISOString() // 增加时间戳};this.ws.send(JSON.stringify(metadata));// 立即显示文件信息const message = {sender: this.currentUser,content: ``,isImage: this.isImageFile(file.name),url: this.isImageFile(file.name) ? URL.createObjectURL(file) : '',filename: file.name, // 保存文件名timestamp: new Date() // 增加时间戳};this.messages.push(message);this.ws.send(event.target.result);};reader.readAsArrayBuffer(file);this.fileList = [];}},handleFileData(blobData) {// 处理文件数据时，检查是否有待处理的文件元数据if (this.pendingFileMessages.length > 0) {const metadata = this.pendingFileMessages.shift(); // 取出第一个元数据const url = URL.createObjectURL(blobData);const lastMessage = {sender: metadata.sender,content: ``,isImage: this.isImageFile(metadata.filename),url: url,filename: metadata.filename, // 保存文件名timestamp: metadata.timestamp};// 更新消息中的图片URL或生成下载链接if (lastMessage.isImage) {lastMessage.content = ``;} else {lastMessage.content = ``;}this.messages.push(lastMessage); // 将消息加入消息列表} else {console.error("未找到合适的文件元数据来处理文件数据。");}},isImageFile(filename) {return /\.(jpeg|jpg|gif|png|svg)$/i.test(filename);},formatDate(date) {const d = new Date(date);const year = d.getFullYear();const month = ('0' + (d.getMonth() + 1)).slice(-2);const day = ('0' + d.getDate()).slice(-2);const hours = ('0' + d.getHours()).slice(-2);const minutes = ('0' + d.getMinutes()).slice(-2);const seconds = ('0' + d.getSeconds()).slice(-2);return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;}}});</script><style>.chatbox {height: 300px;overflow-y: scroll;border: 1px solid #ddd;padding: 10px;margin-bottom: 20px;}.el-upload__input {display: none !important;}</style>
</body>
</html>

8. 测试验证

8.1 启动项目

cmake ./
make
./c_web -c ./config.json

说明：如果你想结束，请查询8081的PID，进行端口查杀kill -9 PID。

8.2 测试准备

访问：http://192.168.186.77:8080/

注意：IPv4需要切换为你本机IP。

说明：模拟用户数量：2，本案例是：admin和guest。

说明：聊天之前，先选择用户。

8.3 实时聊天

说明：左边是guest用户，右边是admin用户。

8.4 文件传输

说明：guest发送了一张图片给admin用户。

说明：admin发送了一个docx文件给guest。

说明：用户点击链接可以进行下载，下载不安全的原因是因为这是一个http而不是https。控制台描述：192.168.186.77/:1 The file at ‘blob:http://192.168.186.77:8080/997dc48a-83c2-4992-8ad3-960e7a51e74f’ was loaded over an insecure connection. This file should be served over HTTPS.

9. 总结

​ 只是实现了简单的实时聊天和文件传输，并没有严格的会话窗口区分，比如说如果A发送消息给B，C又发送给B，那么B窗口会同时显示A和C的消息，基于Booster库的Websocket实现简单案例。