从 0 到 1 掌握前端技术

1.3 实战演示：表单与验证

2.2 Flexbox 演示（可调）

2.3 Grid 网格布局

.grid-stage {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "a a"
    "b c"
    "d d";
}

2.4 动画与过渡

原理：transform 与 opacity 由合成线程处理，不触发重排，性能最佳。

3.2 闭包（Closure）

函数与其词法作用域的组合。即使外部函数已返回，内部函数仍能访问其变量。

function counter() {
  let n = 0;
  return () => ++n;
}
const inc = counter();
inc(); // 1
inc(); // 2

3.4 事件循环（Event Loop）

同步代码 → 微任务（Promise.then / queueMicrotask）→ 宏任务（setTimeout / I/O）→ 渲染 → 下一轮。

3.5 异步：Promise & async/await

async function loadUser(id) {
  const res = await fetch('/api/user/' + id);
  if (!res.ok) throw new Error('Network');
  return res.json();
}

3.6 防抖 & 节流

移动鼠标查看触发次数，对比效果：

4.4 用原生 JS 实现一个迷你响应式

双向绑定输入框：

实时输出：

function reactive(obj, onChange) {
  return new Proxy(obj, {
    set(t, k, v) { t[k] = v; onChange(k, v); return true; }
  });
}
const state = reactive({ msg: '' }, (k, v) => render(v));

6.3 实测：requestAnimationFrame 帧率监测

7.1 WebSocket — 全双工实时通信

基于 TCP 的持久化双向协议，握手通过 HTTP Upgrade 完成，之后客户端与服务器均可主动推送消息， 典型场景：聊天、协同编辑、实时行情、游戏同步。

const ws = new WebSocket('wss://echo.example.com');

ws.onopen    = () => ws.send('hello');
ws.onmessage = (e) => console.log('收到：', e.data);
ws.onclose   = () => console.log('连接关闭');
ws.onerror   = (err) => console.error(err);

下方演示使用本地模拟服务端（Promise + setTimeout），离线也能体验消息往返：

对比：HTTP 轮询（高延迟、资源浪费）→ 长轮询 → SSE（服务端单向推送）→ WebSocket（双向实时）。

7.2 Server-Sent Events (SSE) — 服务端单向推送

基于 HTTP，服务器持续向客户端推送 text/event-stream。比 WebSocket 简单， 自动断线重连。AI 流式输出（如 ChatGPT 打字效果）就是典型应用。

const es = new EventSource('/api/stream');
es.onmessage = (e) => console.log(e.data);
es.addEventListener('done', () => es.close());

7.3 Web Workers — 浏览器多线程

JavaScript 主线程负责 UI 与脚本，耗时计算会卡顿页面。Worker 在独立线程运行，通过 postMessage 与主线程通信，无 DOM 访问权限。

// main.js
const worker = new Worker('/worker.js');
worker.postMessage(40);
worker.onmessage = (e) => console.log('结果：', e.data);

// worker.js
self.onmessage = (e) => {
  const fib = (n) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
  self.postMessage(fib(e.data));
};

对比时观察右上角小球是否依然丝滑：

7.6 Canvas — 像素级绘图

<canvas> 通过 JS 绘制 2D / 3D 图形。下方为粒子动画演示（点击切换）：

WebGL / WebGPU：在 Canvas 之上提供 GPU 加速 API，是 Three.js、Babylon.js、Unity Web 的底层。 WebGPU（2023 起）是更现代、更接近 Vulkan/Metal 的下一代标准。

7.7 Web Components — 浏览器原生组件化

三大基石：Custom Elements（自定义元素）、Shadow DOM（样式封装）、HTML Templates。 无需框架即可写出可复用、样式隔离的组件。

class FancyBtn extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>button{padding:8px 16px;border-radius:8px;}</style>
      <button><slot></slot></button>`;
  }
}
customElements.define('fancy-btn', FancyBtn);

真实的自定义元素（已注册）：

7.8 浏览器存储全景

下方使用 localStorage 演示笔记持久化（刷新仍在）：

已保存：--

7.9 File API & 拖拽上传

支持 FileReader、Blob、URL.createObjectURL，无需上传即可在前端预览图片。

7.11 视频通话 — 媒体捕获 + WebRTC + WebSocket 信令

视频通话由三件套协作完成：

• 📹 getUserMedia：调用摄像头/麦克风，拿到 MediaStream
• 🔗 WebRTC（RTCPeerConnection）：在两端建立 P2P 媒体通道，自动处理编解码、丢包、抖动、NAT 穿透
• 📡 WebSocket（信令）：交换 SDP（offer/answer）与 ICE candidate，建连后媒体流不经服务器

协议交互流程

1. 双方用 getUserMedia 获取本地音视频轨道
2. A 创建 RTCPeerConnection → createOffer() → 通过 WS 把 SDP 发给 B
3. B 收到 offer → setRemoteDescription → createAnswer() → 回传 SDP
4. 双方互相通过 WS 推送 icecandidate，直到找到最佳网络路径
5. 连通后通过 ontrack 拿到对端 MediaStream，挂到 <video> 即可

// === 1. 采集媒体 ===
const localStream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720, facingMode: 'user' },
  audio: { echoCancellation: true, noiseSuppression: true },
});
localVideo.srcObject = localStream;

// === 2. 建立连接（含 STUN/TURN） ===
const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
});

// 把本地轨道加入连接
localStream.getTracks().forEach((t) => pc.addTrack(t, localStream));

// 收到对端轨道
pc.ontrack = (e) => (remoteVideo.srcObject = e.streams[0]);

// 收集 ICE 候选并通过信令发出去
pc.onicecandidate = (e) => {
  if (e.candidate) signaling.send({ type: 'ice', candidate: e.candidate });
};

// === 3. WebSocket 信令 ===
const signaling = new WebSocket('wss://your-server/signal');
signaling.onmessage = async ({ data }) => {
  const msg = JSON.parse(data);
  if (msg.type === 'offer') {
    await pc.setRemoteDescription(msg.sdp);
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    signaling.send({ type: 'answer', sdp: answer });
  } else if (msg.type === 'answer') {
    await pc.setRemoteDescription(msg.sdp);
  } else if (msg.type === 'ice') {
    await pc.addIceCandidate(msg.candidate);
  }
};

// 主叫方发起
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
signaling.send({ type: 'offer', sdp: offer });

实战演示（本地回环 P2P）

下方在同一页面建立两个 RTCPeerConnection 互连，把摄像头画面通过真实的 WebRTC 链路传到「远端」窗口。 首次点击会请求摄像头权限。
⚠️ 浏览器要求 HTTPS 或 localhost 才能调用摄像头。

关键知识点

7.12 多人会议 — SFU 中转架构

上一节的 P2P 只适合 1v1 或最多 3 人。人数变多时，每人都要把自己的流上传给 (N-1) 个人， 上行带宽呈 O(N²) 爆炸。生产级多人会议必须走中转服务器。

三种架构对比

SFU 协议流程

1. 每个参会者通过 WebSocket 连到信令服务器，发送 join(roomId)
2. 服务器返回当前房间成员列表
3. 参会者与 SFU 建立一条 RTCPeerConnection：
   • 上行 (publish)：把本地轨道 addTrack 给 SFU
   • 下行 (subscribe)：SFU 把其他成员的轨道 addTrack 推给自己
4. 有人加入/离开时，SFU 通过 WS 通知所有人，动态 addTrack / removeTrack
5. 离开时关闭 PC，停止轨道

// 参会者侧伪代码
const ws = new WebSocket('wss://sfu.example/ws');
const pc = new RTCPeerConnection({ iceServers: [...] });

ws.onopen = () => ws.send(JSON.stringify({ cmd: 'join', room: 'R-1', uid }));

ws.onmessage = async ({ data }) => {
  const msg = JSON.parse(data);
  switch (msg.cmd) {
    case 'peer-join':
      await subscribe(msg.uid);   // 订阅新成员的流
      break;
    case 'peer-leave':
      removeVideo(msg.uid);       // 清理 UI
      break;
    case 'answer':
      await pc.setRemoteDescription(msg.sdp);
      break;
  }
};

// 上行：发布自己
localStream.getTracks().forEach((t) => pc.addTrack(t, localStream));
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
ws.send(JSON.stringify({ cmd: 'publish', sdp: offer }));

// 下行：收到别人的轨道时渲染
pc.ontrack = (e) => renderTile(e.streams[0], e.track.id);

实战演示（模拟 SFU Hub）

下方在本页面内用一个 SfuHub 纯 JS 类模拟中转服务器：真实摄像头只打开一份（ getUserMedia），然后通过 Hub "分发"给多个虚拟参会者，每个参会者独立渲染一个画面格。 真实项目里把 Hub 替换成 mediasoup/Janus/LiveKit 服务端即可。

生产级要点

7.13 WebRTC 深度解析 — 协议栈 / DataChannel / 质量监控

WebRTC 不是一个 API，而是一整套实时通信协议栈。它把复杂的音视频采集、编解码、 网络传输、NAT 穿透、加密、QoS 全部封装成三个核心对象： MediaStream、RTCPeerConnection、RTCDataChannel。

协议栈全景

┌──────────────────────────────────────────────────┐
│  JavaScript API：getUserMedia / RTCPeerConnection │
├──────────────────────────────────────────────────┤
│       SRTP（加密音视频）     │    SCTP（数据）     │
├──────────────────────────────────────────────────┤
│              DTLS（密钥协商 / 加密）               │
├──────────────────────────────────────────────────┤
│    ICE（候选枚举）  +  STUN（打洞）  +  TURN（中继） │
├──────────────────────────────────────────────────┤
│                        UDP                        │
└──────────────────────────────────────────────────┘

• ICE：综合调度 STUN/TURN，产出可达的"候选对"
• DTLS：握手生成密钥；SRTP/SCTP 基于它加密
• 音视频走 SRTP；任意数据走 SCTP（DataChannel）
• WebRTC 默认全程 E2E 加密，无法关闭

NAT 类型与穿透成功率

经验值：纯 STUN ≈ 70%~80%，加 TURN 可达 99%+，生产必须部署 TURN。

RTCDataChannel — 被忽视的利器

同一条 PeerConnection 上可开多个 DataChannel，用于任意二进制/文本数据。 相比 WebSocket 的优势：

• ✅ P2P：数据不过服务器，零延迟、零费用
• ✅ 可选 UDP 或 TCP 语义：游戏用 unordered + maxRetransmits=0，文件用 ordered reliable
• ✅ 默认加密（DTLS-SRTP）
• ⚠️ 受 MTU 限制（~16KB），大文件需分片

// 创建可靠有序（默认，类似 TCP）
const chat = pc.createDataChannel('chat');

// 游戏用 "不可靠+无序"（类似 UDP，延迟最低）
const game = pc.createDataChannel('game', {
  ordered: false,
  maxRetransmits: 0,
});

chat.onopen    = () => chat.send('hi');
chat.onmessage = (e) => console.log('收到：', e.data);

// 发二进制
const ab = new Uint8Array([1, 2, 3]).buffer;
chat.send(ab);

实战 A：DataChannel P2P 聊天 & 文件传输

在同页面建立 dcA ↔ dcB，通过 DataChannel 传输文本和文件（自动分片）。 真实场景下这就是协同编辑、游戏同步、WebRTC 网盘（如 snapdrop.net）的底层。

实战 B：实时质量监控（getStats API）

生产级 WebRTC 必须监控 pc.getStats()，用来观察：RTT、丢包率、抖动、码率、帧率、分辨率。 下方面板每秒采样一次并折线展示：

💡 getStats() 返回的是 RTCStatsReport（Map）。 常用 type：inbound-rtp、outbound-rtp、candidate-pair、remote-inbound-rtp。

实战 C：MediaRecorder 本地录制

WebRTC 的 MediaStream 可直接交给 MediaRecorder 编码成 webm 文件， 实现"本地录制"而无需走服务端，广泛用于在线面试录像、Loom 式屏幕录制。

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' });
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  // 触发下载
};
recorder.start(1000); // 每 1s 触发一次 ondataavailable

安全 / 合规关键点

7.14 现代 Web API 实战集 — 12 个让网页像原生 App 的能力

浏览器正在加速补齐"原生应用才有"的能力：底层网络、编解码、硬件、支付、认证、XR…… 下面每个 API 都配能力检测 + 代码示例 + 实测按钮。 ⚠️ 部分 API 仅在 Chrome / Edge 支持，Firefox/Safari 会显示"未支持"。

const wt = new WebTransport('https://example.com/wt');
await wt.ready;

// 1) 不可靠数据报（游戏状态同步）
const writer = wt.datagrams.writable.getWriter();
writer.write(new Uint8Array([1, 2, 3]));

// 2) 可靠双向流（大文件/信令）
const stream = await wt.createBidirectionalStream();
const w = stream.writable.getWriter();
w.write(new TextEncoder().encode('hello'));

const decoder = new VideoDecoder({
  output: (frame) => {
    canvasCtx.drawImage(frame, 0, 0);
    frame.close(); // 必须手动释放！
  },
  error: (e) => console.error(e),
});
decoder.configure({ codec: 'vp09.00.10.08' });
decoder.decode(chunk);

--

// fib.wat 编译后加载
const { instance } = await WebAssembly.instantiate(wasmBytes);
instance.exports.fib(30); // ~1ms vs JS 10ms

--

await navigator.locks.request('auth-token', async (lock) => {
  // 此块代码同一 origin 下同时只有一个在执行
  const token = await refreshToken();
  localStorage.setItem('token', token);
});

--

const req = new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  {
    total: { label: '订单', amount: { currency: 'CNY', value: '99.00' } },
  }
);
const response = await req.show();
await response.complete('success');

// 注册（生成密钥对）
const cred = await navigator.credentials.create({
  publicKey: {
    challenge,
    rp: { name: 'My App' },
    user: { id, name: 'zhangke', displayName: 'ZK' },
    pubKeyCredParams: [{ type: 'public-key', alg: -7 }],
  },
});
// 登录（验证签名）
await navigator.credentials.get({ publicKey: { challenge } });

--

{
  "file_handlers": [{
    "action": "/open",
    "accept": { "text/markdown": [".md"] }
  }]
}

if ('launchQueue' in window) {
  launchQueue.setConsumer(async (launchParams) => {
    for (const handle of launchParams.files) {
      const file = await handle.getFile();
      editor.setValue(await file.text());
    }
  });
}

const idle = new IdleDetector();
idle.addEventListener('change', () => {
  console.log(idle.userState, idle.screenState);
  // active / idle          unlocked / locked
});
await idle.start({ threshold: 60_000 });

// 写入富文本 + 纯文本
await navigator.clipboard.write([
  new ClipboardItem({
    'text/html':  new Blob(['<b>hi</b>'], { type: 'text/html' }),
    'text/plain': new Blob(['hi'], { type: 'text/plain' }),
  }),
]);
// 读取图片
const items = await navigator.clipboard.read();
for (const it of items) {
  if (it.types.includes('image/png')) {
    const blob = await it.getType('image/png');
  }
}

--

const [device] = await navigator.hid.requestDevice({ filters: [] });
await device.open();
device.oninputreport = (e) => {
  const data = new Uint8Array(e.data.buffer);
  console.log(device.productName, data);
};

--

const port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200 });

const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log(new TextDecoder().decode(value));
}

--

const midi = await navigator.requestMIDIAccess();
midi.inputs.forEach((input) => {
  input.onmidimessage = (e) => {
    const [cmd, note, vel] = e.data;
    if (cmd === 144 && vel > 0) playNote(note);
  };
});

--

if (navigator.xr) {
  const ok = await navigator.xr.isSessionSupported('immersive-vr');
  if (ok) {
    const session = await navigator.xr.requestSession('immersive-vr');
    // 接入 Three.js: renderer.xr.setSession(session)
  }
}

--

📌 以上 API 中，涉及硬件或需要用户手势授权的（HID/Serial/MIDI/Payment/WebAuthn）会弹出浏览器原生选择框； 硬件类在没有连接对应设备时会返回空列表，这是正常行为。

7.15 流程图 & 画布编排 — 可视化工作流的核心技术

低代码平台、工作流引擎、白板、数据血缘、DAG 编排、节点式 Shader 编辑器……背后都是同一套能力： 节点（Node）+ 连线（Edge）+ 画布（Canvas）。本节系统拆解三种主流实现方案。

三大渲染方案对比

主流开源库

核心原理

1. 数据模型：{ nodes: [...], edges: [...] }，节点存坐标/类型，边存 source/target
2. 渲染：根据数据绘制节点与连线（声明式），状态变化 → Diff → 最小重绘
3. 交互：拖拽移动节点 / 从锚点拖出连线 / 框选 / 右键菜单 / 键盘删除
4. 连线路径：贝塞尔曲线 M x1 y1 C cx1 cy1, cx2 cy2, x2 y2
5. 命中测试：elementFromPoint (DOM) 或几何判断（Canvas）
6. Undo/Redo：命令模式 + 栈，或直接保存快照
7. 协同：CRDT (Yjs / Automerge) 或 OT 算法

/** 贝塞尔连线 · 横向流程图最常用 */
function bezierPath(s, t) {
  const dx = Math.max(Math.abs(t.x - s.x) * 0.5, 50);
  return `M ${s.x} ${s.y} C ${s.x + dx} ${s.y}, ${t.x - dx} ${t.y}, ${t.x} ${t.y}`;
}

/** 正交连线（曼哈顿） · BPMN 风格 */
function orthogonalPath(s, t) {
  const mx = (s.x + t.x) / 2;
  return `M ${s.x} ${s.y} L ${mx} ${s.y} L ${mx} ${t.y} L ${t.x} ${t.y}`;
}

🧩 实战 A：SVG 流程编辑器（纯原生，零依赖）

完整支持：左侧拖入节点 · 拖动移动 · 锚点拖出连线 · 点击选中 · Delete 删除 · 导出 JSON · 导入 JSON · Undo/Redo。

🎨 实战 B：Canvas 无限画布（Pan / Zoom / 坐标系）

所有画布工具（Figma / Miro / Excalidraw）的共同基础：一个可平移、可缩放的虚拟坐标系。 操作：鼠标拖拽平移 · 滚轮缩放（以光标为中心）· 点击节点选中 · 双击空白处新建。

关键代码片段

/** 屏幕坐标 → 世界坐标（Pan/Zoom 的核心） */
function screenToWorld(sx, sy, scale, offsetX, offsetY) {
  return { x: (sx - offsetX) / scale, y: (sy - offsetY) / scale };
}

/** 以光标为中心缩放 —— Figma/Miro 的标准做法 */
function zoomAt(cx, cy, delta) {
  const factor = delta > 0 ? 0.9 : 1.1;
  const wx = (cx - offsetX) / scale;
  const wy = (cy - offsetY) / scale;
  scale *= factor;
  offsetX = cx - wx * scale;
  offsetY = cy - wy * scale;
}

选型建议

8.6 实战演示：网页版小程序模拟器

下方在浏览器里模拟了一个完整的小程序环境（手机外壳 + 顶部胶囊 + TabBar + 多页面 + 下拉刷新 + 常用 wx.* API），真实复刻「双线程通信 → setData 驱动视图」的行为。

✅ 已实现：页面切换（switchTab）、setData 响应式更新、showToast、 showModal、request（模拟）、setStorageSync、下拉刷新、生命周期日志。

9.5 实战 A：Canvas 2D 小游戏（打砖块）

经典 Breakout，演示游戏循环、碰撞检测、输入处理三件套。 控制：← → 或鼠标/触屏拖动挡板。

9.6 实战 B：Three.js 3D 场景（WebGL）

从 CDN 加载 Three.js，构建：带光照/阴影的地面 + 自转立方体 + 可旋转摄像机。 拖拽旋转、滚轮缩放。这是所有 3D Web 游戏的最小可运行模板。

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

const geo = new THREE.BoxGeometry(1, 1, 1);
const mat = new THREE.MeshStandardMaterial({ color: 0x6c8cff });
const cube = new THREE.Mesh(geo, mat);
scene.add(cube);

scene.add(new THREE.DirectionalLight(0xffffff, 1));
camera.position.z = 4;

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

9.7 实战 C：Web Audio 3D 空间音效

用 PannerNode 实现空间化音频：拖动画布上的小球（音源）， 中心是听众，离得近声音大、在哪侧从哪侧出来，就像真实 3D 游戏里脚步声定位一样。请戴耳机体验。

9.8 实战 D：手柄 / 全屏 / 震动 / 屏幕方向

点击上方按钮试试 →

9.10 实战 E：FPS 射击游戏（5 把武器 + 手雷抛物 + 范围伤害）

一款完整的第一人称射击游戏：5 把武器（手枪/步枪/狙击/霰弹/火箭筒）+ 手雷抛物 + 范围爆炸 + Raycaster 命中判定 + 部位伤害 + 血量/护甲 + AI 敌人 + 复活机制。 每把武器伤害/射速/弹道差异化，所有玩法均由纯 JS 实现。

武器系统（5+1）

核心系统设计

// 手雷抛物线
function throwGrenade() {
  const dir = camera.getWorldDirection(new THREE.Vector3());
  const grenade = {
    mesh: greenSphere,
    pos: camera.position.clone(),
    vel: dir.multiplyScalar(18).setY(8), // 初速度 + 抬头
    bornT: now,
  };
  grenades.push(grenade);
}

// 每帧物理更新
function updateGrenades(dt) {
  for (const g of grenades) {
    g.vel.y -= 18 * dt;          // 重力
    g.pos.addScaledVector(g.vel, dt);
    if (g.pos.y <= 0.2 || age > 1500) {
      explode(g.pos, 100, 5);    // damage 100, radius 5m
      remove(g);
    }
  }
}

// 范围伤害
function explode(center, dmg, radius) {
  for (const e of enemies) {
    const dist = e.position.distanceTo(center);
    if (dist < radius) hitEnemy(e, dmg * (1 - dist/radius));
  }
  // 玩家也会被自己手雷炸到！
  const myDist = camera.position.distanceTo(center);
  if (myDist < radius) takeDamage(dmg * (1 - myDist/radius));
}

9.11 实战 F：真实 Node.js WebSocket 房间服务端

上一节用 MockWs 在浏览器里模拟服务端，下面给出可直接运行的 Node.js 版本。 支持多人房间、广播、心跳、断线清理。已附在项目根目录 server/room-server.js，一行命令启动：

npm install ws
node server/room-server.js
# 监听 ws://localhost:3001/room/{roomId}

server/room-server.js 完整实现

// Node.js 18+ | pnpm add ws
import { WebSocketServer } from 'ws';
import { randomUUID } from 'node:crypto';

const wss = new WebSocketServer({ port: 3001, path: '/room' });

/** @type {Map<string, Set<WebSocket>>} */
const rooms = new Map();
/** @type {Map<WebSocket, {uid: string, roomId: string, state: any}>} */
const clients = new Map();

const join = (ws, roomId) => {
  if (!rooms.has(roomId)) rooms.set(roomId, new Set());
  rooms.get(roomId).add(ws);
};
const leave = (ws) => {
  const info = clients.get(ws);
  if (!info) return;
  rooms.get(info.roomId)?.delete(ws);
  clients.delete(ws);
  broadcast(info.roomId, { type: 'peer-leave', uid: info.uid });
};
const broadcast = (roomId, msg, exclude) => {
  const data = JSON.stringify(msg);
  rooms.get(roomId)?.forEach((c) => {
    if (c !== exclude && c.readyState === 1) c.send(data);
  });
};

wss.on('connection', (ws, req) => {
  const roomId = new URL(req.url, 'http://x').pathname.split('/').pop() || 'lobby';
  const uid = randomUUID().slice(0, 8);
  clients.set(ws, { uid, roomId, state: {} });
  join(ws, roomId);
  ws.send(JSON.stringify({ type: 'welcome', uid, roomId }));
  broadcast(roomId, { type: 'peer-join', uid }, ws);

  // 心跳
  ws.isAlive = true;
  ws.on('pong', () => (ws.isAlive = true));

  ws.on('message', (buf) => {
    try {
      const msg = JSON.parse(buf.toString());
      const info = clients.get(ws);
      if (msg.type === 'move') {
        info.state = { x: msg.x, y: msg.y, z: msg.z, rot: msg.rot };
        broadcast(roomId, { type: 'state', uid: info.uid, ...info.state }, ws);
      } else if (msg.type === 'chat') {
        broadcast(roomId, { type: 'chat', uid: info.uid, text: msg.text });
      }
    } catch (e) {
      console.error(e);
    }
  });

  ws.on('close', () => leave(ws));
});

// 30s 心跳
setInterval(() => {
  wss.clients.forEach((ws) => {
    if (!ws.isAlive) return ws.terminate();
    ws.isAlive = false;
    ws.ping();
  });
}, 30_000);

console.log('🚀 Room server running on ws://localhost:3001/room/{roomId}');

客户端接入（替换 MockWs）

const ws = new WebSocket('ws://localhost:3001/room/playground');

ws.addEventListener('open', () => console.log('connected'));
ws.addEventListener('message', (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case 'welcome':    myUid = msg.uid;                     break;
    case 'peer-join':  chat(`${msg.uid} 加入`, 'join');      break;
    case 'peer-leave': removeAvatar(msg.uid);               break;
    case 'state':      setTarget(msg.uid, msg.x, msg.y, msg.z, msg.rot); break;
    case 'chat':       chat(`${msg.uid}: ${msg.text}`);     break;
  }
});

// 上报自己位置
setInterval(() => {
  if (ws.readyState !== 1) return;
  ws.send(JSON.stringify({
    type: 'move',
    x: camera.position.x, y: camera.position.y, z: camera.position.z, rot: yaw,
  }));
}, 100);

💡 没装 Node.js 时点击会报错（正常），装好后 node server/room-server.js 再点。 房间 URL：ws://localhost:3001/room/playground

9.12 实战 G：WebSocket vs WebRTC vs WebTransport 对比

不同游戏类型对网络要求差异极大。下面是同一个"位置广播"协议在三种传输上的实现对比， 并模拟延迟、丢包、队头阻塞三种场景观察差异。

能力与差异

三种协议的客户端代码对比

const ws = new WebSocket('wss://srv/room');
ws.onmessage = (e) => handle(JSON.parse(e.data));
ws.send(JSON.stringify(msg));
// 所有包按发送顺序到达
// 丢一个会卡住后面所有包

const pc = new RTCPeerConnection({ iceServers });
// "游戏模式"：不可靠、无序（类 UDP）
const dc = pc.createDataChannel('game', {
  ordered: false,
  maxRetransmits: 0,
});
dc.onmessage = (e) => handle(e.data);
dc.send(JSON.stringify(msg));

const wt = new WebTransport('https://srv/wt');
await wt.ready;
const stream = await wt.createBidirectionalStream();
const writer = stream.writable.getWriter();
writer.write(new TextEncoder().encode(JSON.stringify(msg)));
// 多条 stream 互不阻塞

const wt = new WebTransport('https://srv/wt');
await wt.ready;
const w = wt.datagrams.writable.getWriter();
w.write(new TextEncoder().encode(JSON.stringify(msg)));
// 类 UDP，最低延迟
// 不保证到达、不保证顺序
// 适合每帧位置更新

模拟三种传输的延迟与丢包

下方模拟每秒发 20 个"位置包"，可调节延迟抖动与丢包率，观察三种协议下"感知延迟"差异：

🎯 结论：在 5% 丢包率下，WebSocket 会出现"一卡一卡"（前面包丢需重传，后续包排队）； WebRTC / WebTransport 不可靠模式只丢那一帧，后续完全不受影响。 FPS/MOBA 之所以强烈倾向 UDP，就是因为宁愿丢一帧，也不要卡一秒。