Web Bluetooth / Read Characteristic Value Changed (Async Await) Sample

Available in Chrome 55+ | View on GitHub | Browse Samples

The Web Bluetooth API lets websites discover and communicate with devices over the Bluetooth 4 wireless standard using the Generic Attribute Profile (GATT). It is currently partially implemented in Android M, Chrome OS, Mac, and Windows 10.

This sample illustrates the use of the Web Bluetooth API to read battery level and be notified of changes from a nearby Bluetooth Device advertising Battery information with Bluetooth Low Energy. You may want to try this demo with the BLE Peripheral Simulator App from the Google Play Store and check out the Read Characteristic Value Changed Sample (Promises) sample.

Here, we use the characteristicvaluechanged event listener to handle reading battery level characteristic value. This event listener will optionally handle upcoming notifications as well.

Live Output

JavaScript Snippet

var bluetoothDevice;
var batteryLevelCharacteristic;

async function onReadBatteryLevelButtonClick() {
  try {
    if (!bluetoothDevice) {
      await requestDevice();
    }
    await connectDeviceAndCacheCharacteristics();

    log('Reading Battery Level...');
    await batteryLevelCharacteristic.readValue();
  } catch(error) {
    log('Argh! ' + error);
  }
}

async function requestDevice() {
  log('Requesting any Bluetooth Device...');
  bluetoothDevice = await navigator.bluetooth.requestDevice({
   // filters: [...] <- Prefer filters to save energy & show relevant devices.
      acceptAllDevices: true,
      optionalServices: ['battery_service']});
  bluetoothDevice.addEventListener('gattserverdisconnected', onDisconnected);
}

async function connectDeviceAndCacheCharacteristics() {
  if (bluetoothDevice.gatt.connected && batteryLevelCharacteristic) {
    return;
  }

  log('Connecting to GATT Server...');
  const server = await bluetoothDevice.gatt.connect();

  log('Getting Battery Service...');
  const service = await server.getPrimaryService('battery_service');

  log('Getting Battery Level Characteristic...');
  batteryLevelCharacteristic = await service.getCharacteristic('battery_level');

  batteryLevelCharacteristic.addEventListener('characteristicvaluechanged',
      handleBatteryLevelChanged);
  document.querySelector('#startNotifications').disabled = false;
  document.querySelector('#stopNotifications').disabled = true;
}

/* This function will be called when `readValue` resolves and
 * characteristic value changes since `characteristicvaluechanged` event
 * listener has been added. */
function handleBatteryLevelChanged(event) {
  let batteryLevel = event.target.value.getUint8(0);
  log('> Battery Level is ' + batteryLevel + '%');
}

async function onStartNotificationsButtonClick() {
  try {
    log('Starting Battery Level Notifications...');
    await batteryLevelCharacteristic.startNotifications();

    log('> Notifications started');
    document.querySelector('#startNotifications').disabled = true;
    document.querySelector('#stopNotifications').disabled = false;
  } catch(error) {
    log('Argh! ' + error);
  }
}

async function onStopNotificationsButtonClick() {
  try {
    log('Stopping Battery Level Notifications...');
    await batteryLevelCharacteristic.stopNotifications();

    log('> Notifications stopped');
    document.querySelector('#startNotifications').disabled = false;
    document.querySelector('#stopNotifications').disabled = true;
  } catch(error) {
    log('Argh! ' + error);
  }
}

function onResetButtonClick() {
  if (batteryLevelCharacteristic) {
    batteryLevelCharacteristic.removeEventListener('characteristicvaluechanged',
        handleBatteryLevelChanged);
    batteryLevelCharacteristic = null;
  }
  // Note that it doesn't disconnect device.
  bluetoothDevice = null;
  log('> Bluetooth Device reset');
}

async function onDisconnected() {
  log('> Bluetooth Device disconnected');
  try {
    await connectDeviceAndCacheCharacteristics()
  } catch(error) {
    log('Argh! ' + error);
  }
}