通过Web Serial API编写一个实现串口通信demo

要实现一个串口通信的demo，可以使用Web Serial API来连接和通信。

首先，需要在HTML文件中添加一个按钮和一些文本框，用于输入和显示数据。然后，可以使用以下JavaScript代码来连接和通信串口。

// 获取页面元素
const connectButton = document.getElementById('connectButton');
const disconnectButton = document.getElementById('disconnectButton');
const sendButton = document.getElementById('sendButton');
const receivedData = document.getElementById('receivedData');
const inputData = document.getElementById('inputData');

// 串口对象
let serialPort;

// 连接串口
connectButton.addEventListener('click', async () => {
  try {
    // 请求用户授权
    const port = await navigator.serial.requestPort();

    // 打开串口
    await port.open({ baudRate: 9600 });

    // 设置串口对象
    serialPort = port;

    // 监听数据接收事件
    const reader = port.readable.getReader();
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break;
      }
      receivedData.textContent += new TextDecoder().decode(value);
    }

    // 禁用连接按钮，启用发送和断开按钮
    connectButton.disabled = true;
    sendButton.disabled = false;
    disconnectButton.disabled = false;
  } catch (error) {
    console.error(error);
  }
});

// 断开连接
disconnectButton.addEventListener('click', async () => {
  try {
    // 关闭串口
    await serialPort.close();

    // 清空接收数据
    receivedData.textContent = '';

    // 启用连接按钮，禁用发送和断开按钮
    connectButton.disabled = false;
    sendButton.disabled = true;
    disconnectButton.disabled = true;
  } catch (error) {
    console.error(error);
  }
});

// 发送数据
sendButton.addEventListener('click', async () => {
  try {
    const data = inputData.value;

    // 发送数据
    await serialPort.write(new TextEncoder().encode(data));

    // 清空输入框
    inputData.value = '';
  } catch (error) {
    console.error(error);
  }
});

在HTML文件中，需要添加以下内容：

<button id="connectButton">连接</button>
<button id="disconnectButton" disabled>断开</button>
<input type="text" id="inputData" />
<button id="sendButton" disabled>发送</button>
<div id="receivedData"></div>

这样就可以通过Web Serial API实现一个简单的串口通信demo了