Chrome kiosk设备WebSerial自动重连ESP32灯阵问题求助

核心思路 #

Chrome支持WebSerial设备权限的持久化存储，结合本地存储记录设备唯一标识，即可实现浏览器重启后的无交互自动重连。

1. 首次连接时存储设备标识 #

第一次需要用户手动授权连接，完成后提取ESP32设备的usbVendorId和usbProductId（不同ESP32模块可能有差异，可通过Chrome的chrome://device-log/查看设备信息），将其存入localStorage用于后续匹配。

示例代码：

// 首次手动连接（仅需执行一次）
async function initFirstConnection() {
  try {
    // 替换为你的ESP32设备ID
    const port = await navigator.serial.requestPort({
      filters: [{ usbVendorId: 0x10C4, usbProductId: 0xEA60 }]
    });
    await port.open({ baudRate: 115200 });
    
    // 存储设备标识到本地
    const deviceInfo = port.getInfo();
    localStorage.setItem('savedSerialDevice', JSON.stringify(deviceInfo));
    
    console.log('首次连接成功，设备信息已保存');
    // 后续通信逻辑...
  } catch (err) {
    console.error('首次连接失败:', err);
  }
}

2. 浏览器重启/页面加载时自动重连 #

页面加载时，先读取本地存储的设备标识，再调用navigator.serial.getPorts()获取所有用户已授权的端口，匹配标识后自动打开连接。

示例代码：

async function autoReconnect() {
  const savedDevice = JSON.parse(localStorage.getItem('savedSerialDevice'));
  if (!savedDevice) return;

  try {
    // 获取所有已授权的串口端口
    const ports = await navigator.serial.getPorts();
    // 匹配目标设备
    const targetPort = ports.find(port => {
      const info = port.getInfo();
      return info.usbVendorId === savedDevice.usbVendorId && 
             info.usbProductId === savedDevice.usbProductId;
    });

    if (targetPort) {
      await targetPort.open({ baudRate: 115200 });
      console.log('自动重连成功');
      // 后续通信逻辑...
    } else {
      console.log('未找到已授权的目标设备');
    }
  } catch (err) {
    console.error('自动重连失败:', err);
  }
}

// 页面加载时触发自动重连
window.addEventListener('load', autoReconnect);

3. Chrome权限与自助终端配置 #

• 权限持久化：Chrome默认会保存串口设备的授权权限，除非用户手动清除。可通过Chrome设置 → 隐私和安全 → 网站设置 → 串口确认你的站点权限为「允许」。
• Kiosk模式参数：启动Chrome kiosk时，确保添加必要参数，如--kiosk（全屏）、--allow-file-access-from-files（若页面为本地文件），同时站点需处于安全上下文（本地文件或HTTPS均可）。

注意：若用户手动清除Chrome权限或本地存储，自动重连会失效，需重新执行一次手动授权。

内容的提问来源于stack exchange，提问作者csyperski