短信预约-IT技能 免费直播动态提醒

2024-12-02 18:09

关注

 
"en"> 
   
    "UTF-8" /> 
    "X-UA-Compatible" content="IE=edge" /> 
    name="viewport" content="width=device-width, initial-scale=1.0" /> 
     
   
   
    "getDetails">Get device details 
    "details">

添加蓝牙功能

让我们从功能开始。转到 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} 
    Battery Level - ${batteryPercent}% 
    Device Information: 
    
 
      ${infoValues.map((value) => `
${value}
`).join("")} 
    
  
  `; 
}); 

现在，当您在 Chrome Beta 上运行我们的Web应用程序并单击该按钮时，您应该会看到一个连接蓝牙设备的提示，如下所示：

一旦你选择了你的手机(在我的例子中是 Atharva 的 iPhone)并点击配对，你应该会在几秒钟内看到屏幕上的信息，就像这样：

信息是正确的，我截图的时候，我的手机是百分之百开着的。

这里需要注意的一件事是 iPhone 12,1 ，这不是说我有 iPhone12，它是 iPhone 11 的代号，因此，如果您看到一些奇怪的设备名称，您应该知道它可能是代号或制造商提供的其他名称。

你应该使用蓝牙API吗?

这是最重要的问题。此功能在大多数浏览器中处于测试阶段，即使向公众发布，也可能存在一些问题，例如硬件不支持蓝牙。如果您想为某人创建链接其设备的服务，则应牢记这一点。

另一方面，如果你的组织有正确配置了蓝牙的定制系统，你肯定可以为组织创建一个内部Web应用，可以根据他们的需要与蓝牙设备进行互动。

我认为你应该在这个API处于测试阶段时尝试一下，因为一般来说，当它向公众发布时，你就会占到先机。没有多少人会知道如何使用这个API，所以对它的了解可以帮助你获得更多的演出机会。

在测试阶段使用这个的另一个原因是为了挑战自己。当API被发布后，事情可能会变得更容易。但如果你像我一样喜欢玩API测试版，你可能会有一些乐趣，并在这个过程中学习一些新东西。

一旦API向公众发布，就会产生更多的意识，在我看来，越来越多的蓝牙相关服务将在Web上而不是在原生应用程序中进行。这将使这项技术更容易为Web开发者所接受。

原文：https://blog.logrocket.com/build-bluetooth-app-chrome-bluetooth-web-api/

作者：Atharva Deosthale

参考资料

[1]Web 蓝牙 API: https://www.chromestatus.com/feature/5264933985976320