Web Bluetooth API允许网页通过HTTPS在用户手势触发下请求并连接低功耗蓝牙设备，需经用户授权选择设备，利用filters筛选服务或名称，通过GATT协议获取服务与特征，实现数据读写和订阅，同时采用临时设备ID保护隐私，确保安全通信。
浏览器中的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）是必不可少的。断开连接、用户拒绝、设备不在范围内，这些都是常态，得做好准备。
rmodal.js是一款带动画效果的js模态对话框插件。rmodal.js模态对话框插件压缩版本仅1.2kb，没有任何外部依赖，可以制作出带动画特效的模态对话框效果。它的特点还有： 使用简单，执行效率高。 纯js编写，没有任何外部依赖。 支持包括IE9+的所有现代浏览器。 可以和bootstrap和animate.css结合使用。 支持CommonJS AMD 或 globals。
Web Bluetooth API有哪些安全和隐私考量？
说实话，Web Bluetooth API在设计之初，安全和隐私就是被放在非常高的优先级来考虑的。这不像一些本地应用，可以随意扫描和连接设备。在浏览器环境里，限制多是好事，毕竟没人希望随便打开一个网页，自己的蓝牙设备就被悄悄控制了。
最核心的几点：
- HTTPS强制要求： 所有的Web Bluetooth API调用都必须在安全上下文（即HTTPS）中进行。这意味着你不能在普通的HTTP网站上使用它。这是一个基础且不可妥协的限制，有效防止了中间人攻击。
-
用户手势触发：
navigator.bluetooth.requestDevice()
这个方法必须由用户的明确手势（比如点击按钮、触摸屏幕）来触发。它不能在页面加载时自动运行，或者通过脚本在后台偷偷摸摸地执行。这给了用户充分的控制权，防止了未经授权的设备扫描和连接。 -
用户明确授权： 当你调用
requestDevice()
时，浏览器会弹出一个标准的系统级设备选择器。用户必须主动从列表中选择一个设备，并点击“配对”或“连接”按钮，才能建立连接。这个过程是透明且用户可控的，网页本身无法直接指定连接哪个设备。 - 设备ID的短暂性： 浏览器在与设备通信时，会使用一个临时的、与来源站点绑定的设备ID。这个ID不是设备的真实MAC地址
