Web Bluetooth API 初探

Posted 2021-04-27 前端外刊评论

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web Bluetooth API 初探相关的知识，希望对你有一定的参考价值。

概览

借助，我们能在电子设备上玩出各种各样的花样。不过为了能和各种不同的硬件设备交互，难道我们就要在手机上安装各个设备对应的 app 吗？如果我们可以用浏览器统一管理所有的硬件设备，那世界得多美好啊。Web Bluetooth API 正在努力实现这个目标，这是一个基于 promise 规范的API。这个 API 的出现不仅是造福用户（的手机空间），还节省了开发者/发行商的成本 – 不需要为新的硬件产品开发至少一个独立的 app 来控制，统一用还能跨平台的网页端就行了。

Web Bluetooth API

到目前为止，要在移动设备上做 BLE 方面的交互都要通过原生 app。Web Bluetooth API 想要改变这样的现状。现在尚未定稿，在使用过程中遇到任何问题，请吧。

你可以下一个体验 Web Bluetooth API：在opera://flags 设置中开启 ‘Web Bluetooth’。

首先你要知道：

仅限HTTPS：Web Bluetooth API 只支持基于 https 的页面。现在大部分信息敏感的 web API 都必须基于 HTTPS 的服务，蓝牙传输有这个要求也不奇怪。
通过用户操作触发：需要确保这个 API 不会在用户未知的情况下偷偷再后台运行，所以会有一个提示，询问用户要通过蓝牙连接哪一个设备。不过我们也不希望用户什么都没有做，站点就直接弹出一个提示吓到用户。于是，就像 click 一样，只有当用户作出了操作，这个方法才会被调用。

获取设备基本信息

接下来就是代码环节，你很快会知道如何获取到一台 BLE 设备的基本信息。

下面这段代码……就是一个按钮：

<button id="the-button">Try it</button>

当然还有对应的 JS 代码：

const button = document.querySelector('#the-button');
button.addEventListener('click', function() {
    navigator.bluetooth.requestDevice({
        filters: [{
            services: ['battery_service']
        }]
    }).then(device => {
        console.log('Got device:', device.name);
        console.log('id:', device.id);
    });
});

navigator.bluetooth.requestDevice() 就是上文说到的“用户没有召唤，就不能随随便便出现”的方法。也就是说，按照例子中的代码逻辑，只有当用户点击了按钮，这个方法才会被调用。它将会呼出一个对话窗（dialog box），窗口中会显示符合筛选条件的 BLE 设备列表。像上面例子里的筛选条件就是“GATT 服务是 ‘battery_service’ 的 BLE 设备”。（不要惊慌，下一节我们会讲到“GATT 服务”的）

这边要注意的一点是，要想使用 Web Bluetooth API，那必须至少要设定一个筛选条件。

当用户选择成功连接上某一台设备之后，设备名和 ID 会被打印到控制台上。

什么是 GATT 服务？

GATT 全称是（通用属性配置文件），这份文件制定了一个蓝牙设备所能提供的服务，广而告之天下的标准。手机的电池情况就是通过 GATT 来确认的，同理，你的运动手环也在使用相同的服务来评估电池情况还有计算你的心率。GATT 提供了，我们可以根据服务所暴露出的设备对象，来坚挺服务。

一些设备可能不会把它们的服务罗列在 GATT 的标准服务中，这种情况下，你需要使用设备完整的蓝牙 UUID，也就是一串 16 bits 或者 32 bits 长度的 ID（如下文）。当然，如果设备文档中压根没有提到标准之外的服务，也谈不上使用什么 UUID 了。

navigator.bluetooth.requestDevice({    filters: [{        services: ['0009180d-0000-1000-8000-00705f9b34fb']    }] });

GATT 服务的读写

一旦我们连接上了设备，那自然而然，下一步就是从设备中读取点数据出来。要实现这个，需要用 gatt.connect() 方法连接上设备的 GATT 服务器。就让我们接着上面的例子往下写一个，不过请注意，demo 中使用到的connectGATT() 方法在 Chromium 50 及以上版本已经弃用了。

navigator.bluetooth.requestDevice({    filters: [{        services: ['battery_service']    }] }).then(device => {    console.log('Got device:', device.name);    console.log('id:', device.id);    // Chromium 49 及以下版本请使用 connectGATT()    // Chromium 50 之后版本请使用 gatt.connect()    return device.gatt.connect(); }) .then(server => {    console.log('Getting Battery Service…');    return server.getPrimaryService('battery_service'); }) .then(service => {    console.log('Getting Battery Characteristic…');    return service.getCharacteristic('battery_level'); }) .then(characteristic => {    console.log('Reading battery level…');    return characteristic.readValue(); }) .then(value => {    value = value.buffer ? value : new DataView(value);    console.log('Battery percentage:', value.getUint8(0)); }) .catch(exception => {    console.log(exception); });

到目前为止，我们都是按照来写代码的。用这种写法，返回值是一个对象，要解析这个对象才能得到最后的值。

需要以 BufferSource 的形态写入值，可以是 ArrayBuffer 也可以是ArrayBuffer 的视图 (view)，比如一个 DataView 对象。具体的 buffer source 类型可以查看。再举一个例子，如果想要重置一台心率仪的enerygyExpended 字段，我们可以使用方法：

navigator.bluetooth.requestDevice({    filters: [{        services: ['heart_rate']    }] }).then(device => {    console.log('Got device:', device.name);    console.log('id:', device.id);    return device.gatt.connect(); }) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_control_point')) .then(characteristic => {    const resetEnergyExpended = new Uint8Array([1]);    // resetEnergyExpended 的值是'1'，表示重置    return characteristic.writeValue(resetEnergyExpended); }) .then(value => {    console.log('Reset value of energy expended field'); }) .catch(exception => {    console.log(exception); });