html如何调用蓝牙

Hey小伙伴们，今天要和你们聊一个超酷的话题——如何用HTML调用蓝牙！是不是听起来就很有科技感？别急，我来一步步带你走进这个神奇的世界。

我们得知道，HTML本身是不支持直接调用蓝牙的，我们有JavaScript这个强大的帮手，它可以通过Web Bluetooth API来实现与蓝牙设备的交互，这个API是现代浏览器提供的一个接口，让我们可以在网页上直接和蓝牙设备“对话”。

检查浏览器支持

在我们开始之前，得确保你的浏览器支持Web Bluetooth API，Chrome、Firefox和Edge都支持这个API，但是需要在地址栏输入特殊网址来开启实验性功能，比如在Chrome中，你可以访问chrome://flags/#enable-experimental-web-platform-features来启用。

请求蓝牙设备

我们可以用JavaScript来请求用户允许网页访问蓝牙设备，这里有一个简单的代码示例：

navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
  .then(device => {
    console.log('>>>>> Device Name:', device.name);
    return device.gatt.connect();
  })
  .then(server => {
    console.log('>>>>> Service added:', server);
    return server.getPrimaryService('battery_service');
  })
  .then(service => {
    console.log('>>>>> Service Characteristics:', service.characteristics);
    return service.getCharacteristic('battery_level');
  })
  .then(characteristic => {
    console.log('>>>>> Characteristic Value Handle:', characteristic.value);
    return characteristic.readValue();
  })
  .then(value => {
    console.log('>>>>> Characteristic Value:', value.getUint8(0));
  })
  .catch(error => {
    console.log('>>>>> Error:', error);
  });

这段代码会请求用户允许网页访问蓝牙设备，然后连接到设备，并读取电池服务的电池水平特性。

与蓝牙设备交互

一旦我们成功连接到蓝牙设备，就可以开始与设备进行数据交换了，我们可以发送数据到设备，或者从设备接收数据，这通常涉及到读写特性值。

// 写入数据到特性
characteristic.writeValue(new Uint8Array([1, 2, 3]));
// 监听特性值的变化
characteristic.startNotifications().then(() => {
  characteristic.addEventListener('characteristicvaluechanged', handleNotifications);
});
function handleNotifications(event) {
  const value = event.target.value;
  console.log('Received:', value);
}

处理错误和用户拒绝

在实际应用中，我们还需要考虑到用户可能拒绝授权或者设备连接失败的情况，这时候，我们需要优雅地处理这些错误。

.catch(error => {
  if (error.name === 'NotFoundError') {
    console.log('蓝牙设备未找到');
  } else if (error.name === 'SecurityError') {
    console.log('网站没有权限访问蓝牙设备');
  } else if (error.name === 'NotFoundError') {
    console.log('服务或特性未找到');
  } else {
    console.log('发生未知错误', error);
  }
});