如何将基于Boost库的C++ WebSocket代码转为WebAssembly并正常运行

一、Emscripten适配方案（优先推荐） #

Emscripten是C++转Wasm最成熟的工具链，虽原生WebSocket模块与Boost Beast不兼容，但可通过编译适配版Boost库+异步代码改造复用现有逻辑。

1. 编译适配Emscripten的Boost库 #

Boost 1.70+开始支持Emscripten，用Emscripten工具链编译Asio和Beast核心模块：

# 激活Emscripten环境
source emsdk_env.sh
# 编译指定Boost模块
./b2 toolset=emscripten link=static variant=release threading=single \
    define=BOOST_ASIO_HAS_EMSCRIPTEN \
    --with-system --with-beast --with-thread

2. 修改代码适配异步模型 #

浏览器环境禁止主线程阻塞，需将原同步逻辑改为异步回调模式，通过Emscripten主循环驱动Boost Asio的IO上下文：

#include <iostream>
#include <string>
#include <boost/asio.hpp>
#include <boost/beast.hpp>
#include <emscripten.h>

namespace asio = boost::asio;
namespace beast = boost::beast;
namespace websocket = beast::websocket;
using tcp = asio::ip::tcp;

asio::io_context io_context;
websocket::stream<tcp::socket> websocket_stream{io_context};
const std::string msg = "Hello World!";

// 循环驱动Asio IO上下文
void run_io() {
    io_context.poll_one();
    emscripten_set_timeout(run_io, 0);
}

// 连接关闭回调
void on_close(beast::error_code ec) {
    if (ec) std::cerr << "Close failed: " << ec.message() << std::endl;
}

// 消息发送完成回调
void on_write(beast::error_code ec, std::size_t bytes_sent) {
    if (ec) {
        std::cerr << "Write failed: " << ec.message() << std::endl;
        return;
    }
    websocket_stream.async_close(websocket::close_code::normal, on_close);
}

// WebSocket握手完成回调
void on_handshake(beast::error_code ec) {
    if (ec) {
        std::cerr << "Handshake failed: " << ec.message() << std::endl;
        return;
    }
    websocket_stream.async_write(asio::buffer(msg), on_write);
}

// TCP连接成功回调
void on_connect(beast::error_code ec, tcp::endpoint) {
    if (ec) {
        std::cerr << "Connect failed: " << ec.message() << std::endl;
        return;
    }
    // 设置请求UA头
    websocket_stream.set_option(websocket::stream_base::decorator(
        [](websocket::request_type& req) {
            req.set(beast::http::field::user_agent,
                std::string(BOOST_BEAST_VERSION_STRING) + " websocket-client-emscripten");
        }));
    websocket_stream.async_handshake("127.0.0.1:3333", "/", on_handshake);
}

// 域名解析完成回调
void on_resolve(beast::error_code ec, tcp::resolver::results_type results) {
    if (ec) {
        std::cerr << "Resolve failed: " << ec.message() << std::endl;
        return;
    }
    asio::async_connect(websocket_stream.next_layer(), results, on_connect);
}

int main() {
    try {
        tcp::resolver resolver{io_context};
        resolver.async_resolve("127.0.0.1", "3333", on_resolve);
        // 启动IO循环
        emscripten_set_timeout(run_io, 0);
    } catch (const std::exception& e) {
        std::cerr << "Error: " << e.what() << std::endl;
        return -1;
    }
    // 保持Wasm Runtime活跃
    emscripten_exit_with_live_runtime();
    return 0;
}

3. 编译命令 #

em++ -std=c++17 -DBOOST_ASIO_HAS_EMSCRIPTEN -DBOOST_ASIO_DISABLE_SIGNAL_SET \
    -I/path/to/boost/include \
    -L/path/to/boost/lib \
    -lboost_system -lboost_thread \
    -s USE_BOOST=1 \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s EXIT_RUNTIME=0 \
    -s MODULARIZE=1 \
    -s EXPORT_NAME="WebSocketClient" \
    -o websocket_client.js websocket_client.cpp

关键参数说明：

• -DBOOST_ASIO_HAS_EMSCRIPTEN：启用Asio的Emscripten适配逻辑
• -s USE_BOOST=1：告知Emscripten自动处理Boost库链接
• -s EXIT_RUNTIME=0：避免程序执行完main后直接退出
• -s MODULARIZE=1：生成可在浏览器中导入的模块化Wasm代码

二、WASI环境实现思路（生态不成熟） #

WASI目前无原生WebSocket标准接口，若要复用Boost Beast代码，需完成以下工作：

• 编译Boost为WASI目标：使用WASI SDK工具链编译Boost Asio和Beast，需启用Asio对WASI预览版sockets提案的支持。
• 适配WASI Socket接口：为Boost Asio实现自定义Socket类，对接WASI的sockets扩展接口，让Boost Beast能基于WASI TCP Socket处理WebSocket协议。
• 宿主Runtime扩展：部分WASI Runtime（如Wasmtime）支持自定义宿主函数，可在宿主侧实现WebSocket逻辑，再通过C++绑定暴露给Boost代码调用。

注意：当前WASI环境下的C++ WebSocket案例极少，需参考Rust实现思路手动封装适配层，开发成本较高。

内容的提问来源于stack exchange，提问作者amelian