對于嵌入式工程師來說，串口工具在開發和調試過程中必不可少的利器。工具能幫助我們發送和接收串行數據，進行設備通信和調試。通過串口工具，工程師可以實時監控串口數據，查看設備是否正常工作，同時也可以通過發送特定的命令來測試設備的反應。

傳統的電腦應用-串口助手，雖然也能滿足這些需求，但它們在便捷性上往往受到限制。它需要去網上下載，有些還需要安裝。

相比之下，在線串口助手的出現為嵌入式工程師帶來了福音。它無需安裝、無需配置，只需通過瀏覽器即可使用。此外，在線串口助手通常提供更為直觀的界面和易于操作的功能，幫助工程師更高效地進行工作。

博主最近看到網上有開發者--老大哥，開源了一個在線串口工具，其鏈接：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瀏覽器。

if(!('serial'innavigator)){
alert('當前瀏覽器不支持串口操作,請更換Edge或Chrome瀏覽器')
}

打開串口

Web Serial API在設計上是異步的。這可以防止網站UI在等待輸入時阻塞，這一點很重要，因為串行數據可以在任何時候接收，需要一種方法來偵聽它。要打開串口，首先訪問一個SerialPort對象。為此，您可以通過調用navigator.serial.requestPort()來提示用戶選擇一個串行端口，或者從navigator.serial.getPorts()中選擇一個，該方法返回一個先前授予該網站訪問權限的串行端口列表。

//提示用戶選擇一個串口。
constserialPort=awaitnavigator.serial.requestPort();

//獲取用戶之前授予該網站訪問權限的所有串口。
constserialPort=awaitnavigator.serial.getPorts();

document.getElementById('serial-select-port').addEventListener('click',async()=>{
try{
awaitnavigator.serial.requestPort().then(async(port)=>{
serialPort?.close()
awaitserialPort?.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()。

asyncfunctioncloseSerial(){
if(serialOpen){
serialOpen=false
reader?.cancel()
serialToggle.innerHTML='打開串口'
disabledOptions(false)
}
}

asyncfunctionreadData(){
while(serialOpen&&serialPort.readable){
reader=serialPort.readable.getReader()
try{
while(true){
const{value,done}=awaitreader.read()
if(done){
break
}
dataReceived(value)
}
}catch(error){
}finally{
reader.releaseLock()
}
}
awaitserialPort.close()
}

串口讀數據

Web Serial API中的輸入流由streams API處理。

串口連接建立之后，SerialPort對象的readable屬性返回ReadableStream。這些將用于從串行設備接收數據, 其使用Uint8Array實例進行數據傳輸。

當新數據從串行設備到達時，port.readable.getReader().read()異步返回兩個屬性:value和一個done的布爾值。如果done為真，則串行端口已經關閉，或者沒有更多的數據輸入。調用port.readable.getReader()創建一個讀取器并將其鎖定為readable。當可讀被鎖定時，串口不能被關閉。

asyncfunctionreadData(){
while(serialOpen&&serialPort.readable){
reader=serialPort.readable.getReader()
try{
while(true){
const{value,done}=awaitreader.read()
if(done){
break
}
dataReceived(value)
}
}catch(error){
}finally{
reader.releaseLock()
}
}
awaitserialPort.close()
}

串口寫數據

Web Serial API中的輸出流由streams API處理。

串口連接建立之后，SerialPort對象的writable屬性返回WritableStream。這些將數據發送到串行設備, 其使用Uint8Array實例進行數據傳輸。

要將數據發送到串行設備，請將數據傳遞到port.writable.getWriter().write()。在port.writable. getwriter()上調用releaseLock()是為了稍后關閉串口。

串口工具提供了hex和字符串發送格式。

asyncfunctionsendHex(hex){
constvalue=hex.replace(/s+/g,'')
if(/^[0-9A-Fa-f]+$/.test(value)&&value.length%2===0){
letdata=[]
for(leti=0;i

	

	總結

	在線串口助手提供了更佳便捷的開發模式，無需下載安裝串口助手。

	R-WebEmbedded - 在線嵌入式工具，其登錄網站：https://ricechen0.gitee.io/r-web-embedded/

	R-WebEmbedded - 在線嵌入式工具開源代碼鏈接：https://gitee.com/RiceChen0/r-web-embedded

	審核編輯 黃宇