浏览器JS蓝牙API如何使用？-js教程-PHP中文网

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

星降

发布： 2025-08-30 13:21:01

原创

877人浏览过

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

登录后复制

）是必不可少的。断开连接、用户拒绝、设备不在范围内，这些都是常态，得做好准备。

蓝心千询

蓝心千询是vivo推出的一个多功能AI智能助手

查看详情

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

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

最核心的几点：

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