websocket实现教学屏幕共享的关键在于同步编辑状态与指令，而非视频流；通过轻量操作消息同步代码变更、光标、折叠等状态，结合角色权限控制、执行结果实时回传及断线重连机制，达成毫秒级协同编程体验。
WebSocket 是实现网页端实时双向通信的核心技术，用它做编程教学的屏幕共享互动，关键不在“共享画面”，而在于“同步编辑状态”和“实时指令传递”。直接传输视频流成本高、延迟大，教学场景真正需要的是代码编辑、光标位置、执行结果、学生提问等结构化数据的毫秒级同步。
用 WebSocket 同步编辑状态，而非截图推流
多人协同编程不需要 WebRTC 推送桌面视频。真实可行的做法是：所有客户端连接同一个 WebSocket 服务，共用一个“逻辑文档”（如 CodeMirror 或 Monaco 编辑器的 model）。
- 教师端每次按键、选中、折叠/展开代码块，都序列化为轻量操作（如 {type: "change", from: 12, to: 15, text: "let x = 5;"}），发给服务端
- 服务端不做内容处理，仅广播该操作给所有学生端（可按房间 ID 过滤）
- 学生端收到后，调用编辑器的 applyChange() 方法还原修改，保持与教师完全一致的编辑状态
- 光标位置、折叠状态、高亮行等也通过类似结构同步（如 {type: "cursor", line: 8, ch: 4}）
支持多角色控制权与指令隔离
教学中需区分“主讲人”和“观察者”，避免学生误操作干扰课堂。WebSocket 消息需携带角色标识和权限上下文：
- 服务端维护每个连接的 role: "teacher" | "student" 和 isLocked: true/false
- 教师发送编辑指令时，服务端只转发给学生；学生发送的编辑指令默认被丢弃，除非教师主动开启“协作模式”并下发 {type: "grantEdit", userId: "s102"}
- 每条消息带 timestamp 和 clientId，用于冲突检测（如两个学生同时申请编辑，按时间戳顺序排队或拒绝后到者）
执行反馈与终端输出的实时回传
学生点击“运行”后，代码在服务端沙箱执行（如 Docker 容器或 WASM 解释器），结果不走 HTTP，而是通过同一 WebSocket 连接返回：
- 前端发送 {type: "run", code: "console.log(1+1);", lang: "js"}
- 服务端启动执行，将 stdout/stderr/exitCode 封装为 {type: "result", id: "req_abc123", output: "2\n", error: "", status: "success"}
- 该消息按连接所属房间广播，教师和对应学生同时看到相同输出，支持滚动定位、语法高亮渲染
- 超时、OOM、编译失败等异常也统一用结构化字段返回，便于前端做 UI 提示（如红色弹窗 + 行号定位）
补充体验细节提升教学可用性
纯 WebSocket 只解决通信，教学体验还依赖前端配合：
- 教师端显示所有学生头像+在线状态+当前光标位置（小箭头悬停显示昵称），用 Canvas 或绝对定位 DOM 实现，不走 WebSocket 传图
- 学生提问用 {type: "question", text: "为什么这里报 ReferenceError?"} 发送，教师点击“回答”后广播 {type: "answer", qid: "...", text: "因为 var 声明有变量提升..."}
- 网络中断时，前端缓存最近 20 条操作，重连后先发 {type: "sync", revision: 142} 请求服务端补发缺失变更，避免状态错乱
不复杂但容易忽略：WebSocket 连接要加心跳保活（每 30 秒 send ping），服务端用 ping/pong 帧检测断连；路径路由建议按 /ws/classroom/{roomId} 设计，方便 Nginx 或云网关做负载分片；敏感操作（如执行 shell 命令）必须在服务端严格白名单校验，绝不可信任前端传来的任何代码字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
