如何从USB端口向HTML网站发送信号？JavaScript实现及硬件编码咨询

嘿，我来帮你拆解从USB设备向HTML网站发送信号的完整流程，分前端（HTML/JS）和硬件编码两部分，尽量用零基础友好的方式讲清楚～

Web USB是浏览器原生支持的API，不需要额外库就能实现USB设备和网页的通信，步骤如下：

1. 请求用户授权访问USB设备 #

首先得让用户允许浏览器访问你的USB设备，需要指定设备的供应商ID（VID）和产品ID（PID）（硬件端会设置这两个值），示例代码：

async function requestUSBDevice() {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [
        { vendorId: 0x2341, productId: 0x8036 } // 这里替换成你的设备VID/PID，比如Arduino Leonardo的默认值
      ]
    });
    console.log("已连接设备:", device);
    return device;
  } catch (error) {
    console.error("访问设备失败:", error);
  }
}

2. 打开设备并配置通信端点 #

USB设备通过端点传输数据，IN端点是设备向主机（浏览器）发数据，OUT端点是主机向设备发数据。我们需要打开设备、激活配置，然后获取IN端点：

async function setupDevice(device) {
  await device.open();
  if (device.configuration === null) {
    await device.selectConfiguration(1); // 通常选第一个配置
  }
  // 找到IN端点（假设端点地址是0x81，硬件端要对应）
  const targetInterface = device.configuration.interfaces[0];
  const inEndpoint = targetInterface.endpoints.find(endpoint => endpoint.direction === 'in');
  return inEndpoint;
}

3. 监听USB设备发来的数据 #

用transferIn方法循环读取数据，或者监听事件，示例：

async function listenForData(inEndpoint) {
  while (true) {
    const result = await inEndpoint.transferIn(64); // 每次读取64字节
    const decoder = new TextDecoder();
    const data = decoder.decode(result.data);
    console.log("收到USB数据:", data);
    // 这里可以把数据更新到HTML页面，比如显示在div里
    document.getElementById("usb-data").textContent = data;
  }
}

然后把这些函数串起来，在HTML里加个按钮触发：

<button onclick="initUSB()">连接USB设备</button>
<div id="usb-data">等待数据...</div>

<script>
async function initUSB() {
  const device = await requestUSBDevice();
  if (device) {
    const inEndpoint = await setupDevice(device);
    listenForData(inEndpoint);
  }
}
</script>

如果你完全不懂硬件，Arduino是最容易上手的选择，它有现成的USB通信库，不用写底层驱动，步骤如下：

1. 选择合适的Arduino板子 #

• 推荐Arduino Leonardo或Micro：它们原生支持USB HID/CDC，可以直接作为USB设备和浏览器通信，不需要额外的USB转串口芯片
• 如果用Arduino Uno：需要通过USB转串口（CH340/FT232）通信，此时前端可以用Web Serial API（和Web USB类似，更适合串口设备）

2. Arduino代码示例（发送信号到JS） #

以Arduino Leonardo为例，用USB CDC发送字符串数据，代码非常简单：

void setup() {
  Serial.begin(9600); // 初始化USB串口，波特率9600
  while (!Serial) {
    ; // 等待串口连接
  }
}

void loop() {
  // 发送自定义信号，比如传感器数据或固定字符串
  Serial.println("Hello from USB!");
  delay(1000); // 每秒发一次
}

如果是发送字节数据（比如传感器的数值），可以用Serial.write()：

void loop() {
  int sensorValue = analogRead(A0); // 读取A0引脚的模拟值
  Serial.write((byte)(sensorValue >> 8)); // 发送高字节
  Serial.write((byte)sensorValue); // 发送低字节
  delay(500);
}

3. 上传代码到Arduino #

1. 下载安装Arduino IDE
2. 连接Arduino到电脑USB端口
3. 在IDE里选择对应的板子（比如Tools > Board > Arduino Leonardo）和端口（Tools > Port）
4. 点击上传按钮，代码就会烧录到硬件里

4. 获取设备的VID/PID #

• Arduino Leonardo默认VID是0x2341，PID是0x8036，可以在Arduino IDE的板子信息里找到
• 如果需要自定义VID/PID，可以修改Arduino的核心库文件，或者用专门的USB开发板

• 浏览器支持：Web USB API只支持Chromium内核的浏览器（Chrome、Edge、Opera等），Firefox目前不支持
• 权限问题：每次打开网页都需要用户手动点击授权按钮，浏览器不能自动访问USB设备
• 数据格式转换：硬件发送的是原始字节流，前端需要用TextDecoder转成字符串，或者解析成数字（比如处理传感器的16位数值）
• 串口 vs Web USB：如果用的是带USB转串口的设备（比如Uno），可以用Web Serial API，操作和Web USB类似，更适合串口通信场景

内容的提问来源于stack exchange，提问作者Mikey