WebRTC 架构与信令设计

// signaling-server.js
import { WebSocketServer } from "ws";

const rooms = new Map(); // roomId -> Map<peerId, WebSocket>

const wss = new WebSocketServer({ port: 8080 });

function broadcast(roomId, senderId, payload) {
  const room = rooms.get(roomId);
  if (!room) return;
  for (const [peerId, ws] of room) {
    if (peerId === senderId) continue;
    if (ws.readyState === ws.OPEN) {
      ws.send(JSON.stringify(payload));
    }
  }
}

wss.on("connection", (ws) => {
  let joined = null;

  ws.on("message", (raw) => {
    const msg = JSON.parse(raw.toString());

    if (msg.type === "join") {
      const { roomId, peerId } = msg;
      joined = { roomId, peerId };
      if (!rooms.has(roomId)) rooms.set(roomId, new Map());
      const room = rooms.get(roomId);

      // 先把已有成员告诉新成员，由新成员决定向谁发 Offer
      ws.send(JSON.stringify({
        type: "peers",
        peers: [...room.keys()],
      }));

      room.set(peerId, ws);
      broadcast(roomId, peerId, { type: "peer-joined", peerId });
      return;
    }

    // offer / answer / candidate 一律原样转发
    if (joined && ["offer", "answer", "candidate", "bye"].includes(msg.type)) {
      broadcast(joined.roomId, joined.peerId, { ...msg, from: joined.peerId });
    }
  });

  ws.on("close", () => {
    if (!joined) return;
    const room = rooms.get(joined.roomId);
    if (room) {
      room.delete(joined.peerId);
      if (room.size === 0) rooms.delete(joined.roomId);
    }
    broadcast(joined.roomId, joined.peerId, { type: "peer-left", peerId: joined.peerId });
  });
});

// client.js
const ws = new WebSocket("wss://example.com/signaling");
const pc = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.example.com:3478" }],
});
const peers = new Map(); // peerId -> RTCPeerConnection

ws.addEventListener("message", async (event) => {
  const msg = JSON.parse(event.data);

  if (msg.type === "peers") {
    // 我后加入，主动向每个已有成员发起
    for (const peerId of msg.peers) {
      await createOfferTo(peerId);
    }
    return;
  }

  if (msg.type === "offer") {
    const remote = getOrCreatePeer(msg.from);
    await remote.setRemoteDescription(msg.sdp);
    const answer = await remote.createAnswer();
    await remote.setLocalDescription(answer);
    ws.send(JSON.stringify({ type: "answer", targetPeerId: msg.from, sdp: answer }));
    return;
  }

  if (msg.type === "answer") {
    await peers.get(msg.from).setRemoteDescription(msg.sdp);
    return;
  }

  if (msg.type === "candidate") {
    const remote = peers.get(msg.from);
    await remote.addIceCandidate({
      candidate: msg.candidate,
      sdpMid: msg.sdpMid,
      sdpMLineIndex: msg.sdpMLineIndex,
    });
  }
});

async function createOfferTo(peerId) {
  const remote = getOrCreatePeer(peerId);
  const offer = await remote.createOffer();
  await remote.setLocalDescription(offer);
  ws.send(JSON.stringify({ type: "offer", targetPeerId: peerId, sdp: offer }));
}

function getOrCreatePeer(peerId) {
  if (peers.has(peerId)) return peers.get(peerId);
  const remote = new RTCPeerConnection({
    iceServers: [{ urls: "stun:stun.example.com:3478" }],
  });

  remote.onicecandidate = ({ candidate }) => {
    if (!candidate) return; // null 表示候选收集结束
    ws.send(JSON.stringify({
      type: "candidate",
      targetPeerId: peerId,
      candidate: candidate.candidate,
      sdpMid: candidate.sdpMid,
      sdpMLineIndex: candidate.sdpMLineIndex,
    }));
  };

  remote.ontrack = ({ streams }) => {
    document.querySelector("#remoteVideo").srcObject = streams[0];
  };

  peers.set(peerId, remote);
  return remote;
}

const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
localStream.getTracks().forEach((track) => pc.addTrack(track, localStream));

let polite = false;          // 由 peerId 字典序或房间角色决定
let makingOffer = false;
let ignoreOffer = false;

pc.onnegotiationneeded = async () => {
  try {
    makingOffer = true;
    await pc.setLocalDescription();
    signaling.send({ type: "offer", sdp: pc.localDescription });
  } finally {
    makingOffer = false;
  }
};

async function onRemoteOffer(sdp) {
  const offerCollision =
    sdp.type === "offer" && (makingOffer || pc.signalingState !== "stable");
  ignoreOffer = !polite && offerCollision;
  if (ignoreOffer) return;

  await pc.setRemoteDescription(sdp);
  await pc.setLocalDescription();
  signaling.send({ type: "answer", sdp: pc.localDescription });
}

const pc = new RTCPeerConnection();

// 发起方创建通道
const channel = pc.createDataChannel("state", {
  ordered: false,          // 状态更新允许乱序
  maxRetransmits: 0,       // 不重传，丢包即放弃
});
channel.onopen = () => channel.send(JSON.stringify({ x: 120, y: 45 }));

// 接收方监听
pc.ondatachannel = (event) => {
  const recv = event.channel;
  recv.onmessage = (e) => console.log("收到:", e.data);
};