C/WebAssembly开发中如何从Worker发送消息并在JS主线程捕获

你的实现思路完全正确。Web Worker和主线程是隔离的执行上下文，本身无法直接共享主线程的Module对象，通过postMessage做跨上下文通信是标准实现路径。另外你不需要手动替换C代码中所有stdout相关调用，Emscripten自带标准输出拦截钩子，可以自动捕获所有C标准库的输出（printf/puts/fprintf(stdout, ...)等），改造成本极低。

• Worker层：加载Emscripten编译的WASM模块，通过配置钩子拦截stdout/stderr输出，通过postMessage把输出内容发送给主线程
• 主线程层：初始化xterm.js实例，监听Worker消息，把收到的输出内容写入终端渲染
• 编译层：加对应Emscripten编译参数，生成适配Worker环境的模块化WASM加载器

不需要修改原有C业务代码，编译时加以下参数即可：

emcc your_app.c -o wasm_worker.js \
  -s EXPORT_ES6=1 \
  -s MODULARIZE=1 \
  -s ENVIRONMENT='worker' \
  -s FILESYSTEM=0 \
  -s ALLOW_BLOCKING_ON_MAIN_THREAD=0

说明：不要加-s PROXY_TO_WORKER这类自动代理参数，自行控制Worker加载逻辑灵活度更高，后续对接输入、退出逻辑也更方便。如果需要用到文件系统相关功能，把FILESYSTEM=0去掉就行。

Worker初始化WASM模块时直接传入print/printErr回调拦截输出，不需要访问全局Module对象。
新建wasm.worker.js文件，代码如下：

import loadWasmModule from './wasm_worker.js';

let wasmInstance = null;

async function init() {
  wasmInstance = await loadWasmModule({
    // 拦截所有标准输出
    print: (outputText) => {
      self.postMessage({
        type: 'stdout',
        data: outputText
      });
    },
    // 拦截所有错误输出
    printErr: (errorText) => {
      self.postMessage({
        type: 'stderr',
        data: errorText
      });
    }
  });
  // 执行main函数，长驻逻辑会在这里阻塞直到用户触发退出
  wasmInstance.callMain();
  // main执行完成后发送退出通知
  self.postMessage({ type: 'exit' });
}

init();

// 预留stdin输入消息监听，后续做输入功能时使用
self.addEventListener('message', (e) => {
  const { type, data } = e.data;
  if (type === 'stdin') {
    // 后续在这里把输入内容写入WASM的stdin流即可
  }
});

这里不需要手动替换C代码输出逻辑的原因是：Emscripten的libc实现会自动把所有标准IO流的内容路由到传入的print回调，不管你用哪种C标准输出函数，都能被统一捕获，比逐行改业务代码可靠性高很多。注意print回调拿到的文本默认不带末尾换行，主线程渲染时可以根据需要补换行，和原生终端行为对齐。

主线程初始化终端和Worker实例，监听消息并渲染输出：

import { Terminal } from 'xterm';
import 'xterm/css/xterm.css';

// 初始化xterm终端
const term = new Terminal({
  cols: 80,
  rows: 24,
  convertEol: true // 自动把\n转成\r\n，适配终端换行逻辑
});
term.open(document.querySelector('#terminal-mount-point'));

// 初始化WASM Worker
const wasmWorker = new Worker(new URL('./wasm.worker.js', import.meta.url), {
  type: 'module'
});

// 监听Worker消息处理输出
wasmWorker.addEventListener('message', (e) => {
  const { type, data } = e.data;
  switch(type) {
    case 'stdout':
      term.writeln(data);
      break;
    case 'stderr':
      // 错误输出加红色样式，方便区分
      term.write(`\x1b[31m${data}\x1b[0m\r\n`);
      break;
    case 'exit':
      term.writeln('\r\n** 程序已退出 **');
      wasmWorker.terminate();
      break;
  }
});

• 不要尝试在Worker和主线程之间传递Module对象、WASM内存引用这类非结构化数据，两个执行上下文完全隔离，直接传递序列化后的字符串内容即可
• 如果遇到输出被拆成多段传递的情况是正常现象，Emscripten会按stdout缓冲区刷新时机触发print回调，xterm的write/writeln方法支持分段写入，不会出现乱序问题
• 如果有高频连续输出场景，可以在Worker端加个简单的时间缓冲，攒10-20ms的输出内容一次性postMessage，能减少跨上下文通信开销，对输出体验无明显影响
• 后续实现输入功能时，只要监听xterm的用户输入事件，把输入内容通过postMessage发给Worker，Worker内调用WASM实例的FS接口往stdin文件描述符写入内容即可，不需要修改原有C代码的输入逻辑

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