websocket实现网页ide实时编译输出的核心是边编译边推送：服务端用spawn捕获stdout/stderr流，按行分割后逐条推送；前端通过websocket接收并增量渲染，滚动到底部，错误行高亮显示。
用 WebSocket 实现网页版 IDE 的实时编译结果流式输出，核心在于：服务端边编译边推送日志，前端逐条接收、追加渲染，不等待整个编译结束。关键不是“传完再显示”，而是“边产边播”。
服务端：启动编译进程并实时捕获 stdout/stderr
以 Node.js（Express + child_process）为例，需避免缓冲导致延迟：
- 使用
spawn（非exec），因spawn返回流式子进程对象，可监听stdout和stderr的data事件 - 设置子进程选项
{ stdio: ['pipe', 'pipe', 'pipe'], shell: true }，确保输出可读流化 - 对每段
data（Buffer），转为字符串后按行分割（data.toString().split(/\r\n|\r|\n/)），过滤空行，逐行通过 WebSocket 发送给客户端 - 编译结束后，发送特殊标记如
{"type":"done","exitCode":0}，便于前端终止等待逻辑
前端：建立 WebSocket 并增量渲染日志
HTML 中预留日志容器（如 <pre class="brush:php;toolbar:false;" id="log-output"></pre>），JS 中：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 创建 WebSocket 连接（
new WebSocket('ws://localhost:3000/compile')），建议加重连机制 - 在
onmessage回调中解析消息：event.data若为字符串则直接JSON.parse；若含日志行，提取line字段或纯文本内容 - 每次收到新行，执行
logEl.textContent += line + '\n'; logEl.scrollTop = logEl.scrollHeight;，保持滚动到底部 - 可对不同来源加样式：例如
stderr行用红色，用<span class="error">...</span>包裹后插入innerHTML（注意 XSS，需简单转义）
健壮性补充：防止阻塞与异常中断
真实场景中需处理边界情况：
- 服务端超时控制：编译超过 30 秒自动 kill 子进程，返回超时消息
- 前端防重复连接：点击“运行”时先检查
ws.readyState === WebSocket.OPEN，否则新建；关闭前调用ws.close() - 断网重连：监听
onclose，延迟 1–2 秒后尝试重建连接，并提示用户“正在重连…” - 日志量过大时，限制最大行数（如只保留最近 1000 行），避免 DOM 膨胀卡顿
安全与部署注意点
生产环境不可忽略：
- WebSocket 路由需鉴权（如校验 JWT 或 session），禁止未登录用户触发编译
- 服务端执行的命令必须白名单控制（如仅允许
gcc -x c -o /tmp/a.out -或python3 -c "..."），禁用任意 shell 命令拼接 - Nginx 反向代理 WebSocket 时，需显式配置升级头：
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; - 编译进程应运行在隔离沙箱（如 Docker 容器或 user namespace），限制 CPU、内存、磁盘和网络访问
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
