如何在 Vue 项目中，实现一个基于 `WebUSB` 或 `WebBluetooth` 的硬件设备交互功能？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊Vue项目里怎么玩转WebUSB和WebBluetooth，让你的网页直接跟硬件“眉来眼去”。放心，保证通俗易懂，代码管够，就算你是新手村出来的，也能听得明白。

一、开胃小菜：WebUSB/WebBluetooth 是个啥？

别听到“USB”和“蓝牙”就觉得头大，其实它们就是浏览器赋予你直接操控硬件的超能力。

WebUSB： 允许网页直接访问通过USB连接的设备。想象一下，你的网页可以控制3D打印机、扫描仪、示波器，是不是瞬间高大上了？
WebBluetooth： 顾名思义，让网页能够与蓝牙设备通信。智能手表、心率带、智能家居设备，都可以变成你网页的“小弟”。

二、准备工作：磨刀不误砍柴工

确保你的浏览器支持： 别白忙活一场，先确认你的Chrome（推荐）或者Edge版本够新，支持WebUSB/WebBluetooth API。
HTTPS是标配： 为了安全起见，WebUSB/WebBluetooth 只能在HTTPS环境下使用。本地开发可以用 localhost，部署上线就得安排HTTPS证书了。
设备权限： 用户必须明确授权你的网页访问设备。别想着偷偷摸摸控制别人的设备，那是违法的！

三、WebUSB 实战：让网页“摸”到USB设备

HTML 结构：搭好舞台

先在你的 Vue 组件里准备好按钮和显示信息的区域：

<template>
  <div>
    <button @click="connectUSB">连接USB设备</button>
    <p>设备信息：{{ deviceInfo }}</p>
    <p>接收到的数据：{{ receivedData }}</p>
  </div>
</template>

JavaScript 代码：编写剧本

<script>
export default {
  data() {
    return {
      device: null,
      deviceInfo: '未连接',
      receivedData: '',
    };
  },
  methods: {
    async connectUSB() {
      try {
        // 1. 请求设备
        this.device = await navigator.usb.requestDevice({ filters: [] }); // filters 可以指定设备类型
        console.log('已选择设备:', this.device);

        // 2. 打开设备
        await this.device.open();
        console.log('设备已打开');

        // 3. 选择配置 (通常是第一个)
        await this.device.selectConfiguration(1);
        console.log('配置已选择');

        // 4. 声明要使用的接口 (例如，接口0)
        await this.device.claimInterface(0);
        console.log('接口已声明');

        // 5. 重置设备
        await this.device.controlTransferOut({
          requestType: 'standard',
          recipient: 'interface',
          request: 0x0B, // USB 定义的 reset 请求
          value: 0,
          index: 0,
        });
        console.log('设备已重置');

        this.deviceInfo = `设备名称: ${this.device.productName}, 厂商: ${this.device.manufacturerName}`;

        // 6. 开始监听数据 (假设使用端点 1)
        this.readDataFromEndpoint(1);

      } catch (error) {
        console.error('连接失败:', error);
        this.deviceInfo = '连接失败：' + error.message;
      }
    },
    async readDataFromEndpoint(endpointNumber) {
      while (this.device && this.device.opened) {
        try {
          const result = await this.device.transferIn(endpointNumber, 64); // 64 是缓冲区大小
          if (result.status === 'ok') {
            const data = new Uint8Array(result.data.buffer);
            // 将接收到的数据转换为字符串 (假设是 UTF-8)
            const decodedString = new TextDecoder().decode(data);
            this.receivedData += decodedString;
            console.log('接收到的数据:', decodedString);
          } else {
            console.warn('传输状态:', result.status);
            break;
          }
        } catch (error) {
          console.error('读取数据失败:', error);
          break;
        }
        // 稍微等待一段时间，避免过度占用资源
        await new Promise(resolve => setTimeout(resolve, 10));
      }
      console.log('停止读取数据');
    },
  },
};
</script>

关键代码解析：庖丁解牛
- navigator.usb.requestDevice({ filters: [] }): 弹出设备选择框，让用户选择要连接的USB设备。filters 可以用来过滤设备，只显示特定类型的设备。
- device.open(): 打开设备，建立连接。
- device.selectConfiguration(1): 选择配置。USB设备可能有多个配置，一般选择第一个。
- device.claimInterface(0): 声明要使用的接口。一个设备可能有多个接口，每个接口负责不同的功能。
- device.controlTransferOut(...): 通过控制传输发送指令到设备。上面的代码发送了一个USB定义的reset指令。
- device.transferIn(endpointNumber, 64): 从指定的端点读取数据。endpointNumber 是端点号码，64 是缓冲区大小。
- new TextDecoder().decode(data): 将接收到的二进制数据转换为字符串。
- 循环读取数据：使用 while 循环不断读取数据，直到设备断开连接。
注意事项：避坑指南
- 设备描述符： 你需要了解你的USB设备的描述符，包括VID（Vendor ID）和PID（Product ID）。这些信息可以帮助你更精确地过滤设备。
- 端点： USB设备有不同的端点，用于不同的数据传输方向和类型。你需要知道哪个端点用于接收数据，哪个端点用于发送数据。
- 错误处理： WebUSB API 可能会抛出各种异常，所以要做好错误处理，给用户友好的提示。

四、WebBluetooth 实战：让网页“勾搭”蓝牙设备

HTML 结构：老规矩，先搭台

<template>
  <div>
    <button @click="connectBluetooth">连接蓝牙设备</button>
    <p>设备名称：{{ deviceName }}</p>
    <p>接收到的数据：{{ receivedData }}</p>
  </div>
</template>

JavaScript 代码：好戏开锣

<script>
export default {
  data() {
    return {
      device: null,
      deviceName: '未连接',
      receivedData: '',
      characteristic: null,
    };
  },
  methods: {
    async connectBluetooth() {
      try {
        // 1. 请求设备
        this.device = await navigator.bluetooth.requestDevice({
          acceptAllDevices: true, // 或者使用 filters: [{ services: ['服务UUID'] }]
          optionalServices: ['服务UUID'], // 可选服务，提高扫描速度
        });
        console.log('已选择设备:', this.device);

        // 2. 连接 GATT 服务器
        const server = await this.device.gatt.connect();
        console.log('GATT 服务器已连接');

        this.deviceName = this.device.name;

        // 3. 获取服务 (替换为你的服务 UUID)
        const service = await server.getPrimaryService('服务UUID'); // 例如：'0000ffe0-0000-1000-8000-00805f9b34fb'
        console.log('服务已获取');

        // 4. 获取特征 (替换为你的特征 UUID)
        this.characteristic = await service.getCharacteristic('特征UUID'); // 例如：'0000ffe1-0000-1000-8000-00805f9b34fb'
        console.log('特征已获取');

        // 5. 启用通知 (如果特征支持)
        await this.characteristic.startNotifications();
        console.log('通知已启用');

        // 6. 监听数据变化
        this.characteristic.addEventListener('characteristicvaluechanged', this.handleCharacteristicValueChanged);

      } catch (error) {
        console.error('连接失败:', error);
        this.deviceName = '连接失败：' + error.message;
      }
    },
    handleCharacteristicValueChanged(event) {
      const value = event.target.value;
      // 将接收到的数据转换为字符串 (假设是 UTF-8)
      const decodedString = new TextDecoder().decode(value);
      this.receivedData += decodedString;
      console.log('接收到的数据:', decodedString);
    },
  },
  beforeUnmount() {
    // 组件卸载前，移除监听器并断开连接
    if (this.characteristic) {
      this.characteristic.removeEventListener('characteristicvaluechanged', this.handleCharacteristicValueChanged);
      this.characteristic.stopNotifications(); // 停止通知
    }
    if (this.device && this.device.gatt.connected) {
      this.device.gatt.disconnect();
    }
  },
};
</script>

关键代码解析：抽丝剥茧
- navigator.bluetooth.requestDevice(...): 弹出设备选择框，让用户选择要连接的蓝牙设备。acceptAllDevices: true 允许连接所有设备，filters 可以用来过滤设备，只显示特定类型的设备。
- device.gatt.connect(): 连接 GATT 服务器。GATT (Generic Attribute Profile) 是蓝牙设备之间通信的协议。
- server.getPrimaryService('服务UUID'): 获取服务。每个蓝牙设备都提供不同的服务，每个服务都有一个唯一的 UUID。
- service.getCharacteristic('特征UUID'): 获取特征。每个服务都包含多个特征，每个特征也有一个唯一的 UUID。特征是实际读写数据的通道。
- characteristic.startNotifications(): 启用通知。如果特征支持通知，设备会在数据变化时主动推送数据到你的网页。
- characteristic.addEventListener('characteristicvaluechanged', this.handleCharacteristicValueChanged): 监听数据变化事件。当特征的值发生变化时，会触发这个事件。
- beforeUnmount(): 在组件卸载前，移除监听器并断开连接，避免内存泄漏。
注意事项：排雷兵
- UUID： 服务的 UUID 和特征的 UUID 是连接蓝牙设备的关键。你需要从你的蓝牙设备文档或者开发者那里获取这些信息。
- 蓝牙权限： 某些蓝牙设备可能需要配对才能连接。
- 错误处理： 蓝牙连接可能会因为各种原因失败，所以要做好错误处理，给用户友好的提示。
- 跨域问题： 如果你的网页部署在HTTPS环境下，但是你的蓝牙设备广播的是HTTP服务，可能会遇到跨域问题。

五、Vue项目中使用 WebUSB/WebBluetooth 的一些技巧

状态管理： 使用 Vuex 或者 Pinia 来管理设备连接状态和数据，方便在不同的组件之间共享。
封装： 将 WebUSB/WebBluetooth 的代码封装成独立的模块或者组件，提高代码的可维护性和复用性。
UI 交互： 使用 Vue 的响应式特性，根据设备连接状态动态更新 UI，给用户更好的体验。
第三方库： 可以使用一些第三方库来简化 WebUSB/WebBluetooth 的开发，例如 noble (Node.js 环境) 或者 web-bluetooth (浏览器环境)。

六、一些常用的调试方法

Chrome DevTools： Chrome DevTools 提供了强大的调试功能，可以查看 USB/Bluetooth 设备的信息、发送和接收的数据、以及调试 JavaScript 代码。
Web Bluetooth Developer Studio： 一个 Chrome 扩展，可以模拟蓝牙设备，方便你进行开发和测试。
USBlyzer： 一个专业的 USB 协议分析工具，可以捕获和分析 USB 数据包。

七、总结：武功秘籍

功能	WebUSB	WebBluetooth
连接方式	USB线	蓝牙
适用场景	需要高速数据传输的设备，例如3D打印机	无线连接的设备，例如智能手表
开发难度	相对简单，但需要了解USB协议	相对复杂，需要了解蓝牙协议和GATT
兼容性	较好，主流浏览器都支持	较好，主流浏览器都支持，但需要HTTPS
安全性	需要用户授权，HTTPS环境	需要用户授权，HTTPS环境
核心API	`navigator.usb.requestDevice()`	`navigator.bluetooth.requestDevice()`
数据传输	`transferIn()`, `transferOut()`	`characteristic.readValue()`, `characteristic.writeValue()`, `characteristic.startNotifications()`
常见问题	设备描述符，端点，错误处理	UUID，蓝牙权限，错误处理，跨域问题

好了，今天的讲座就到这里。希望大家能够掌握 WebUSB 和 WebBluetooth 的基本用法，让你的 Vue 项目更加强大。记住，实践是检验真理的唯一标准，多动手，多尝试，你就能成为 WebUSB/WebBluetooth 的高手！

发表回复 取消回复

发表回复取消回复