Web Serial API - 自動讀取

Question

我正在使用 Chrome Web Serial API，當我單擊按鈕並手動選擇端口時它工作正常。 現在我想在打開頁面時自動選擇端口（COM1）。 我不想單擊按鈕並選擇端口。 此外，當我重新加載頁面時，我失去了與端口的連接。 有誰知道我怎么能這樣做？ 提前致謝！

這是我的代碼：

 "use strict"; class SerialScaleController { constructor() { this.encoder = new TextEncoder(); this.decoder = new TextDecoder(); } async init() { if ('serial' in navigator) { try { console.log(navigator) const port = await navigator.serial.requestPort(); await port.open({ baudRate: 9600 }); this.reader = port.readable.getReader(); let signals = await port.getSignals(); } catch (err) { console.error('There was an error opening the serial port:', err); } } else { console.error('Web serial doesn\\'t seem to be enabled in your browser. Try enabling it by visiting:'); console.error('chrome://flags/#enable-experimental-web-platform-features'); console.error('opera://flags/#enable-experimental-web-platform-features'); console.error('edge://flags/#enable-experimental-web-platform-features'); } } async read() { try { const readerData = await this.reader.read(); console.log(readerData) return this.decoder.decode(readerData.value); } catch (err) { const errorMessage = `error reading data: ${err}`; console.error(errorMessage); return errorMessage; } } } const serialScaleController = new SerialScaleController(); const connect = document.getElementById('connect-to-serial'); const getSerialMessages = document.getElementById('get-serial-messages'); connect.addEventListener('pointerdown', () => { serialScaleController.init(); }); getSerialMessages.addEventListener('pointerdown', async () => { getSerialMessage(); }); async function getSerialMessage() { document.querySelector("#serial-messages-container .message").innerText += await serialScaleController.read() }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Serial</title> </head> <body> <div class="serial-scale-div"> <button class="btn" id="connect-to-serial">Connect with Serial Device</button> </div> <button id="get-serial-messages">Get serial messages</button> <div id="serial-messages-container"> <div class="message"></div> </div> </body> </html>

Answer 1

您是否考慮過使用 cookie 作為“持久”設置？ IE https://www.w3schools.com/js/js_cookies.asp

祝你好運！

Answer 2

如果用戶通過 requestPort() 批准了您一次，那么將來您可以使用 getPorts() 來獲取您以前擁有的端口數組，例如這樣。

// CanPrompt is 1 if being called from user button click etc
// Or 0 if calling from serial.onconnect or page load checking for device

var port = null;
if (CanPrompt) {
    port = await navigator.serial.requestPort();
} else {
    port = await navigator.serial.getPorts();
    if ((port !== null) && (Array.isArray(port)) && (port.length > 0)) {
        port = port[0];
    } else return;
}
await port.open({ baudRate: 19200 });

更多背景信息可以在封閉的 git 問題https://github.com/WICG/serial/issues/131 中找到

Answer 3

我相信 web 序列的一個要求是除了在具有 TLS 的站點上交付之外，還需要用戶交互以確保安全。

Web Serial API - 自動讀取

問題描述

3 個解決方案

解決方案1
0 2020-11-20 05:16:00

解決方案2
0 2021-05-17 06:34:54

解決方案3
0 2021-10-21 17:15:02

Web Serial API - 自動讀取

問題描述

3 個解決方案

解決方案1 0 2020-11-20 05:16:00

解決方案2 0 2021-05-17 06:34:54

解決方案3 0 2021-10-21 17:15:02

解決方案1
0 2020-11-20 05:16:00

解決方案2
0 2021-05-17 06:34:54

解決方案3
0 2021-10-21 17:15:02