在本系列的前几部分中,我了解了如何使用Web蓝牙API来发现蓝牙低能耗(LE)设备、形成连接、发现和缓存GATT服务和特征以及读写特征值在。最后一部分中,我们将学习如何使用通知。 一,要添加的代码内容和相关的解析 step1:用户界面状态 1.首先添加一个变量,我们可以用来跟踪通知订阅的状态: var notifications_enabled = false; 2.添加函数setNotificationsStatus(status),将通知订阅的状态传进来,将该状态赋给notifications_enabled。 function setNotificationsStatus(status) { notifications_enabled = status; document.getElementById(‘status_notifications’).innerHTML = status; } 3.有这个setNotificationsStatus(status)函数,我们要进行调用,将其放入resetUI()函数中调用。 function resetUI() { setConnectedStatus(false); setDiscoveryStatus(false); setNotificationsStatus(false);//要添加的代码就这一句 } Step2:验证状态 订阅和接收通知只能在我们与设备连接时执行。我们还需要检查连接的设备是否包含所要求的相关的服务和特征,然后我们才试图启用有关该特征的通知。因此,我们将在订阅加速计数据通知的代码中包含一些验证,就像我们在上一部分中读取和写入特征时所做的那样。添加的函数是toggleAccelerometerNotifications() 内容如下: function toggleAccelerometerNotifications() { console.log(“toggleAccelerometerNotifications”); if (!connected) { alert(“Error: Discover and connect to a device before using this function”); return; } if (!services_discovered) { alert(“Error: Service discovery has not yet completed”); return; } if (!has_accelerometer_service) { alert(“Error: The connected device does not contain the accelerometer service”); return; } if (!has_accelerometer_data) { alert(“Error: The connected device does not contain the accelerometer data characteristic”); return; } Step3:启用和禁用通知 通知也是有启用和禁用的,我们要么开始通知,要么取消订阅并停止它们,这取决于当前的订阅状态。所以我们要有以下判断: //接着上面添加 if (!notifications_enabled) { accelerometer_data.startNotifications() .then(_ => { console.log(‘accelerometer notifications started’); setNotificationsStatus(true); }) .catch(error => { console.log(‘Error: ‘ + error); alert(‘Error: ‘ + error); return; }); } else { accelerometer_data.stopNotifications() .then(_ => { console.log(‘accelerometer notifications stopped’); setNotificationsStatus(false); }) .catch(error => { console.log(‘Could not stop accelerometer_data notifications: ‘ + error); }); } } Step4:通知事件 我们仍然需要一些代码来处理收到的通知。我们还需要在停止通知时做一些整理,所以在toggleAccelerometerNotifications()函数需要添加以下代码: accelerometer_data.addEventListener(‘characteristicvaluechanged’, onAccelerometerData); accelerometer_data.removeEventListener(‘characteristicvaluechanged’, onAccelerometerData); 在toggleAccelerometerNotifications()函数中的位置如下: if (!notifications_enabled) { accelerometer_data.startNotifications() .then(_ => { console.log(‘accelerometer notifications started’); setNotificationsStatus(true); “accelerometer_data.addEventListener(‘characteristicvaluechanged’, onAccelerometerData); ”//只用添加这句代码 }) .catch(error => { console.log(‘Error: ‘ + error); alert(‘Error: ‘ + error); return; }); } else { accelerometer_data.stopNotifications() .then(_ => { console.log(‘accelerometer notifications stopped’); setNotificationsStatus(false); “accelerometer_data.removeEventListener(‘characteristicvaluechanged’, onAccelerometerData); ”//只用添加这句代码 }) .catch(error => { console.log(‘Could not stop accelerometer_data notifications: ‘ + error); }); } } 当接收到某个特征的通知时,将触发一个事件并附加该特征值。在更改中,我们所做的是注册一个函数来处理此事件。 Step5:处理通知 我们的最后一个任务是添加onAccelerometerData函数,它将在每次收到通知时被调用。事件处理程序接收一个事件对象,将附加到事件对象目标值的ArrayBuffer中。 function onAccelerometerData(event) { console.log(“onAccelerometerData”); buffer = event.target.value.buffer; dataview = new DataView(buffer); X = dataview.getUint16(0, true); Y = dataview.getUint16(2, true); Z = dataview.getUint16(4, true); console.log(“X=” + X + “, Y=” + Y + “, Z+” + Z); document.getElementById(“accelerometer_data”).innerHTML = “X=” + X + “, Y=” + Y + “, Z=” + Z; } 二,实验现象 Step1:浏览器现象 在浏览器中重新加载程序并进行测试。结果应该是这样的: Step2:开发板现象 通过点击按钮,该现象与MicroBit蓝牙设备进行读写特性(三)现象一致。


一个好奇的人