前端必看：浏览器也能操作蓝牙设备了！

在很多人印象中，蓝牙功能一直是 App 或嵌入式设备的专属。但你知道吗？前端也能通过 JavaScript 操作蓝牙设备了！

没错，借助浏览器的 Web Bluetooth API，前端开发者也能玩起硬件交互，比如连接蓝牙打印机、智能硬件、医疗设备等。

一、JS 如何调用蓝牙？

核心是这句：

navigator.bluetooth.requestDevice()

这是浏览器提供的原生方法，可以弹出蓝牙设备选择窗口，供用户手动连接。

连接成功后，你可以读取蓝牙设备的服务（Service）和特征值（Characteristic），实现数据通信。

二、浏览器支持情况

⚠️ 注意：必须在 HTTPS 页面或 localhost 上调用，才会生效。

三、蓝牙通信的基本流程

调用蓝牙设备，大致分为 5 步：

1. 1. 请求设备：通过 requestDevice() 触发选择窗口
2. 2. 连接设备：建立 GATT 连接
3. 3. 获取服务：根据 UUID 获取蓝牙服务
4. 4. 获取特征值：获取特征（Characteristic）用于读写
5. 5. 读写数据：读取或订阅设备数据

以下是一个简化示例：

const device = await navigator.bluetooth.requestDevice({
   filters: [{ services: ['battery_service'] }]
});

const server = await device.gatt.connect();
const service = await server.getPrimaryService('battery_service');
const char = await service.getCharacteristic('battery_level');
const value = await char.readValue();

console.log(`电量：${value.getUint8(0)}%`);

这段代码实现了：连接蓝牙设备并读取电池电量。

四、前端调用蓝牙的适用场景

JS 调用蓝牙，虽然不是万能，但在某些业务场景下非常实用，比如：

• • ✅ 智能穿戴设备数据采集（体温计、血压仪）
• • ✅ 蓝牙打印（票据机、标签机）
• • ✅ 教育/实验室设备数据读取
• • ✅ 开发/调试 BLE 硬件模块

五、常见限制 & 注意事项

• • 必须用户手动选择设备，不能偷偷连接
• • 只支持 BLE 设备，传统蓝牙设备无法操作
• • Safari 不支持，iPhone 暂时无缘
• • 必须 HTTPS 或 localhost

总结一句话：

如果你在做 Web 应用，又需要轻量级蓝牙交互，Web Bluetooth API 就是你该尝试的方式。

它不完美，但已经足够应付很多场景。