Web串行API-自动读取

问题描述

我正在使用Chrome Web串行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>

解决方法

您是否考虑过将cookie用作“永久”设置？ IE https://www.w3schools.com/js/js_cookies.asp

祝你好运！

如果用户曾经通过 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

中找到更多背景信息

html javascript serial-port