HTML5蓝牙开发如何实现连接？HTML5蓝牙开发教程

HTML5 蓝牙开发主要依赖于 Web Bluetooth API，这是一个允许网页与蓝牙低功耗（BLE）设备建立连接、读取和写入数据的 JavaScript API，需要注意的是，该 API 目前主要支持 BLE 设备，且对传统蓝牙（如蓝牙音频、鼠标键盘等）支持有限或需要特定浏览器扩展。

核心概念与前置条件

在开始编码之前,必须理解 Web Bluetooth API 的几个关键约束：

• HTTPS 环境：出于安全考虑，Web Bluetooth API 只能在 HTTPS 协议或 localhost 环境下运行。
• 用户手势触发：蓝牙请求必须由用户的主动交互（如点击按钮）触发，不能由页面加载自动发起。
• 权限管理：首次连接时，浏览器会弹出权限对话框，用户必须手动选择允许访问的设备。
• 浏览器支持：Chrome、Edge 等基于 Chromium 的浏览器支持最好，Firefox 和 Safari 的支持情况较为复杂或需要额外配置。

开发流程详解

Web Bluetooth 的开发流程通常分为四个阶段：发现设备 -> 连接设备 -> 获取服务 -> 读写数据。

1 发现设备 (navigator.bluetooth.requestDevice)

这是第一步,用于让用户选择要连接的 BLE 设备。

async function connectBluetooth() { try { // 请求设备，指定需要连接的 GATT 服务 UUID const device = await navigator.bluetooth.requestDevice({ filters: [{ services: ['0000180d-0000-1000-8000-00805f9b34fb'] }], // 心率服务示例 optionalServices: ['0000180f-0000-1000-8000-00805f9b34fb'] // 电池服务可选 }); console.log('设备名称:', device.name); console.log('设备 ID:', device.id); // 监听断开连接事件 device.addEventListener('gattserverdisconnected', onDisconnected); // 连接 GATT 服务器 return await device.gatt.connect(); } catch (error) { console.error('连接失败:', error); } }

• filters：强制要求设备包含指定的服务 UUID。
• optionalServices：允许设备包含这些服务，但不强制，如果设备不包含，连接依然成功，但后续访问这些服务时会报错。

2 获取 GATT 服务器与服务 (device.gatt.connect)

一旦设备连接成功,你将获得一个 BluetoothRemoteGATTServer 对象，通过该对象可以获取主要的 GATT 服务。

async function getPrimaryService(gattServer) { try { // 获取主服务，传入服务 UUID const service = await gattServer.getPrimaryService('0000180d-0000-1000-8000-00805f9b34fb'); return service; } catch (error) { console.error('获取服务失败:', error); } }

3 获取特征值 (service.getCharacteristic)

特征值（Characteristic）是实际存储数据的地方，每个特征值都有特定的属性（如读取、写入、通知）。

4 读取与写入数据

• 读取数据：调用 readValue() 方法，返回一个 ArrayBuffer。
• 写入数据：调用 writeValue() 方法，需要传入 ArrayBuffer 或 DataView。
• 监听通知/指示：对于实时数据（如心率、加速度），需要启用通知（Notify）或指示（Indicate）。

// 读取示例 async function readData(characteristic) { const buffer = await characteristic.readValue(); const data = new Uint8Array(buffer); console.log('读取到的数据:', data); } // 写入示例 async function writeData(characteristic, value) { const buffer = new ArrayBuffer(1); const view = new DataView(buffer); view.setUint8(0, value); // 写入一个字节 await characteristic.writeValue(buffer); } // 监听通知示例 async function startNotification(characteristic) { // 必须先启用通知 await characteristic.startNotifications(); // 监听数据变化事件 characteristic.addEventListener('characteristicvaluechanged', handleChanged); } function handleChanged(event) { const value = event.target.value; const data = new Uint8Array(value.buffer); console.log('收到通知数据:', data); }

常见 UUID 参考表

BLE 设备通常使用标准 UUID，以下是一些常见的通用服务 UUID：

注意：在实际开发中，建议使用完整的 128-bit UUID，0000180d-0000-1000-8000-00805f9b34fb。

错误处理与最佳实践

• 异常捕获：蓝牙操作涉及硬件交互，容易失败（如设备离线、权限拒绝），务必使用 try...catch 包裹所有异步蓝牙调用。
• 断开连接处理：始终监听 gattserverdisconnected 事件，以便在设备意外断开时清理资源或提示用户。
• 数据编码：BLE 传输的是二进制数据（ArrayBuffer），在读取或写入时，需使用 DataView 或 Uint8Array 进行正确的字节序和类型转换。
• 性能优化：避免频繁轮询，对于实时数据，优先使用通知（Notification）机制，而非不断调用 readValue()。

相关问题与解答

问题 1：为什么我的 Web Bluetooth 代码在 HTTP 环境下无法工作？

解答：

Web Bluetooth API 出于安全考虑，严格限制了其运行环境，它只能在以下两种情况下使用：

1. HTTPS 协议：生产环境必须使用 HTTPS。
2. localhost：本地开发环境可以使用 http://localhost 或 http://127.0.0.1。

   如果尝试在非 HTTPS 且非 localhost 的域下调用 navigator.bluetooth.requestDevice，浏览器会抛出 SecurityError 异常，解决方法是将你的网站部署到支持 HTTPS 的服务器上，或在本地开发时使用 localhost。

问题 2：如何判断一个 BLE 设备是否支持 Web Bluetooth？

解答：

Web Bluetooth 仅支持 BLE（Bluetooth Low Energy） 设备，不支持经典蓝牙（Classic Bluetooth），判断方法如下：

1. 检查设备规格：确认设备支持 BLE 4.0 或更高版本。
2. 尝试连接：调用 navigator.bluetooth.requestDevice 时，如果设备是经典蓝牙设备，浏览器通常会忽略它，或者在设备列表中不显示。
3. 检查浏览器支持：在 Chrome 中，可以通过 navigator.bluetooth 是否存在来判断浏览器是否支持该 API。navigator.bluetooth 为 undefined，则当前浏览器不支持 Web Bluetooth。
4. 注意：即使设备支持 BLE，如果它没有暴露标准的 GATT 服务，或者服务 UUID 不在 filters 或 optionalServices 中，也可能无法被发现或连接。