ViewSource

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BLE UART write</title>
</head>
<body>
<h1>BLE UART write</h1>
<p>Micro:bitに接続完了後、メッセージを送信してください。LEDにメッセージを表示します。</p>
<hr>
<p><button type="button" id="connect">接続</button> <span id="msg"></span></p>
<p><input id="send_text" value="hello"> <button type="button" id="send" disabled>送信</button></p>
<script>
const UUID_1 = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
const UUID_2 = '6e400003-b5a3-f393-e0a9-e50e24dcca9e'; // Notify

var bluetoothDevice;
var characteristic;
//Micro:bitに接続する
document.getElementById('connect').addEventListener('click', function(e){
  if (document.getElementById('connect').textContent == '接続') {
    navigator.bluetooth.requestDevice({
      filters:[{namePrefix: 'BBC micro:bit'}],optionalServices: [UUID_1] })
    .then(device => { bluetoothDevice = device ; return device.gatt.connect(); })
    .then(server =>{ return server.getPrimaryService(UUID_1); })
    .then(service => { return service.getCharacteristic(UUID_2) })
    .then(chara => { update(true) ; characteristic = chara; })
    .catch(error => { msg.innerHTML = (error) ; });
    //BEL切断処理 
  } else { bluetoothDevice.gatt.disconnect() ; update(false) ; }
})
function sendMessage() {
  if (!bluetoothDevice || !bluetoothDevice.gatt.connected || !characteristic) return ;
  var text = data.value + "\n" ;
  var arrayBuffe = new TextEncoder().encode(text);
  characteristic.writeValue(arrayBuffe);
}
send.addEventListener('click', function(e) {
  characteristic.writeValue(new TextEncoder().encode(send_text.value + '\n'))
})
function update(connected) {
  connect.textContent = connected ? '切断' : '接続'
  msg.innerHTML = connected ? 'BLE connected' : 'BLE disconnected'
  send.disabled = !connected ;
}
</script>
</body>
</html>