首页 > 文章 > 前端

浏览器JS蓝牙API使用详解

时间：2025-12-04 23:06:38 456浏览收藏

推广推荐

支持 PC / 移动端，安全直达

**浏览器JS蓝牙API使用教程：轻松连接BLE设备** 想要让你的网页具备与蓝牙设备“对话”的能力吗？本文将为你详细解析Web Bluetooth API的使用方法，助你轻松实现网页与低功耗蓝牙设备的通信。首先，你需要了解Web Bluetooth API的安全限制，它必须在HTTPS环境下运行，并由用户手势触发。核心流程包括通过`navigator.bluetooth.requestDevice()`请求设备，利用`filters`筛选目标设备，连接GATT服务器，获取服务和特征，最终实现数据的读写和订阅。本文还介绍了如何处理错误，以及Web Bluetooth API的安全和隐私考量，保障你的应用安全可靠。

Web Bluetooth API允许网页通过HTTPS在用户手势触发下请求并连接低功耗蓝牙设备，需经用户授权选择设备，利用filters筛选服务或名称，通过GATT协议获取服务与特征，实现数据读写和订阅，同时采用临时设备ID保护隐私，确保安全通信。

浏览器JS蓝牙API如何使用？

浏览器中的JavaScript蓝牙API，也就是我们常说的Web Bluetooth API，它本质上就是一套让网页能够与附近支持低功耗蓝牙（BLE）的设备进行通信的接口。简单来说，它赋予了Web应用直接“对话”物理世界设备的能力，比如智能手环、传感器、甚至一些工业设备。但要用好它，得先理解它不是万能的，它有其特定的应用场景和严格的安全限制。

解决方案： 要真正让一个网页“动起来”去连接蓝牙设备，核心流程其实是围绕着几个关键的Promise链式调用展开的。我个人觉得，理解这个异步流程是掌握Web Bluetooth API的基石。

你需要确保你的网页运行在HTTPS环境下，并且用户的操作（比如点击按钮）触发了蓝牙请求。这是最基本的安全要求，没有之一。

请求设备 (Requesting a Device): 这是与用户交互的第一步。通过 navigator.bluetooth.requestDevice() 方法，浏览器会弹出一个设备选择器，让用户选择要连接的蓝牙设备。这里最关键的是过滤器（filters）。

async function connectBluetoothDevice() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['heart_rate'] }], // 过滤心率服务设备
      // 或者通过名称过滤：
      // filters: [{ namePrefix: 'MySensor' }],
      optionalServices: ['battery_service'] // 可选服务，用户连接后可以访问
    });
    console.log('用户选择了设备:', device.name);
    // 接下来连接设备
    const server = await device.gatt.connect();
    console.log('已连接到GATT服务器');

    // 获取服务和特征
    const service = await server.getPrimaryService('heart_rate');
    console.log('已获取心率服务');

    const characteristic = await service.getCharacteristic('heart_rate_measurement');
    console.log('已获取心率测量特征');

    // 读取或订阅数据
    await characteristic.startNotifications();
    characteristic.addEventListener('characteristicvaluechanged', handleHeartRateMeasurement);
    console.log('已开始接收心率通知');

  } catch (error) {
    console.error('蓝牙连接或操作出错:', error);
    // 这里需要更详细的错误处理，比如用户取消、设备断开等
  }
}

function handleHeartRateMeasurement(event) {
  const value = event.target.value; // DataView
  // 这里需要解析DataView中的数据，通常是Uint8Array
  // 假设心率值在第二个字节，具体取决于设备规范
  const heartRate = value.getUint8(1);
  console.log('当前心率:', heartRate);
}

filters 是一个数组，每个对象可以指定 services（服务UUID）、name（设备名称）、namePrefix（名称前缀）等。optionalServices 也很重要，如果你想访问的某些服务没有在 filters 中，但你又想在连接后访问它们，就得把它们加到 optionalServices 里。我个人经验是，如果忘记加 optionalServices，后面会遇到权限不足的报错，挺让人抓狂的。

连接到GATT服务器 (Connecting to GATT Server): 一旦用户选择了设备，你就会得到一个 BluetoothDevice 对象。接着，你需要通过 device.gatt.connect() 来连接设备的GATT（Generic Attribute Profile）服务器。GATT是BLE设备数据组织和传输的核心。成功连接后，你就能拿到一个 BluetoothRemoteGATTServer 对象。
获取服务和特征 (Getting Services and Characteristics): BLE设备的数据是以服务（Services）和特征（Characteristics）的形式组织的。一个服务可以包含多个特征，每个特征代表一个具体的数据点或控制点。
- server.getPrimaryService(serviceUUID)：获取一个主服务。
- service.getCharacteristic(characteristicUUID)：获取服务下的一个特征。 UUID可以是标准化的16位或32位短UUID（如'heart_rate'或0x2A37），也可以是自定义的128位长UUID。
读写和订阅数据 (Reading, Writing, and Subscribing): 拿到特征后，你就可以进行操作了：
- characteristic.readValue()：从特征中读取当前值。返回一个 DataView 对象。
- characteristic.writeValue(value)：向特征写入数据。value 通常是 ArrayBuffer 或 DataView。
- characteristic.startNotifications() / characteristic.stopNotifications()：开启或关闭特征值的通知。当特征值改变时，设备会主动推送数据。
- characteristic.addEventListener('characteristicvaluechanged', handler)：监听特征值变化的事件。这是处理实时数据流的关键。

整个过程都是基于Promise的异步操作，所以错误处理（try...catch）是必不可少的。断开连接、用户拒绝、设备不在范围内，这些都是常态，得做好准备。

Web Bluetooth API有哪些安全和隐私考量？

说实话，Web Bluetooth API在设计之初，安全和隐私就是被放在非常高的优先级来考虑的。这不像一些本地应用，可以随意扫描和连接设备。在浏览器环境里，限制多是好事，毕竟没人希望随便打开一个网页，自己的蓝牙设备就被悄悄控制了。

最核心的几点：

HTTPS强制要求： 所有的Web Bluetooth API调用都必须在安全上下文（即HTTPS）中进行。这意味着你不能在普通的HTTP网站上使用它。这是一个基础且不可妥协的限制，有效防止了中间人攻击。
用户手势触发： navigator.bluetooth.requestDevice() 这个方法必须由用户的明确手势（比如点击按钮、触摸屏幕）来触发。它不能在页面加载时自动运行，或者通过脚本在后台偷偷摸摸地执行。这给了用户充分的控制权，防止了未经授权的设备扫描和连接。
用户明确授权： 当你调用 requestDevice() 时，浏览器会弹出一个标准的系统级设备选择器。用户必须主动从列表中选择一个设备，并点击“配对”或“连接”按钮，才能建立连接。这个过程是透明且用户可控的，网页本身无法直接指定连接哪个设备。
设备ID的短暂性： 浏览器在与设备通信时，会使用一个临时的、与来源站点绑定的设备ID。这个ID不是设备的真实MAC地址

以上就是《浏览器JS蓝牙API使用详解》的详细内容，更多关于的资料请关注golang学习网公众号！