4.2.3 设备连接/断开处理
async function toggleConnect(device) {
  try {
    if (device.opened) {
      await device.close();
      currentDevice = null;
      appendToOutput(`设备已断开: ${device.productName}`);
    } else {
      await device.open();
      currentDevice = device;
      appendToOutput(`设备已连接: ${device.productName}`);
      
      // 监听设备输入报告
      device.addEventListener('inputreport', event => {
        const {data, reportId} = event;
        const value = new Uint8Array(data.buffer);
        appendToOutput(`收到数据 (报告ID ${reportId}): ${Array.from(value)}`);
      });
    }
    
    // 刷新设备列表显示
    const devices = await navigator.hid.getDevices();
    updateDeviceList(devices);
  } catch (error) {
    console.error('Error toggling device connection:', error);
    appendToOutput(`操作失败: ${error.message}`);
  }
}
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
4.2.4 数据发送功能
document.getElementById('sendButton').addEventListener('click', async () => {
  if (!currentDevice || !currentDevice.opened) {
    alert('请先连接设备!');
    return;
  }

  const data = document.getElementById('sendData').value;
  try {
    const dataArray = new Uint8Array(data.split(',').map(x => parseInt(x.trim())));
    await currentDevice.sendReport(0, dataArray);
    appendToOutput('已发送数据: ' + data);
  } catch (error) {
    console.error('Error sending data:', error);
    appendToOutput('发送数据失败: ' + error.message);
  }
});
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"> class="hide-preCode-box">

5. 使用说明

5.1 连接设备

  1. 点击"连接新HID设备"按钮
  2. 在弹出的系统对话框中选择要连接的设备
  3. 设备将显示在已连接设备列表中

5.2 数据收发

  1. 连接设备后,设备发送的数据会自动显示在输出日志中
  2. 在输入框中输入要发送的数据(格式:逗号分隔的数字,如 1,2,3,4
  3. 点击"发送数据"按钮发送数据

6. 注意事项

  1. 数据格式

  2. 报告ID

  3. 错误处理

  4. 安全性

7. 调试建议

  1. 使用Chrome开发者工具监控控制台输出
  2. 检查设备连接状态和错误信息
  3. 验证数据格式是否符合设备要求
  4. 确保设备驱动正确安装

8. 扩展建议

  1. 添加设备过滤器,只显示特定类型的设备
  2. 实现自定义数据格式转换
  3. 添加数据可视化功能
  4. 实现设备自动重连机制

9. 参考资源

完整Demo

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HID Device Communicationtitle>
  <style>
    #output {
      width: 100%;
      height: 200px;
      margin: 10px 0;
      padding: 5px;
      border: 1px solid #ccc;
      overflow-y: auto;
    }
    #deviceList {
      margin: 10px 0;
    }
    #deviceList li {
      margin: 5px 0;
      padding: 5px;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .input-group {
      margin: 10px 0;
    }
  style>
head>
<body>
  <h1>WebHID API 演示h1>
  
  <button id="connectButton">连接新HID设备button>
  
  <h2>已连接设备列表:h2>
  <ul id="deviceList">ul>
  
  <div class="input-group">
    <input type="text" id="sendData" placeholder="输入要发送的数据(用逗号分隔的数字)">
    <button id="sendButton">发送数据button>
  div>
  
  <h2>输出日志:h2>
  <pre id="output">pre>

  <script src="hid-demo.js">script>
body>
html>

 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"> class="hide-preCode-box">
let currentDevice = null;

document.addEventListener('DOMContentLoaded', () => {
  // 获取已授权的设备
  navigator.hid.getDevices()
    .then(devices => {
      updateDeviceList(devices);
    })
    .catch(error => {
      console.error('Error getting devices:', error);
    });

  // 连接新设备按钮事件
  document.getElementById('connectButton').addEventListener('click', async () => {
    try {
      // 请求连接HID设备
      const devices = await navigator.hid.requestDevice({
        filters: [] // 空过滤器显示所有设备
      });
      
      if (devices.length > 0) {
        updateDeviceList(devices);
      }
    } catch (error) {
      console.error('Error connecting to device:', error);
    }
  });

  // 发送数据按钮事件
  document.getElementById('sendButton').addEventListener('click', async () => {
    if (!currentDevice || !currentDevice.opened) {
      alert('请先连接设备!');
      return;
    }

    const data = document.getElementById('sendData').value;
    console.log('发送数据: ' + data);
    try {
      // 将输入数据转换为Uint8Array
      const dataArray = new Uint8Array(data.split(',').map(x => parseInt(x.trim())));
      await currentDevice.sendReport(5, dataArray);
      appendToOutput('已发送数据: ' + data);
      console.log('已发送数据: ' + data);
    } catch (error) {
      console.error('Error sending data:', error);
      appendToOutput('发送数据失败: ' + error.message);
    }
  });
});

// 更新设备列表显示
function updateDeviceList(devices) {
  const deviceList = document.getElementById('deviceList');
  deviceList.innerHTML = '';
  
  devices.forEach(device => {
    const li = document.createElement('li');
    li.textContent = `${device.productName} (VID: ${device.vendorId}, PID: ${device.productId})`;
    
    const connectBtn = document.createElement('button');
    connectBtn.textContent = device.opened ? '断开' : '连接';
    connectBtn.addEventListener('click', () => toggleConnect(device));
    
    li.appendChild(connectBtn);
    deviceList.appendChild(li);
  });
}

// 连接/断开设备
async function toggleConnect(device) {
  try {
    if (device.opened) {
      await device.close();
      currentDevice = null;
      appendToOutput(`设备已断开: ${device.productName}`);
    } else {
      await device.open();
      currentDevice = device;
      appendToOutput(`设备已连接: ${device.productName}`);
      
      // 监听设备输入报告
      device.addEventListener('inputreport', event => {
        const {data, reportId} = event;
        const value = new Uint8Array(data.buffer);
        appendToOutput(`收到数据 (报告ID ${reportId}): ${Array.from(value)}`);
      });
    }
    
    // 刷新设备列表显示
    const devices = await navigator.hid.getDevices();
    updateDeviceList(devices);
  } catch (error) {
    console.error('Error toggling device connection:', error);
    appendToOutput(`操作失败: ${error.message}`);
  }
}

// 添加输出信息
function appendToOutput(message) {
  const output = document.getElementById('output');
  output.textContent += message + '\n';
  output.scrollTop = output.scrollHeight;
}

 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"> class="hide-preCode-box">
data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/weixin_38428126/article/details/144208801","extend1":"pc","ab":"new"}">>
注:本文转载自blog.csdn.net的PlutoZuo的文章"https://blog.csdn.net/PlutoZuo/article/details/132838591"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接

评论记录:

未查询到任何数据!