对于嵌入式工程师来说，串口工具在开发和调试过程中必不可少的利器。工具能帮助我们发送和接收串行数据，进行设备通信和调试。通过串口工具，工程师可以实时监控串口数据，查看设备是否正常工作，同时也可以通过发送特定的命令来测试设备的反应。
传统的电脑应用-串口助手，虽然也能满足这些需求，但它们在便捷性上往往受到限制。它需要去网上下载，有些还需要安装。
相比之下，在线串口助手的出现为嵌入式工程师带来了福音。它无需安装、无需配置，只需通过浏览器即可使用。此外，在线串口助手通常提供更为直观的界面和易于操作的功能，帮助工程师更高效地进行工作。
博主最近看到网上有开发者--老大哥，开源了一个在线串口工具，其链接：https://gitee.com/itldg/web-serial-debug，其开源协议：Apache License 2.0。
通过上面的启发，博主想着也写一个网页（R-WebEmbedded），并集成该开源软件，方便大家使用。
在开发在线串口助手之前，就必须先了解什么是web serial api。
R-WebEmbedded 说明
- 目前该网页主要有两个功能，开源软件的浏览和在线串口工具。
- R-WebEmbedded主界面说明--主要包含：标题，风火轮官方链接，博主的gitee，github链接，以及功能模块
- R-WebEmbedded--开源软件包，该界面展示了博主提交给RT-Threead的软件包。
- R-WebEmbedded - 在线串口助手，该功能集成了老大哥的开源的串口工具。界面分为：串口配置区，串口数据收发区，串口快捷方式区。
什么是Web Serial API
- 串口是一个双向通信接口，允许字节发送和接收数据。
- Web Serial API为网站提供了一种使用JavaScript对串行设备进行读写的方法。串行设备可以通过用户系统上的串行端口连接，也可以通过模拟串行端口的可移动USB和蓝牙设备连接。换句话说，Web Serial API通过允许网站与串行设备(如微控制器和3D打印机)通信来连接网络和物理世界。
如何使用Web Serial API
浏览器支持检测
检查浏览器是否支持Web Serial API，有些浏览器可能不支持该功能，可以选择Edge或Chrome浏览器。
代码语言：javascript复制if (!('serial' in navigator)) {
alert('当前浏览器不支持串口操作,请更换Edge或Chrome浏览器')
}
打开串口
- Web Serial API在设计上是异步的。这可以防止网站UI在等待输入时阻塞，这一点很重要，因为串行数据可以在任何时候接收，需要一种方法来侦听它。要打开串口，首先访问一个SerialPort对象。为此，您可以通过调用navigator.serial.requestPort()来提示用户选择一个串行端口，或者从navigator.serial.getPorts()中选择一个，该方法返回一个先前授予该网站访问权限的串行端口列表。
// 提示用户选择一个串口。
const serialPort = await navigator.serial.requestPort();
// 获取用户之前授予该网站访问权限的所有串口。
const serialPort = await navigator.serial.getPorts();
document.getElementById('serial-select-port').addEventListener('click', async () => {
try {
await navigator.serial.requestPort().then(async (port) => {
serialPort?.close()
await serialPort?.forget()
serialPort = port
serialStatuChange(true)
})
} catch (e) {
console.error('获取串口权限出错' e.toString())
}
})
- 当我选择好了SerialPort对象之后，调用serialPort.open()，打开串口。其中打开串口可以指定其选项，选项是有默认值，并且是可选的。
dataBits：每帧的数据位数(7或8)。
stopBits：一帧结束时的停止位数(1或2)。
parity：校验模式，可以是none，偶数，奇数。
bufferSize：应该创建的读写缓冲区大小(必须小于16MB)。
flowControl：流控模式(none或hardware)。
关闭串口
- 当我们不再使用串口时，我们需要将串口对象关闭，调用serialPort.close()。如果串行端口的readable和writable被解锁，则关闭该串行端口，这意味着已经为其各自的读写成员调用了releaseLock()。但是，当使用循环从串行设备连续读取数据时，端口Readable将一直被锁定，直到遇到错误。在这种情况下，调用reader.cancel()将强制reader.read()立即解析为{value: undefined, done: true}，从而允许循环调用reader.releaseLock()。
async function closeSerial() {
if (serialOpen) {
serialOpen = false
reader?.cancel()
serialToggle.innerHTML = '打开串口'
disabledOptions(false)
}
}
async function readData() {
while (serialOpen && serialPort.readable) {
reader = serialPort.readable.getReader()
try {
while (true) {
const { value, done } = await reader.read()
if (done) {
break
}
dataReceived(value)
}
} catch (error) {
} finally {
reader.releaseLock()
}
}
await serialPort.close()
}
串口读数据
- Web Serial API中的输入流由streams API处理。
- 串口连接建立之后，SerialPort对象的readable属性返回ReadableStream。这些将用于从串行设备接收数据, 其使用Uint8Array实例进行数据传输。
- 当新数据从串行设备到达时，port.readable.getReader().read()异步返回两个属性:value和一个done的布尔值。如果done为真，则串行端口已经关闭，或者没有更多的数据输入。调用port.readable.getReader()创建一个读取器并将其锁定为readable。当可读被锁定时，串口不能被关闭。
async function readData() {
while (serialOpen && serialPort.readable) {
reader = serialPort.readable.getReader()
try {
while (true) {
const { value, done } = await reader.read()
if (done) {
break
}
dataReceived(value)
}
} catch (error) {
} finally {
reader.releaseLock()
}
}
await serialPort.close()
}
串口写数据
- Web Serial API中的输出流由streams API处理。
- 串口连接建立之后，SerialPort对象的writable属性返回WritableStream。这些将数据发送到串行设备, 其使用Uint8Array实例进行数据传输。
- 要将数据发送到串行设备，请将数据传递到port.writable.getWriter().write()。在port.writable. getwriter()上调用releaseLock()是为了稍后关闭串口。
- 串口工具提供了hex和字符串发送格式。
async function sendHex(hex) {
const value = hex.replace(/s /g, '')
if (/^[0-9A-Fa-f] $/.test(value) && value.length % 2 === 0) {
let data = []
for (let i = 0; i < value.length; i = i 2) {
data.push(parseInt(value.substring(i, i 2), 16))
}
await writeData(Uint8Array.from(data))
} else {
addLogErr('HEX格式错误:' hex)
}
}
async function sendText(text) {
const encoder = new TextEncoder()
writeData(encoder.encode(text))
}
async function writeData(data) {
if (!serialPort || !serialPort.writable) {
addLogErr('请先打开串口再发送数据')
return
}
const writer = serialPort.writable.getWriter()
if (toolOptions.addCRLF) {
data = new Uint8Array([...data, 0x0d, 0x0a])
}
await writer.write(data)
writer.releaseLock()
addLog(data, false)
}
总结
- 在线串口助手提供了更佳便捷的开发模式，无需下载安装串口助手。
- R-WebEmbedded - 在线嵌入式工具，其登录网站：https://ricechen0.gitee.io/r-web-embedded/
- R-WebEmbedded - 在线嵌入式工具开源代码链接：https://gitee.com/RiceChen0/r-web-embedded
