使用 Chrome Web 蓝牙 API 构建蓝牙应用

前端全栈开发者

共 5291字，需浏览 11分钟

· 2021-11-13

如今，浏览器不断发展，带来了新的 API 和连接其他设备的方式，并允许访问比以往更多的功能。其中一种 API 是 Web 蓝牙 API^[1]。

在撰写本文时，该 API 仍处于测试阶段，但一旦向公众发布，它将为想要使用蓝牙但不想为每个平台创建原生应用程序的开发人员提供大量机会。

尽管蓝牙 API 仍处于测试阶段，但我们会尝试并制作一个简单的网页，该网页将与我们的手机配对并提供基本详细信息，例如电池百分比、设备名称以及设备提供的基本信息制造商。

我们不会在本教程中使用样式，因为我们只需要了解如何使用 JavaScript 与蓝牙 API 交互。

请记住，并非所有浏览器都支持此 API，您将无法在每部手机上进行测试。某些手机可能不允许获取设备信息。在本教程中，我将使用 Apple iPhone 11，它允许我通过浏览器上的蓝牙获取我的设备信息而不会出现任何问题。

前提

一个代码编辑器；我更喜欢 VS Code
使用 VS Code 时的实时服务器扩展
具有蓝牙功能（或即插即用蓝牙硬件）的笔记本电脑或 PC
有蓝牙功能的移动设备（我用的是iPhone 11，你可以用自己的手机试试）
对JavaScript有一定的了解
Chrome Beta 安装在您的 PC 或笔记本电脑上。蓝牙 API 是 Beta 版功能，在 Chrome Beta 版上效果最佳。

请注意，并非所有基于 Chromium 的浏览器（例如 Brave）都支持蓝牙 API。我尝试在 Brave 上使用 API，但发现 Brave 出于安全原因故意禁用了 API。

如果你对代码需要任何帮助，这里是[GitHub仓库](https://github.com/atharvadeosthale/web-bluetooth-phone)。

让我们开始吧

首先，我们需要创建一个文件夹，我们将把它作为一个工作区。一旦你创建了一个文件夹，使用以下命令打开VS Code：

code .

我们将在本教程中使用两个文件；将它们命名为 index.html 和 script.js。在 index.html 中，我们只需要基本布局（只是一个按钮），并将文件链接到我们的 JavaScript 文件。

以下是 index.html 的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="getDetails">Get device details</button>
    <div id="details"></div>
    <script src="script.js"></script>
  </body>
</html>

添加蓝牙功能

让我们从功能开始。转到 script.js 并将 UI 元素存储在变量中，以便我们以后可以访问它们：

const button = document.getElementById("getDetails");
const details = document.getElementById("details");

现在，让我们为我们的按钮创建一个点击监听器，这样我们就可以在用户点击按钮时执行我们的操作：

button.addEventListener("click", async () => {
  try {
  } catch(err) {
    console.error(err);
    alert("An error occured while fetching device details");
  }
});

我们将该函数设为异步函数，因为它使我们的事情变得更简单，而且我们不需要进行很多回调，使我们的代码看起来更有条理。从现在开始，我们所有的代码都将在 try 块中。

请求蓝牙设备

接下来，让我们通过浏览器请求蓝牙设备：

// 通过浏览器请求蓝牙设备
const device = await navigator.bluetooth.requestDevice({
  optionalServices: ["battery_service", "device_information"],
  acceptAllDevices: true,
});

在上面的代码中，我们通过 navigator.bluetooth 使用了蓝牙 API。在连接到设备之前，我们需要向设备提供有关我们将要访问哪些数据的信息。

我们可以使用目标蓝牙设备上存在的各种服务访问所需的数据。在这种情况下，我们正在与电池和设备信息进行交互，因此我们需要 Battery_service 和 device_information 服务。

一旦用户选择了他想要连接的蓝牙设备，我们就会建立到 GATT 服务器的连接，它为我们提供了对我们之前请求的服务的访问，并将设备名称存储在一个变量中以供以后使用：

// 连接到 GATT 服务器
// 我们还在这里获得了蓝牙设备的名称
let deviceName = device.gatt.device.name;
const server = await device.gatt.connect();

现在，我们需要从 GATT 服务器单独获取服务，以便我们可以单独访问它们：

// 通过 GATT 服务器获取我们之前提到的服务
const batteryService = await server.getPrimaryService("battery_service");
const infoService = await server.getPrimaryService("device_information");

从设备获取信息

首先，让我们获取目标设备的电池电量。

每个蓝牙设备都有各种服务可以互动。例如，一个移动设备可以有一个电池服务，用于所有电池活动。还可以提供帮助拨打和接听电话的电话服务。不同的设备都有不同的蓝牙服务。

每个服务都有特征，每个特征都有一个值。这个值是一个缓冲区，所以我们需要把它转换成人类可读的形式。

电池电量是一个百分比，因此我们将缓冲区转换为整数：

// 获取当前电池电量
const batteryLevelCharacteristic = await batteryService.getCharacteristic(
  "battery_level"
);
// 将收到的缓冲区转换为数字
const batteryLevel = await batteryLevelCharacteristic.readValue();
const batteryPercent = await batteryLevel.getUint8(0);

readValue() 函数返回一个缓冲区，我们需要将其转换为人类可读的形式。

现在，让我们努力获取更多设备信息。如前所述，每项服务都有一个或多个特征。device_information 服务根据设备的不同可能有相当多的特征，我们无法提取一个特定的特征，因为每个设备都有不同的配置和不同的唯一 ID 来访问数据。因此，我们只需读取本例中的所有特征。

下面的代码就是这样做的：

// 获取设备信息
// 我们将从 device_information 中获取所有特征
const infoCharacteristics = await infoService.getCharacteristics();
console.log(infoCharacteristics);
let infoValues = [];
const promise = new Promise((resolve, reject) => {
  infoCharacteristics.forEach(async (characteristic, index, array) => {
    // Returns a buffer
    const value = await characteristic.readValue();
    console.log(new TextDecoder().decode(value));
    // Convert the buffer to string
    infoValues.push(new TextDecoder().decode(value));
    if (index === array.length - 1) resolve();
  });
});

我们将 forEach 包装在 Promise 下，因为父级和 forEach 本身是一个异步函数，因此我们需要在继续显示数据之前获取数据。在这里，当我们使用 readValue() 获取值时，我们使用的是 TextDecoder，因为我们知道 device_information 服务中的大部分数据是字符串类型而不是整数。

然后我们将所有数据推送到一个数组中，以便我们可以在 UI 上呈现它，然后在读取所有特征后解析 Promise。

现在，我们只需在屏幕上渲染数据：

promise.then(() => {
  // 在屏幕上显示所有信息
  // 使用innerHTML
  details.innerHTML = `
    Device Name - ${deviceName}<br />
    Battery Level - ${batteryPercent}%<br />
    Device Information:
    <ul>
      ${infoValues.map((value) => `<li>${value}</li>`).join("")}
    </ul> 
  `;
});