理论上不能直接通过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。这玩意儿本质上是个桥梁，让网页能和串口设备通信，但前提是用户得明确授权。
-
检测支持性: 先检查浏览器是不是支持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出于安全考虑，有很多限制：
- 必须使用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，性能可能稍差。
