笑死，Web Serial API 拋的異常是 NetworkError 果然計算機處處是前端
這幾天除錯壓力感測器，發現 Web Serial API 著實很簡單，惟需注意以下幾點：
- 這是一個面向瀏覽器的 API，掛在
navigator上，所以需要請求許可權。請求許可權成功後，會拿到一個Port物件。 - 需要拿一個 reader 和 writer，並且只能有唯一的 reader 和唯一的 writer。必須要在寫入資料前拿到 reader，否則可能拿不到寫入後立即返回的資料。
- 讀寫的都是位元組流（
Uint8Array），這個很好理解。 - 寫完資料記得呼叫
writer.releaseLock()。 - 讀資料返回的是
Promise<ReadableStreamReadResult<R>>，有value和done。注意如果done為true可能value還是有內容，注意不要忘記處理。 - 你需要在迴圈裡一直
read。鑑於串列埠的協議一般都是 ASCII，JavaScript 也不對字串作出校驗，所以在拿到每一次 chunk 後立即轉換成文字也無妨。或者，把 readerpipeTo一個TextDecoderStream。 - 由於 JavaScript 一貫的事件驅動的 API 設計，不可避免地用到非同步。所以為了避免競態條件，建議你使用
async-mutex，建立一個 Mutex 然後把每次的讀取和寫入放在.runExclusive(async () => { return ... })裡，並且await其結果。
題外話
簡單做了一個測量的介面，如下。
這個介面是用 Svelte 的 UI 框架 Skeleton 寫的，需要配置 Tailwind。不理解為什麼要對很多 tag 要手寫一個同名的 class（如 .input for <input>），然後我的程式碼裡一個 tag 就變成了好幾行。也算是第一次理解了為什麼切換暗色模式還涉及到服務端渲染這種破事。
右邊的錶盤當然是用 ECharts（svelte-echarts），不過我第一次看到錶盤覺得不應該塞到這麼一個面向於統計圖表的庫裡去，沒想到這麼快就用上了（打臉）。
以及，終於發現，如果你像我很討厭 SvelteKit，正確的方法應該是用 Vite 建立一個 Svelte 應用。（Svelte 4 不管是建立專案還是 lib 都不合時宜地強迫你用 SvelteKit，讓你寫不了單頁應用。）
評論