Web Serial API支持浏览器直接通信串口设备。首先检测navigator.serial是否存在以确认浏览器支持；通过navigator.serial.requestPort()请求用户授权选择设备；调用port.open({baudRate: 9600})打开串口并配置波特率；利用port.readable获取ReadableStream读取数据，配合TextDecoder解析Uint8Array为文本；通过port.writable.getWriter()和TextEncoder发送数据；通信结束调用port.close()关闭连接。该API需用户主动授权，确保安全性，防止恶意访问硬件。对于不支持的浏览器，应提示用户更换或使用备选方案。实际应用包括控制Arduino、读取传感器、与3D打印机通信等，实现Web端对物理设备的实时监控与操作。
使用Web Serial API，你可以在浏览器中直接与串口设备进行通信，而无需安装额外的插件或应用程序。这为Web应用打开了连接物理世界的窗口。
解决方案
-
检测浏览器支持: 首先，检查用户的浏览器是否支持Web Serial API。你可以通过
navigator.serial来判断。如果返回undefined，则表示不支持。if ("serial" in navigator) { console.log("Web Serial API is supported!"); } else { console.log("Web Serial API is not supported."); } -
请求串口访问权限: 用户需要显式授权你的网站访问串口设备。 使用
navigator.serial.requestPort()方法来请求访问权限。这会弹出一个浏览器窗口，允许用户选择要连接的串口设备。let port; async function connectSerial() { try { port = await navigator.serial.requestPort(); // 可选：打开串口后，可以立即读取数据 await port.open({ baudRate: 9600 }); // 设置波特率 console.log("Serial port opened."); readSerialData(); // 开始读取数据 } catch (error) { console.error("Error opening serial port:", error); } } 打开串口: 一旦用户授权，你可以使用
port.open()方法打开串口。你需要指定波特率，以及其他可选的配置参数，如数据位、停止位和奇偶校验。-
读取数据: 使用
port.readable获取一个ReadableStream对象，然后使用ReadableStreamDefaultReader从串口读取数据。async function readSerialData() { const reader = port.readable.getReader(); try { while (true) { const { value, done } = await reader.read(); if (done) { // reader.cancel() has been called. break; } // value is a Uint8Array. const textDecoder = new TextDecoder(); const data = textDecoder.decode(value); console.log("Received:", data); // 在这里处理接收到的数据 } } catch (error) { console.error("Error reading from serial port:", error); } finally { reader.releaseLock(); } } -
发送数据: 使用
port.writable获取一个WritableStream对象，然后使用WritableStreamDefaultWriter向串口发送数据。async function writeSerialData(data) { const writer = port.writable.getWriter(); const textEncoder = new TextEncoder(); await writer.write(textEncoder.encode(data)); writer.releaseLock(); } -
关闭串口: 完成通信后，使用
port.close()方法关闭串口。async function closeSerial() { try { await port.close(); console.log("Serial port closed."); } catch (error) { console.error("Error closing serial port:", error); } }
Web Serial API 的安全性考量
Web Serial API 的安全性是至关重要的。浏览器需要确保用户明确授权才能访问串口设备，以防止恶意网站未经授权地访问硬件。这就是为什么 navigator.serial.requestPort() 需要用户交互的原因。 此外，建议对接收到的数据进行验证和清理，以防止潜在的安全漏洞。
如何处理 Web Serial API 的兼容性问题？
并非所有浏览器都支持 Web Serial API。 为了确保你的应用在各种浏览器中都能正常工作，你需要提供备选方案。 一个常见的做法是使用 polyfill，或者提供一个提示，告知用户需要使用支持 Web Serial API 的浏览器。
Web Serial API 在实际项目中的应用案例
Web Serial API 在很多领域都有应用。 比如，可以使用它来控制 Arduino 开发板，读取传感器数据，或者与传统的串口设备进行通信。 例如，你可以创建一个 Web 应用，通过串口与 3D 打印机通信，从而实现远程控制打印过程。 或者，你可以构建一个数据采集系统，将传感器数据实时传输到 Web 界面进行可视化。
