html5 chrome 连接蓝牙设备

原创

mob64ca12d84572 2024-10-28 05:27:24 ©著作权

文章标签 特征值 javascript 电池电量 文章分类 HTML5 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d84572的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 HTML5 中使用 Chrome 连接蓝牙设备

一、概述

越来越多的设备支持蓝牙，这使得我们可以轻松连接和控制它们。在本教程中，我们将学习如何使用 HTML5 和 Chrome 浏览器来连接蓝牙设备。我们将分步骤进行，确保每个步骤都易于理解。

二、流程概览

在实现蓝牙连接的过程中，可以将流程分为以下几个步骤：

步骤	描述
1	检查浏览器兼容性
2	创建连接请求
3	处理连接并获取服务
4	读取和写入特征值
5	关闭连接

三、详细步骤及代码示例

1. 检查浏览器兼容性

在开始之前，我们需要确保浏览器支持 Web Bluetooth API。我们可以通过以下代码进行检查：

// 检查浏览器是否支持 Web Bluetooth API
if (!navigator.bluetooth) {
    console.error("这个浏览器不支持 Web Bluetooth API! 请选择最新的 Google Chrome.");
} else {
    console.log("Web Bluetooth API 可用!");
}

2. 创建连接请求

下一步是创建连接请求，并指定要连接的蓝牙设备，可以使用 navigator.bluetooth.requestDevice() 方法。

// 请求一个蓝牙设备
async function requestBluetoothDevice() {
    try {
        const device = await navigator.bluetooth.requestDevice({
            filters: [{ services: ['battery_service'] }]  // 过滤设备服务
        });
        console.log("设备已连接: ", device);
        return device;
    } catch (error) {
        console.error("请求设备失败: ", error);
    }
}

解释：使用 requestDevice() 方法，从浏览器请求用户选择一个蓝牙设备。filters 是一个约束条件，这里过滤出支持的服务，用户可根据自己的需求进行修改。

3. 处理连接并获取服务

当用户选择设备后，我们需要建立连接并获取服务。

// 连接设备并获取服务
async function connectToDevice(device) {
    try {
        const server = await device.gatt.connect(); // 连接到 GATT 服务器
        console.log("已连接到 GATT 服务器");
        const service = await server.getPrimaryService('battery_service'); // 获取电池服务
        console.log("电池服务已获取: ", service);
        return service;
    } catch (error) {
        console.error("连接设备失败: ", error);
    }
}

解释：在这里，我们通过 device.gatt.connect() 方法连接到所选设备的 GATT 服务器。随即获取设备的主服务，服务的 UUID 可以根据设备功能进行修改。

4. 读取和写入特征值

连接成功后，我们可以读取和写入特征值。下面是读取电池电量特征的示例。

// 读取特征值
async function readBatteryLevel(service) {
    try {
        const characteristic = await service.getCharacteristic('battery_level'); // 获取电池电量特征
        const value = await characteristic.readValue(); // 读取特征值
        const batteryLevel = value.getUint8(0); // 获取电量值
        console.log("电池电量: ", batteryLevel + "%");
    } catch (error) {
        console.error("读取电池电量失败: ", error);
    }
}

解释：使用 getCharacteristic() 方法获取特征对象，然后使用 readValue() 读取其值。这里假设设备的电池电量特征 UUID 为 battery_level。

写入特征值示例：

// 写入特征值
async function writeCharacteristic(service, value) {
    try {
        const characteristic = await service.getCharacteristic('led_control'); // 获取 LED 控制特征
        const data = new Uint8Array([value]); // 数据转为 Uint8Array
        await characteristic.writeValue(data); // 写入数据
        console.log("写入成功");
    } catch (error) {
        console.error("写入特征值失败: ", error);
    }
}

5. 关闭连接

在使用完蓝牙设备后，我们需要关闭连接以释放资源。

// 断开连接
function disconnectDevice(device) {
    if (device.gatt.connected) {
        device.gatt.disconnect();  // 断开连接
        console.log("设备已断开连接");
    }
}

解释：通过 device.gatt.connected 属性检查设备是否在连接状态，若是，则调用 disconnect() 以断开连接。

四、类图示例

下面是连接蓝牙设备的类图，展示了各功能模块：

classDiagram
    class BluetoothManager {
        +requestBluetoothDevice()
        +connectToDevice(device)
        +readBatteryLevel(service)
        +writeCharacteristic(service, value)
        +disconnectDevice(device)
    }

五、代码示例整合

结合上面的所有代码，完整的示例可能如下：

async function main() {
    if (!navigator.bluetooth) {
        console.error("这个浏览器不支持 Web Bluetooth API!");
        return;
    }
    
    const device = await requestBluetoothDevice();
    const service = await connectToDevice(device);
    
    await readBatteryLevel(service); // 读取电池电量
    await writeCharacteristic(service, 1); // 设置 LED 控制
    disconnectDevice(device); // 断开连接
}

// 启动程序
main();