ViewSource

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>BLE read</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>BLE read</h1>
<p>Micro:bitに接続完了後、温度を表示します。</p>
<hr>
<p><button type="button" id="connect">接続</button> <span id="msg"> </span></p>
<p id="dsp"></p>
</body>
</html>
<script>
let bluetoothDevice = null;
const uuid1 = 'e95d6100-251d-470a-a062-fa1922dfa9a8';// 温度サービスUUID
const uuid2 = 'e95d9250-251d-470a-a062-fa1922dfa9a8';// 温度キャラクタリスティックUUID

//接続ボタンの動作
document.getElementById('connect').addEventListener('click', function(e){
  if (document.getElementById('connect').textContent == '接続') {
    // BLEデバイスをスキャンする
    navigator.bluetooth.requestDevice({
    //acceptAllDevices: true,
      filters: [{namePrefix: 'BBC micro:bit'}],optionalServices: [uuid1]})
    // デバイス接続する
    .then(device => { name=device.name; bluetoothDevice = device; return device.gatt.connect(); })
    // サービスを取得する
    .then(server => { return server.getPrimaryService(uuid1); })
      // キャラクタリスティックを取得する
      .then(service => { return service.getCharacteristic(uuid2); })
    // 温度を取得する
    .then(characteristic => {
      characteristic.startNotifications();
      characteristic.addEventListener('characteristicvaluechanged',onTemperatureChanged);
      update(true) ;
    })
    .catch(error => { msg.innerHTML = (error) ;	});
  } else { bluetoothDevice.gatt.disconnect() ; update(false) ; }
})
//温度の取得
function onTemperatureChanged (event) {
  let temperature = event.target.value.getUint8(0, true);
  data = name+' 温度 : ' + temperature ;
  dsp.innerHTML = data ;
}
function update(connected) {
  connect.textContent = connected ? '切断' : '接続'
  msg.innerHTML = connected ? 'BLE connected' : 'BLE disconnected'
//send.disabled = !connected ;
}
</script>