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

想在网页上玩转串口设备？传统的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（浏览器对象模型）直接获取用户的串口设备信息，理论上是不行的。这是出于安全考虑，浏览器不允许网页直接访问底层硬件，比如串口。但别灰心，还是有办法绕一下的。

解决方案

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

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

   

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

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

   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;
     }
   }

3. 连接串口: 拿到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;
     }
   }

4. 读写数据: 连接成功后，就能读写数据了。读取数据通常用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();
     }
   }

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

   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出于安全考虑，有很多限制：

• 必须使用HTTPS： 网页必须通过HTTPS加载，才能使用Web Serial API。这是为了防止中间人攻击。
• 用户必须授权： 网页必须获得用户的明确授权，才能访问串口。
• 只能访问用户选择的串口： 网页只能访问用户手动选择的串口，不能随意访问其他串口。

为了避免安全风险，建议：

• 只在必要时请求串口访问权限： 避免在网页加载时立即请求串口访问权限，只在用户需要使用串口功能时才请求。
• 明确告知用户串口用途： 在请求串口访问权限时，明确告知用户串口的用途，让用户了解风险。
• 对串口数据进行校验： 对从串口读取的数据进行校验，防止恶意数据注入。
• 避免在串口数据中包含敏感信息： 尽量避免在串口数据中包含敏感信息，如密码、密钥等。

Web Serial API和传统的串口通信方式有什么区别？

传统的串口通信方式，通常需要借助Native App或者插件来实现。而Web Serial API是浏览器原生的API，可以直接在网页中使用，无需安装任何插件。

Web Serial API的优点：

• 无需安装插件： 避免了插件的安全风险和兼容性问题。
• 跨平台： 只要浏览器支持Web Serial API，就可以在不同的操作系统上使用。
• 易于开发： 使用JavaScript开发，上手容易。

Web Serial API的缺点：

• 兼容性： 目前兼容性还不够好，需要考虑浏览器的支持情况。
• 安全限制： 出于安全考虑，有很多限制，需要注意安全风险。
• 性能： 相比Native App，性能可能稍差。

今天关于《BOM如何获取串口设备信息？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于串口,浏览器,兼容性,安全限制,WebSerialAPI的内容请关注golang学习网公众号！