20、WebRTC在IoT中的应用：轻量级客户端、与MQTT协议对比、实战：通过WebRTC控制智能设备

聊到IoT（物联网），大家第一反应可能是MQTT、CoAP这些轻量协议。但今天我想跟你聊聊WebRTC在IoT里的玩法。说实话，我最早也觉得WebRTC跟IoT八竿子打不着——一个搞视频通话的，一个搞传感器数据的，能有什么关系？

直到有一次，我在做一个智能家居项目时遇到了一个棘手的问题：用户想实时查看家里摄像头的画面，同时还要能远程控制窗帘和灯光。MQTT能搞定控制，但视频流怎么办？嗯，这时候我才真正意识到，WebRTC在IoT场景下其实大有可为。

20.1 轻量级客户端：WebRTC在资源受限设备上的适配

你可能要问：WebRTC那么重，能在单片机或ESP32上跑吗？

我的答案是：能，但需要做减法。我在一个智能灯控项目里，用的就是ESP32 + 精简版WebRTC栈。说白了，我们不需要完整的音视频编解码，只需要DataChannel就够了。

来看一个典型的轻量级客户端架构：

20.2 WebRTC vs MQTT：什么时候选谁？

这个问题我经常被问到。说实话，没有绝对的谁好谁坏，关键看场景。我整理了一个对比表，你可以直观感受一下：

对比维度	WebRTC DataChannel	MQTT
传输层	基于UDP（SCTP封装），低延迟	基于TCP，有重传机制
延迟	10-50ms（端到端）	50-200ms（取决于Broker）
双向性	原生全双工，两端对等	发布/订阅模式，需Broker中转
NAT穿透	内置ICE/STUN/TURN	需额外配置或反向代理
加密	强制DTLS加密	可选TLS
资源占用	较高（80-150KB RAM）	极低（10-30KB RAM）
典型场景	实时控制、视频流、文件传输	传感器数据上报、状态同步

你看，MQTT在资源占用和简单数据上报上有绝对优势。但如果你需要实时控制——比如按下开关的瞬间灯就要亮，或者要传输摄像头画面——WebRTC的延迟优势就体现出来了。

20.3 实战：通过WebRTC控制智能设备

好了，理论说完了，咱们直接上手。下面是一个完整的实战案例：用浏览器通过WebRTC DataChannel控制一个LED灯（模拟智能设备）。

20.3.1 设备端代码（ESP32/模拟器）

先看设备端。这里我用JavaScript模拟，但逻辑跟ESP32上跑的C代码完全一致：

// 设备端：WebRTC DataChannel 接收控制指令
const peerConnection = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 创建DataChannel（实际上由发起方创建，这里假设已建立连接）
let dataChannel = null;

peerConnection.ondatachannel = (event) => {
  dataChannel = event.channel;
  dataChannel.onmessage = (e) => {
    const command = JSON.parse(e.data);
    console.log('收到指令:', command);
    
    // 解析控制指令
    switch(command.action) {
      case 'toggle_led':
        // 实际硬件操作：GPIO.write(ledPin, !currentState)
        console.log(`LED状态切换为: ${command.state ? '开' : '关'}`);
        // 回复确认
        dataChannel.send(JSON.stringify({
          status: 'ok',
          device: 'led_01',
          state: command.state
        }));
        break;
      case 'get_sensor':
        // 读取传感器（模拟）
        const temp = 25 + Math.random() * 5;
        dataChannel.send(JSON.stringify({
          type: 'sensor_data',
          temperature: temp.toFixed(1),
          humidity: (60 + Math.random() * 20).toFixed(1)
        }));
        break;
      default:
        dataChannel.send(JSON.stringify({
          status: 'error',
          message: '未知指令'
        }));
    }
  };
};

// 发起连接（作为被控端，通常由控制端发起offer）
async function startDevice() {
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  // 通过信令服务器发送offer给控制端（此处省略信令传输）
  console.log('设备端已就绪，等待控制指令...');
}

20.3.2 控制端代码（浏览器）

这是运行在浏览器里的控制面板：

// 控制端：浏览器中的智能设备控制面板
const controlPanel = {
  peerConnection: null,
  dataChannel: null,
  
  async connect(deviceId) {
    this.peerConnection = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    
    // 创建DataChannel
    this.dataChannel = this.peerConnection.createDataChannel('control', {
      ordered: true,        // 保证顺序
      maxRetransmits: 3     // 最多重传3次
    });
    
    this.dataChannel.onopen = () => {
      console.log('与控制设备连接成功');
      document.getElementById('status').textContent = '已连接';
    };
    
    this.dataChannel.onmessage = (e) => {
      const response = JSON.parse(e.data);
      console.log('设备回复:', response);
      // 更新UI
      if(response.type === 'sensor_data') {
        document.getElementById('temp').textContent = response.temperature + '°C';
        document.getElementById('humidity').textContent = response.humidity + '%';
      }
    };
    
    // 创建offer并发送给设备
    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    // 通过信令服务器发送offer（此处省略）
  },
  
  // 发送控制指令
  sendCommand(action, params = {}) {
    if(this.dataChannel && this.dataChannel.readyState === 'open') {
      this.dataChannel.send(JSON.stringify({
        action: action,
        ...params,
        timestamp: Date.now()
      }));
    } else {
      console.error('DataChannel未就绪');
    }
  },
  
  // 控制LED
  toggleLed(state) {
    this.sendCommand('toggle_led', { state });
  },
  
  // 读取传感器
  readSensor() {
    this.sendCommand('get_sensor');
  }
};

// 使用示例
// controlPanel.connect('device_001');
// controlPanel.toggleLed(true);  // 开灯
// controlPanel.readSensor();     // 读取温湿度

20.3.3 信令交换的简化方案

实际项目中，信令交换是个麻烦事。我推荐用WebSocket + JSON的方式，简单可靠：

// 信令服务器（Node.js简化版）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 设备注册表
const devices = new Map();

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    
    switch(data.type) {
      case 'register':
        // 设备注册
        devices.set(data.deviceId, ws);
        ws.deviceId = data.deviceId;
        console.log(`设备 ${data.deviceId} 已注册`);
        break;
        
      case 'offer':
        // 转发offer给目标设备
        const targetWs = devices.get(data.targetId);
        if(targetWs) {
          targetWs.send(JSON.stringify({
            type: 'offer',
            sdp: data.sdp,
            from: data.from
          }));
        }
        break;
        
      case 'answer':
        // 转发answer
        const callerWs = devices.get(data.targetId);
        if(callerWs) {
          callerWs.send(JSON.stringify({
            type: 'answer',
            sdp: data.sdp
          }));
        }
        break;
        
      case 'ice_candidate':
        // 转发ICE候选
        const peerWs = devices.get(data.targetId);
        if(peerWs) {
          peerWs.send(JSON.stringify({
            type: 'ice_candidate',
            candidate: data.candidate
          }));
        }
        break;
    }
  });
  
  ws.on('close', () => {
    if(ws.deviceId) {
      devices.delete(ws.deviceId);
      console.log(`设备 ${ws.deviceId} 已断开`);
    }
  });
});

20.4 实际部署中的注意事项

嗯，这里有几个坑，我帮你提前踩过了：

• NAT穿透问题：IoT设备通常在家用路由器后面，STUN不一定管用。我建议部署一个轻量级TURN服务器，或者用MQTT做信令中转的同时，也做TURN的fallback。
• 功耗控制：WebRTC的DTLS握手比较耗电。对于电池供电的设备，我建议用keepalive间隔拉长到30秒，或者干脆在空闲时断开，需要时再重建连接。
• 数据包大小：DataChannel的SCTP最大消息是64KB，但实际测试中，超过16KB的包在弱网环境下容易丢。我习惯把控制指令控制在1KB以内，传感器数据分批发送。
• 安全性：WebRTC强制DTLS加密，但信令通道往往是明文。记得给WebSocket也加上WSS，否则中间人可以篡改SDP，搞中间人攻击。

---