当前位置：首页 > 文章列表 > 文章 > 前端 > BOM如何获取串口设备信息？

BOM如何获取串口设备信息？

2025-07-03 17:45:31 0浏览收藏

想在网页上玩转串口设备？传统的BOM（浏览器对象模型）可不行，出于安全考虑，浏览器不允许直接访问底层硬件。不过，别灰心，Web Serial API来救场！本文将带你一步步了解如何通过Web Serial API间接获取串口设备信息，包括检测浏览器支持性、请求用户授权、连接串口、读写数据以及关闭串口。同时，我们也会探讨Web Serial API的兼容性问题，针对不同浏览器提供解决方案，例如提示用户更换浏览器、尝试Polyfill或使用Electron等Native App方案。此外，还会深入分析Web Serial API的安全限制，并提供避免安全风险的建议，最后对比Web Serial API与传统串口通信方式的优缺点，助你全面掌握这项技术。

理论上不能直接通过BOM获取用户串口设备信息，但可通过Web Serial API间接实现。1.检查浏览器是否支持Web Serial API；2.请求用户授权访问串口；3.连接串口并设置波特率；4.通过ReadableStream和WritableStream读写数据；5.使用完毕后关闭串口。兼容性方面，Chrome和Edge支持较好，Safari和Firefox支持不足，可提示用户换浏览器、尝试Polyfill或使用Electron等Native App方案。安全上需使用HTTPS、获取用户授权并仅访问指定串口，建议按需请求权限、告知用途、校验数据。相比传统方式，Web Serial API无需插件、跨平台且易开发，但存在兼容性、安全限制及性能问题。

如何用BOM获取用户的串口设备信息？

通过浏览器端的BOM（浏览器对象模型）直接获取用户的串口设备信息，理论上是不行的。这是出于安全考虑，浏览器不允许网页直接访问底层硬件，比如串口。但别灰心，还是有办法绕一下的。

解决方案

想在浏览器里用串口，得借助Web Serial API。这玩意儿本质上是个桥梁，让网页能和串口设备通信，但前提是用户得明确授权。

检测支持性: 先检查浏览器是不是支持Web Serial API。

if ('serial' in navigator) {
  console.log("Web Serial API is supported!");
} else {
  console.log("Web Serial API is not supported.");
}

请求串口访问权限: 用户得手动选择并授权。

async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    console.log("Port selected:", port);
    return port;
  } catch (error) {
    console.error("Serial port selection error:", error);
    return null;
  }
}

连接串口: 拿到port对象后，就可以打开串口连接了。

async function connectSerialPort(port, baudRate = 9600) {
  try {
    await port.open({ baudRate: baudRate });
    console.log("Serial port opened successfully.");
    return true;
  } catch (error) {
    console.error("Failed to open serial port:", error);
    return false;
  }
}

读写数据: 连接成功后，就能读写数据了。读取数据通常用port.readable获取一个ReadableStream，然后用DataReader读取。写入数据类似，用port.writable获取WritableStream，然后用DataWriter写入。

async function readSerialData(port) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Reader was cancelled.
        console.log("Reader cancelled, serial port closed.");
        break;
      }
      // value is a Uint8Array.
      console.log("Received:", value);
    }
  } catch (error) {
    console.error("Error reading from serial port:", error);
  } finally {
    reader.releaseLock();
  }
}

关闭串口: 用完记得关闭。

async function closeSerialPort(port) {
  try {
    await port.close();
    console.log("Serial port closed.");
  } catch (error) {
    console.error("Error closing serial port:", error);
  }
}

Web Serial API的兼容性怎么样？如何处理不支持的浏览器？

Web Serial API的兼容性目前还不是特别好，主流的Chrome和Edge支持得比较好，但Safari和Firefox支持得还不够完善。要处理不支持的浏览器，可以考虑以下几种方案：

提示用户更换浏览器： 这是最直接的办法，告诉用户当前浏览器不支持Web Serial API，建议使用Chrome或Edge。
使用Polyfill： 尝试使用Polyfill来模拟Web Serial API。不过，由于Web Serial API涉及到硬件访问，Polyfill的实现难度比较大，效果可能不会很好。
Electron或其他Native App： 如果对兼容性要求很高，可以考虑使用Electron或其他Native App来开发。Electron可以使用Node.js的serialport库来访问串口，兼容性更好。

Web Serial API有哪些安全限制？如何避免安全风险？

Web Serial API出于安全考虑，有很多限制：