對(duì)于嵌入式工程師來(lái)說(shuō)，串口工具在開(kāi)發(fā)和調(diào)試過(guò)程中必不可少的利器。工具能幫助我們發(fā)送和接收串行數(shù)據(jù)，進(jìn)行設(shè)備通信和調(diào)試。通過(guò)串口工具，工程師可以實(shí)時(shí)監(jiān)控串口數(shù)據(jù)，查看設(shè)備是否正常工作，同時(shí)也可以通過(guò)發(fā)送特定的命令來(lái)測(cè)試設(shè)備的反應(yīng)。

傳統(tǒng)的電腦應(yīng)用-串口助手，雖然也能滿足這些需求，但它們?cè)诒憬菪陨贤艿较拗?。它需要去網(wǎng)上下載，有些還需要安裝。

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

博主最近看到網(wǎng)上有開(kāi)發(fā)者--老大哥，開(kāi)源了一個(gè)在線串口工具，其鏈接：https://gitee.com/itldg/web-serial-debug，其開(kāi)源協(xié)議：Apache License 2.0。

通過(guò)上面的啟發(fā)，博主想著也寫(xiě)一個(gè)網(wǎng)頁(yè)（R-WebEmbedded），并集成該開(kāi)源軟件，方便大家使用。

在開(kāi)發(fā)在線串口助手之前，就必須先了解什么是web serial api。

R-WebEmbedded 說(shuō)明

目前該網(wǎng)頁(yè)主要有兩個(gè)功能，開(kāi)源軟件的瀏覽和在線串口工具。

R-WebEmbedded主界面說(shuō)明--主要包含：標(biāo)題，風(fēng)火輪官方鏈接，博主的gitee，github鏈接，以及功能模塊

R-WebEmbedded--開(kāi)源軟件包，該界面展示了博主提交給RT-Threead的軟件包。

R-WebEmbedded - 在線串口助手，該功能集成了老大哥的開(kāi)源的串口工具。界面分為：串口配置區(qū)，串口數(shù)據(jù)收發(fā)區(qū)，串口快捷方式區(qū)。

什么是Web Serial API

串口是一個(gè)雙向通信接口，允許字節(jié)發(fā)送和接收數(shù)據(jù)。

Web Serial API為網(wǎng)站提供了一種使用JavaScript對(duì)串行設(shè)備進(jìn)行讀寫(xiě)的方法。串行設(shè)備可以通過(guò)用戶系統(tǒng)上的串行端口連接，也可以通過(guò)模擬串行端口的可移動(dòng)USB和藍(lán)牙設(shè)備連接。換句話說(shuō)，Web Serial API通過(guò)允許網(wǎng)站與串行設(shè)備(如微控制器和3D打印機(jī))通信來(lái)連接網(wǎng)絡(luò)和物理世界。

如何使用Web Serial API

瀏覽器支持檢測(cè)

檢查瀏覽器是否支持Web Serial API，有些瀏覽器可能不支持該功能，可以選擇Edge或Chrome瀏覽器。

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

打開(kāi)串口

Web Serial API在設(shè)計(jì)上是異步的。這可以防止網(wǎng)站UI在等待輸入時(shí)阻塞，這一點(diǎn)很重要，因?yàn)榇袛?shù)據(jù)可以在任何時(shí)候接收，需要一種方法來(lái)偵聽(tīng)它。要打開(kāi)串口，首先訪問(wèn)一個(gè)SerialPort對(duì)象。為此，您可以通過(guò)調(diào)用navigator.serial.requestPort()來(lái)提示用戶選擇一個(gè)串行端口，或者從navigator.serial.getPorts()中選擇一個(gè)，該方法返回一個(gè)先前授予該網(wǎng)站訪問(wèn)權(quán)限的串行端口列表。

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

//獲取用戶之前授予該網(wǎng)站訪問(wèn)權(quán)限的所有串口。
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('獲取串口權(quán)限出錯(cuò)'+e.toString())
}
})

當(dāng)我選擇好了SerialPort對(duì)象之后，調(diào)用serialPort.open()，打開(kāi)串口。其中打開(kāi)串口可以指定其選項(xiàng)，選項(xiàng)是有默認(rèn)值，并且是可選的。

dataBits：每幀的數(shù)據(jù)位數(shù)(7或8)。
stopBits：一幀結(jié)束時(shí)的停止位數(shù)(1或2)。
parity：校驗(yàn)?zāi)Ｊ?，可以是none，偶數(shù)，奇數(shù)。
bufferSize：應(yīng)該創(chuàng)建的讀寫(xiě)緩沖區(qū)大小(必須小于16MB)。
flowControl：流控模式(none或hardware)。

關(guān)閉串口

當(dāng)我們不再使用串口時(shí)，我們需要將串口對(duì)象關(guān)閉，調(diào)用serialPort.close()。如果串行端口的readable和writable被解鎖，則關(guān)閉該串行端口，這意味著已經(jīng)為其各自的讀寫(xiě)成員調(diào)用了releaseLock()。但是，當(dāng)使用循環(huán)從串行設(shè)備連續(xù)讀取數(shù)據(jù)時(shí)，端口Readable將一直被鎖定，直到遇到錯(cuò)誤。在這種情況下，調(diào)用reader.cancel()將強(qiáng)制reader.read()立即解析為{value: undefined, done: true}，從而允許循環(huán)調(diào)用reader.releaseLock()。

asyncfunctioncloseSerial(){
if(serialOpen){
serialOpen=false
reader?.cancel()
serialToggle.innerHTML='打開(kāi)串口'
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()
}

串口讀數(shù)據(jù)

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

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

當(dāng)新數(shù)據(jù)從串行設(shè)備到達(dá)時(shí)，port.readable.getReader().read()異步返回兩個(gè)屬性:value和一個(gè)done的布爾值。如果done為真，則串行端口已經(jīng)關(guān)閉，或者沒(méi)有更多的數(shù)據(jù)輸入。調(diào)用port.readable.getReader()創(chuàng)建一個(gè)讀取器并將其鎖定為readable。當(dāng)可讀被鎖定時(shí)，串口不能被關(guān)閉。

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()
}

串口寫(xiě)數(shù)據(jù)

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

串口連接建立之后，SerialPort對(duì)象的writable屬性返回WritableStream。這些將數(shù)據(jù)發(fā)送到串行設(shè)備, 其使用Uint8Array實(shí)例進(jìn)行數(shù)據(jù)傳輸。

要將數(shù)據(jù)發(fā)送到串行設(shè)備，請(qǐng)將數(shù)據(jù)傳遞到port.writable.getWriter().write()。在port.writable. getwriter()上調(diào)用releaseLock()是為了稍后關(guān)閉串口。

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

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

	

	總結(jié)

	在線串口助手提供了更佳便捷的開(kāi)發(fā)模式，無(wú)需下載安裝串口助手。

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

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

	審核編輯 黃宇