JS `Web Bluetooth API` (浏览器)：与蓝牙设备进行交互

各位靓仔靓女，早上好！（或者下午/晚上好，取决于你读到这段文字的时间）。今天咱们来聊聊一个听起来很高大上，但其实入门非常简单的东西：Web Bluetooth API。

想象一下，你可以直接用浏览器控制你的智能灯泡，读取手环的数据，甚至遥控你的智能小车。听起来是不是很酷炫？Web Bluetooth API就能帮你实现这些。

一、什么是Web Bluetooth API？

简单来说，Web Bluetooth API 允许你在网页上通过蓝牙与附近的设备进行通信。它就像一个桥梁，连接了你的浏览器和各种支持蓝牙的硬件设备。

二、Web Bluetooth API 的优势和局限性

优势：

跨平台： 只要浏览器支持（Chrome, Edge, Opera 等），你的代码就可以在不同的操作系统上运行。
无需安装： 用户不需要安装任何插件或驱动程序，直接在浏览器中使用。
安全性： Web Bluetooth API 提供了很多安全机制，例如用户授权、加密通信等。
标准化： 这是一个 W3C 标准，所以不用担心被某个厂商绑架。

局限性：

浏览器支持： 并非所有浏览器都支持 Web Bluetooth API。
硬件兼容性： 并非所有蓝牙设备都支持 Web Bluetooth API。有些设备可能需要特定的驱动程序或配置。
安全限制： 为了保护用户隐私，Web Bluetooth API 有很多安全限制，例如只能通过 HTTPS 访问，需要用户授权等。

三、Web Bluetooth API 的基本概念

在开始写代码之前，我们需要了解一些基本概念：

Bluetooth Device（蓝牙设备）： 就是你想连接的硬件设备，比如智能灯泡、手环、智能小车等。
Bluetooth Service（蓝牙服务）： 设备提供的特定功能集合，比如心率监测、电量显示等。一个设备可以提供多个服务。
Bluetooth Characteristic（蓝牙特征）： 服务中的一个特定属性或数据点，比如心率值、电量百分比等。你可以读取或写入特征的值。
UUID（通用唯一识别码）： 用于唯一标识蓝牙设备、服务和特征。

你可以把蓝牙设备想象成一栋大楼，蓝牙服务是楼里的房间，蓝牙特征是房间里的家具。UUID 就是每个房间和家具的门牌号。

四、开始你的第一个 Web Bluetooth 应用

废话不多说，直接上代码！

1. HTML 结构

首先，我们需要一个简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  <title>Web Bluetooth Demo</title>
</head>
<body>
  <button id="connectButton">Connect Bluetooth Device</button>
  <div id="output"></div>

  <script src="script.js"></script>
</body>
</html>

这个页面包含一个按钮，用于触发连接蓝牙设备的操作，以及一个 div 元素，用于显示输出信息。

2. JavaScript 代码

接下来，我们编写 JavaScript 代码来实现连接蓝牙设备的功能：

const connectButton = document.getElementById('connectButton');
const output = document.getElementById('output');

connectButton.addEventListener('click', async () => {
  try {
    // 1. 请求蓝牙设备
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['battery_service'] }] // 指定要搜索的服务 UUID
    });

    log('Device Name: ' + device.name);

    // 2. 连接 GATT 服务器
    const server = await device.gatt.connect();

    log('GATT Server Connected');

    // 3. 获取 Battery Service
    const service = await server.getPrimaryService('battery_service');

    log('Battery Service Found');

    // 4. 获取 Battery Level Characteristic
    const characteristic = await service.getCharacteristic('battery_level');

    log('Battery Level Characteristic Found');

    // 5. 读取 Battery Level 的值
    const batteryLevel = await characteristic.readValue();

    const batteryPercentage = batteryLevel.getUint8(0);

    log('Battery Level: ' + batteryPercentage + '%');

  } catch (error) {
    log('Error: ' + error);
  }
});

function log(message) {
  output.innerHTML += message + '<br>';
}

这段代码做了以下几件事：

请求蓝牙设备： navigator.bluetooth.requestDevice() 方法会弹出一个对话框，让用户选择要连接的蓝牙设备。filters 选项用于指定要搜索的服务 UUID。这里我们指定了 battery_service，也就是电量服务。你需要根据你的设备支持的服务来修改这个值。
连接 GATT 服务器： device.gatt.connect() 方法用于连接设备的 GATT 服务器。GATT (Generic Attribute Profile) 是一种蓝牙协议，用于定义设备如何暴露其服务和特征。
获取 Battery Service： server.getPrimaryService() 方法用于获取指定 UUID 的服务。
获取 Battery Level Characteristic： service.getCharacteristic() 方法用于获取指定 UUID 的特征。
读取 Battery Level 的值： characteristic.readValue() 方法用于读取特征的值。这里我们假设 Battery Level 是一个 8 位的无符号整数，表示电量百分比。

重要提示：

这段代码需要在 HTTPS 环境下运行，否则浏览器会拒绝访问蓝牙 API。
你需要一个支持 battery_service 的蓝牙设备才能看到效果。
你需要允许网页访问你的蓝牙设备。

3. 详细步骤分解

让我们把上面的代码拆解一下，更深入地了解每个步骤：

Step 1: navigator.bluetooth.requestDevice()

这个方法是整个流程的起点。它会弹出设备选择对话框，让用户选择要连接的设备。 filters 参数非常重要，它决定了浏览器会显示哪些设备。

filters 参数的类型： 一个包含一个或多个对象的数组，每个对象描述一个过滤条件。

filters 参数的常见选项：

选项	类型	描述
`services`	数组	一个 UUID 字符串数组，指定要搜索的服务 UUID。
`name`	字符串	指定要搜索的设备名称。
`namePrefix`	字符串	指定要搜索的设备名称前缀。
`deviceId`	字符串	指定要连接的设备 ID。
`manufacturerData`	数组	制造商数据过滤器，更高级的用法，可以根据制造商特定的数据进行过滤。

例子：

// 只搜索提供 "battery_service" 或 "heart_rate" 服务的设备
const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ['battery_service', 'heart_rate'] }]
});

// 只搜索名称以 "MyDevice" 开头的设备
const device = await navigator.bluetooth.requestDevice({
  filters: [{ namePrefix: 'MyDevice' }]
});

// 同时使用 services 和 namePrefix
const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ['battery_service'], namePrefix: 'MyDevice' }]
});

Step 2: device.gatt.connect()

GATT (Generic Attribute Profile) 是蓝牙协议栈中的一个重要组成部分。它定义了如何发现服务、读取和写入特征值。 device.gatt.connect() 方法会尝试连接到设备的 GATT 服务器。

Step 3: server.getPrimaryService()

这个方法用于获取指定 UUID 的主要服务。主要服务是设备提供的核心功能。

Step 4: service.getCharacteristic()

这个方法用于获取指定 UUID 的特征。特征是服务中的一个特定属性或数据点。

Step 5: characteristic.readValue()

这个方法用于读取特征的值。返回值是一个 DataView 对象，你可以使用 DataView 的方法来解析数据。

五、读取和写入特征值

除了读取特征值，我们还可以写入特征值。这允许我们控制设备的行为。

示例：写入特征值

假设我们有一个可以控制 LED 灯颜色的特征，UUID 为 0xFF01。我们可以使用以下代码来设置 LED 灯的颜色为红色：

// 假设 characteristic 已经获取到
const redColor = new Uint8Array([255, 0, 0]); // RGB 红色
await characteristic.writeValue(redColor);
log('LED color set to red');

characteristic.writeValue() 方法接受一个 ArrayBuffer 或 DataView 对象作为参数。我们需要将要写入的数据转换为 ArrayBuffer 或 DataView 对象。

六、监听特征值变化

有些特征值会定期更新，比如心率值、电量百分比等。我们可以监听特征值的变化，并在值发生变化时执行相应的操作。

示例：监听 Battery Level 变化

// 假设 characteristic 已经获取到
await characteristic.startNotifications(); // 启动通知

characteristic.addEventListener('characteristicvaluechanged', event => {
  const batteryLevel = event.target.value.getUint8(0);
  log('Battery Level Changed: ' + batteryLevel + '%');
});

characteristic.startNotifications() 方法用于启动通知。当特征值发生变化时，会触发 characteristicvaluechanged 事件。我们可以在事件监听器中获取新的特征值。

七、错误处理

在使用 Web Bluetooth API 时，可能会遇到各种错误。例如，设备可能不支持某个服务或特征，连接可能失败，读取或写入操作可能超时等。我们需要妥善处理这些错误，以提高应用的健壮性。

示例：错误处理

try {
  // ... (连接设备、获取服务、获取特征) ...

  const batteryLevel = await characteristic.readValue();
  const batteryPercentage = batteryLevel.getUint8(0);
  log('Battery Level: ' + batteryPercentage + '%');

} catch (error) {
  log('Error: ' + error);
  console.error(error); // 在控制台中打印更详细的错误信息
}

在 catch 块中，我们可以记录错误信息，向用户显示友好的错误提示，或者尝试重新连接设备。

八、安全性考虑

Web Bluetooth API 涉及与硬件设备通信，因此安全性非常重要。以下是一些安全建议：

使用 HTTPS： Web Bluetooth API 只能在 HTTPS 环境下使用。
用户授权： 在连接蓝牙设备之前，必须获得用户的授权。
加密通信： 使用加密通信来保护数据的安全。
验证设备： 验证连接的设备是否是可信的设备。
限制权限： 只请求必要的权限。

九、常见问题和解决方案

问题： navigator.bluetooth 未定义。
- 解决方案： 确保你的浏览器支持 Web Bluetooth API，并且在 HTTPS 环境下运行。
问题： 无法连接到设备。
- 解决方案： 确保设备已开启蓝牙，并且在范围内。检查设备是否支持 Web Bluetooth API。尝试重启设备和浏览器。
问题： 无法读取或写入特征值。
- 解决方案： 确保你已经连接到设备的 GATT 服务器。检查特征是否支持读取或写入操作。检查 UUID 是否正确。

十、实战案例

智能家居控制： 使用 Web Bluetooth API 控制智能灯泡、智能插座、智能窗帘等。
健康监测： 使用 Web Bluetooth API 读取心率手环、血压计、血糖仪的数据。
智能玩具： 使用 Web Bluetooth API 控制智能小车、无人机等。
工业自动化： 使用 Web Bluetooth API 监控传感器数据、控制执行器。

十一、总结与展望

Web Bluetooth API 为 Web 应用带来了与硬件设备交互的能力，开启了无限的可能性。虽然目前还存在一些局限性，但随着浏览器的不断发展和硬件设备的普及，Web Bluetooth API 的应用前景将更加广阔。希望今天的讲解能帮助你入门Web Bluetooth API，并创造出更多有趣的应用！

表格总结常用API

API	描述
`navigator.bluetooth.requestDevice()`	弹出设备选择对话框，让用户选择要连接的蓝牙设备。
`device.gatt.connect()`	连接到设备的 GATT 服务器。
`device.gatt.disconnect()`	断开与设备的 GATT 服务器的连接。
`server.getPrimaryService(serviceUUID)`	获取指定 UUID 的主要服务。
`service.getCharacteristic(characteristicUUID)`	获取指定 UUID 的特征。
`characteristic.readValue()`	读取特征的值。
`characteristic.writeValue(value)`	写入特征的值。
`characteristic.startNotifications()`	启动通知，当特征值发生变化时，会触发 `characteristicvaluechanged` 事件。
`characteristic.stopNotifications()`	停止通知。
`characteristic.addEventListener('characteristicvaluechanged', callback)`	监听 `characteristicvaluechanged` 事件，当特征值发生变化时，执行回调函数。

好了，今天的讲座就到这里。希望大家有所收获，也欢迎大家多多实践，一起探索 Web Bluetooth API 的更多可能性！下次有机会再见！

发表回复 取消回复

发表回复取消回复