Web Serial API 是一种新的 API，它让我们能够在浏览器中直接与串口设备进行通信，这为开发者提供了强大的能力，可以实现很多原本需要依赖于本地应用程序才能完成的功能。通过 Web Serial API，我们可以实现与各种设备（例如 Arduino、传感器、甚至是外围设备）进行串口通讯的功能。
Web Serial API 基本概念
Web Serial API 使得网页可以请求连接到串口设备，并通过串口进行数据的读写。这个 API 的设计理念是为了保护用户隐私，使用时需要用户明确允许和选择连接的设备。
使用步骤
以下是使用 Web Serial API 进行串口通讯的一般步骤：
- 获取串口设备
- 打开串口连接
- 使用数据流进行通讯
- 关闭串口连接
示例代码
下面的代码示例演示了如何建立与串口设备的连接，并进行简单的数据交互：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Serial API 示例</title>
</head>
<body>
<h1>Web Serial API 示例</h1>
<button id="connect">连接串口</button>
<button id="send">发送数据</button>
<button id="close">关闭串口</button>
<pre id="output"></pre>
<script>
let port;
let writer;
let decoder;
let inputStream;
document.getElementById('connect').addEventListener('click', async () => {
try {
// 请求设备连接
port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
const decoder = new TextDecoderStream();
inputStream = port.readable.pipeThrough(decoder);
const reader = inputStream.getReader();
readLoop(reader);
document.getElementById('output').textContent += "已连接到设备！\n";
} catch (error) {
console.error("连接失败:", error);
}
});
async function readLoop(reader) {
while (true) {
const { done, value } = await reader.read();
if (done) {
break; // 流结束
}
document.getElementById('output').textContent += `接收到数据: ${value}\n`;
}
}
document.getElementById('send').addEventListener('click', async () => {
if (!port || !port.writable) {
console.error("请先连接串口");
return;
}
const writer = port.writable.getWriter();
const text = "Hello Device!";
const data = new TextEncoder().encode(text + '\n');
await writer.write(data);
writer.releaseLock();
document.getElementById('output').textContent += `已发送数据: ${text}\n`;
});
document.getElementById('close').addEventListener('click', async () => {
if (port) {
await port.close();
document.getElementById('output').textContent += "串口已关闭。\n";
port = null;
}
});
</script>
</body>
</html>
代码解析
- 连接按钮：当用户点击“连接串口”按钮时，浏览器会弹出设备选择窗口，用户选择串口设备后，程序将请求打开串口连接。
- 读取数据：使用一个异步函数
readLoop来持续读取串口传来的数据，并将其显示在页面上。 - 发送数据：用户可以通过点击“发送数据”按钮向串口设备发送简单文本消息。
- 关闭串口：可以通过“关闭串口”按钮来关闭当前的串口连接，确保资源得到释放。
结尾
Web Serial API 的出现，让前端开发者能够实现与硬件设备的直接交互，大大扩展了 Web 应用的功能。尽管 API 在不同浏览器中的支持情况有所不同，但它的潜力无疑为物联网（IoT）应用开发等领域带来了便利。希望这个简单的例子能够帮助你理解 Web Serial API 的基本用法。
