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">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
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 连接设备
- 点击"连接新HID设备"按钮
- 在弹出的系统对话框中选择要连接的设备
- 设备将显示在已连接设备列表中
5.2 数据收发
- 连接设备后,设备发送的数据会自动显示在输出日志中
- 在输入框中输入要发送的数据(格式:逗号分隔的数字,如
1,2,3,4
) - 点击"发送数据"按钮发送数据
6. 注意事项
-
数据格式:
- 发送数据需要使用逗号分隔的数字格式
- 不同设备可能需要特定的数据格式,请参考设备文档
-
报告ID:
- 当前示例使用默认报告ID (0)
- 某些设备可能需要特定的报告ID,需要相应修改代码
-
错误处理:
-
安全性:
- 必须在HTTPS或localhost环境下运行
- 需要用户明确授权才能访问设备
7. 调试建议
- 使用Chrome开发者工具监控控制台输出
- 检查设备连接状态和错误信息
- 验证数据格式是否符合设备要求
- 确保设备驱动正确安装
8. 扩展建议
- 添加设备过滤器,只显示特定类型的设备
- 实现自定义数据格式转换
- 添加数据可视化功能
- 实现设备自动重连机制
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">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
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 {
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 {
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">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
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"}">>
评论记录:
回复评论: