前言

在查找 liff.bluetooth.requestDevice() 的用途，发现一份Web Bluetooth文件，感觉又可以再写个30天。而 Web Bluetooth 是什麽？我们可以直接利用它，在浏览器中与 Bluetooth Low Energy (低功耗蓝芽装置) 进行通讯。

liff.bluetooth.requestDevice()

扫描已连接的蓝芽装置，取得设备资讯。

实作

// Don't filter devices receiving advertisement packets
liff.bluetooth.requestDevice().then(device => {
    const listener = (e) => {
      device.removeEventListener('advertisementreceived', listener);
    };
    device.addEventListener('advertisementreceived', listener);

    device.watchAdvertisements();
}).catch(e => {
    console.log(e.code + ':' + e.message);
});

// Filter devices receiving advertisement packets
liff.bluetooth.requestDevice({
        filters: [
            {
                // ID of desired bluetooth device (BluetoothDevice.id)
                deviceId: 't99137fe055dd4980b40f6ac526da7b0b' 
            }
        ]
    }).then(device => {
    const listener = (e) => {
      device.removeEventListener('advertisementreceived', listener);
    };
    device.addEventListener('advertisementreceived', listener);

    device.watchAdvertisements();
}).catch(e => {
    console.log(e.code + ':' + e.message);
});

以上程序码中，有两段liff.bluetooth.requestDevice。其中的差别，在於执行方法的时候，有没有传入带有filters属性的物件作参数。带有filters属性的物件，可以在其中设定deviceId，主要用在筛选BLE设备。假如用户透过画面按钮触发事件，执行此方法，且传入物件参数，用户可以从画面得到依filters筛选条件的BLE设备。

执行liff.bluetooth.requestDevice，成功连接装置後，可以从回传物件中，找到gatt物件。执行装置的device.gatt.connect()方法，可以连线到 GATT 服务端。接续执行device.gatt.getPrimaryService、service.getCharacteristic，就可以用得到的值，存取资料，控制装置，如以下程序码。

// Read and write characteristic values from LIFF app
device.gatt
    .connect()
    .then(async () => {
        const service = await device.gatt.getPrimaryService(
            '01234567-0123-0123-0123-012345678901'
        );
        const characteristic = await service.getCharacteristic(
            '01234567-0123-0123-0123-012345678902'
        );
        const value = await characteristic.readValue();

        // suppose we know it is a string, we can decode it
        // here we use TextDecoder for simplicity, you should add a polyfill for compatibility
        const stringValue = new TextDecoder().decode(value);

        // to write string 'liff' into the characteristic
        // here we use TextEncoder for simplicity, you should add a polyfill for compatibility
        await characteristic.writeValue(new TextEncoder().encode('liff'));
    })
    .catch(e => {
        console.log(e.code + ':' + e.message);
    });

// Notify change in characteristic value from LINE Things device
device.gatt.connect().then(async () => {
    const service = await device.gatt.getPrimaryService('01234567-0123-0123-0123-012345678901');
    const characteristic = await service.getCharacteristic('01234567-0123-0123-0123-012345678903');
    characteristic.addEventListener('characteristicvaluechanged', (e) => {
        // suppose we know it is a 16-bit integer value
        console.log('value changed to:' + e.target.value.getInt16();
    });

    await characteristic.startNotifications();
}).catch(e => {
    console.log(e.code + ':' + e.message);
});

今天就浅浅的认识一下 liff.bluetooth.requestDevice()，
期待日後的认识Web Bluetooth容易吗30天系列，欸不是！

参考

• liff.bluetooth.requestDevice()
• Web Bluetooth
• [译] 如何在浏览器中编写一款蓝芽应用
• Web Bluetooth API 初探