在 Vue2 前端应用中监听 USB 设备的插入和拔出事件，可以使用浏览器提供的 WebUSB API。这需要运行在支持 WebUSB API 的浏览器上，并且用户需要授予相应的权限。
以下是一个示例，展示如何在 Vue2 项目中监听 USB 设备的插入和拔出事件。
1. 设置 Vue2 项目
假设你已经有一个 Vue2 项目，或者你可以通过 vue-cli 创建一个新的 Vue2 项目。
2. 安装 WebUSB 相关库（可选）
虽然可以直接使用原生的 WebUSB API，但使用库可能会简化开发过程。例如，可以安装 usb 库，不过这个库主要用于 Node.js 环境，如果你只在浏览器中使用，可以直接使用 WebUSB API。
npm install usb
3. 在 Vue2 项目中使用 WebUSB API
在你的 Vue 组件中，可以这样编写代码来监听 USB 设备的插入和拔出事件。
<template>
<div>
<h1>USB 设备监听示例</h1>
<p v-if="usbDevice">当前连接的 USB 设备: {{ usbDevice.productName }}</p>
<p v-else>未检测到 USB 设备</p>
</div>
</template>
<script>
export default {
data() {
return {
usbDevice: null
};
},
mounted() {
this.listenToUsbEvents();
},
methods: {
listenToUsbEvents() {
// 监听 USB 设备的连接
navigator.usb.addEventListener('connect', this.onUsbConnect);
// 监听 USB 设备的断开连接
navigator.usb.addEventListener('disconnect', this.onUsbDisconnect);
// 获取已连接的设备（如果有）
navigator.usb.getDevices().then(devices => {
if (devices.length > 0) {
this.usbDevice = devices[0];
}
});
},
onUsbConnect(event) {
console.log('USB 设备已连接:', event.device);
this.usbDevice = event.device;
},
onUsbDisconnect(event) {
console.log('USB 设备已断开连接:', event.device);
this.usbDevice = null;
}
},
beforeDestroy() {
// 清除事件监听器
navigator.usb.removeEventListener('connect', this.onUsbConnect);
navigator.usb.removeEventListener('disconnect', this.onUsbDisconnect);
}
};
</script>
<style scoped>
h1 {
font-size: 24px;
}
p {
font-size: 18px;
}
</style>
4. 解释代码
- 监听连接事件：在
mounted生命周期钩子中，使用navigator.usb.addEventListener('connect', this.onUsbConnect)监听 USB 设备的连接事件。 - 监听断开事件：同样在
mounted生命周期钩子中，使用navigator.usb.addEventListener('disconnect', this.onUsbDisconnect)监听 USB 设备的断开事件。 - 获取已连接设备：使用
navigator.usb.getDevices()获取当前已连接的 USB 设备。 - 处理连接和断开事件：在
onUsbConnect和onUsbDisconnect方法中，更新组件的状态，显示或隐藏 USB 设备信息。 - 清除事件监听器：在
beforeDestroy生命周期钩子中，清除事件监听器，以避免内存泄漏。
注意事项
- 浏览器支持：确保你使用的浏览器支持 WebUSB API（如 Chrome）。
- 用户权限：用户需要授予访问 USB 设备的权限。
- 设备兼容性：并不是所有 USB 设备都兼容 WebUSB API。
通过这种方式，你可以在 Vue2 应用中监听 USB 设备的插入和拔出事件，并根据需要进行处理。
在浏览器中使用 WebUSB API 时，用户权限是通过用户手动授予的。浏览器会弹出一个对话框，要求用户允许访问特定的 USB 设备。你无法通过代码自动授予权限，但可以引导用户通过交互方式授予权限。
以下是一个示例，展示如何引导用户选择 USB 设备并授予权限：
1. 在 Vue2 组件中引导用户授予权限
你可以在 Vue2 组件中添加一个按钮，点击按钮后请求用户授予访问 USB 设备的权限。
<template>
<div>
<h1>USB 设备监听示例</h1>
<p v-if="usbDevice">当前连接的 USB 设备: {{ usbDevice.productName }}</p>
<p v-else>未检测到 USB 设备</p>
<button @click="requestUsbDevice">连接 USB 设备</button>
</div>
</template>
<script>
export default {
data() {
return {
usbDevice: null
};
},
mounted() {
this.listenToUsbEvents();
},
methods: {
listenToUsbEvents() {
// 监听 USB 设备的连接
navigator.usb.addEventListener('connect', this.onUsbConnect);
// 监听 USB 设备的断开连接
navigator.usb.addEventListener('disconnect', this.onUsbDisconnect);
// 获取已连接的设备（如果有）
navigator.usb.getDevices().then(devices => {
if (devices.length > 0) {
this.usbDevice = devices[0];
}
});
},
requestUsbDevice() {
// 请求用户选择 USB 设备并授予权限
navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] }) // 根据需要设置过滤条件
.then(device => {
this.usbDevice = device;
console.log('已选择 USB 设备:', device);
})
.catch(error => {
console.error('用户未授予 USB 设备权限:', error);
});
},
onUsbConnect(event) {
console.log('USB 设备已连接:', event.device);
this.usbDevice = event.device;
},
onUsbDisconnect(event) {
console.log('USB 设备已断开连接:', event.device);
this.usbDevice = null;
}
},
beforeDestroy() {
// 清除事件监听器
navigator.usb.removeEventListener('connect', this.onUsbConnect);
navigator.usb.removeEventListener('disconnect', this.onUsbDisconnect);
}
};
</script>
<style scoped>
h1 {
font-size: 24px;
}
p {
font-size: 18px;
}
button {
font-size: 16px;
padding: 10px;
margin-top: 20px;
}
</style>
2. 解释代码
requestUsbDevice方法：当用户点击按钮时，这个方法会调用navigator.usb.requestDevice，打开一个对话框，要求用户选择一个 USB 设备并授予权限。你可以使用filters参数来限制用户可以选择的设备类型。listenToUsbEvents方法：设置事件监听器，以便在 USB 设备连接或断开时进行处理。onUsbConnect和onUsbDisconnect方法：更新组件状态以反映设备连接状态。mounted生命周期钩子：在组件挂载时设置事件监听器，并检查是否有已连接的设备。beforeDestroy生命周期钩子：在组件销毁前清除事件监听器，以避免内存泄漏。
3. 过滤条件
在 navigator.usb.requestDevice 中，你可以使用 filters 参数来限制用户可以选择的 USB 设备。这里的 vendorId: 0x2341 是 Arduino 设备的供应商 ID，你可以根据实际情况进行修改。可以根据供应商 ID、产品 ID 等设置过滤条件：
navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
注意事项
- 浏览器支持：确保你的浏览器支持 WebUSB API（如 Chrome）。
- 安全性：WebUSB API 设计用于安全访问 USB 设备，但你仍需要确保你的应用处理 USB 设备时遵循最佳安全实践。
- 用户体验：确保用户了解为何需要授予权限，并提供清晰的引导和反馈。
通过这种方式，你可以在 Vue2 应用中引导用户选择和授予 USB 设备权限，从而实现对 USB 设备的监听和操作。
