<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
</head>

<body>
<form name="js">
<input type="button" value="接続" onclick="connect();"/> 
<input type="button" value="切断" onclick="disconnect();" /> 
</form>

<script>

var uart_device;

//micro:bit BLE UUID
var uuid={};
uuid["UART_SERVICE"]                 ='6e400001-b5a3-f393-e0a9-e50e24dcca9e';
uuid["UART_SERVICE_CHARACTERISTICS"] ='6e400002-b5a3-f393-e0a9-e50e24dcca9e';

function connect(){
    navigator.bluetooth.requestDevice({
        filters: [{
            namePrefix: 'BBC micro:bit',
        }],
        optionalServices: [uuid["UART_SERVICE"]]
    })
    .then(device => {
        uart_device=device;
        return device.gatt.connect();
    })
    .then(server => {
        return server.getPrimaryService(uuid["UART_SERVICE"]);
    })
    .then(service => {
        return service.getCharacteristic(uuid["UART_SERVICE_CHARACTERISTICS"]);
    })
    .then(chara => {
        alert("BLE connected");
        characteristic=chara;
        characteristic.startNotifications();
        characteristic.addEventListener('characteristicvaluechanged',onCharacteristicValueChanged);
    })
    .catch(error => {
        alert("BLE error");
    });
}

function onCharacteristicValueChanged(e) {
    var str_arr=[];
    for(var i=0;i<this.value.byteLength;i++){
        str_arr[i]=this.value.getUint8(i);
    }
    var str=String.fromCharCode.apply(null,str_arr);
    alert("msg:"+str);
}

function disconnect() {
    if((!accelerometer_device)||(!accelerometer_device.gatt.connected)){
        return;
    }else{
        accelerometer_device.gatt.disconnect();
        alert("BLE disconnected");
    }
}

</script>
</body>
</html>