Web Bluetooth（通俗易懂）html连接蓝牙设备读写

Web Bluetooth（通俗易懂）html连接蓝牙设备读写，web与蓝牙设备连接，html与蓝牙设备连接，js与蓝牙设备连接

帅过二硕ฅ

5077人浏览 · 2022-09-05 17:21:05

帅过二硕ฅ · 2022-09-05 17:21:05 发布

前提：需要https协议关于win10前端静态项目怎么配置https我会在下一篇中详细介绍
html中定义按钮

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=\, initial-scale=1.0">
	<title>测试</title>
	<script type="text/javascript" src="./js/bluetooth-bulb.js"></script>
</head>
<body>
	<button onclick="clickme()" class="btn">点击</button>
</body>
</html>

let device = await navigator.bluetooth.requestDevice({
	filters: [
		{ name: '蓝牙设备名称' },//通过名称筛选
		{ services: [0xfeff] },//通过UUID筛选，可以提供完整的蓝牙UUID或简短的16位或32位形式
		{ namePrefix: '名称前缀' },//通过设备名称前缀过滤，如果通过名称前缀过滤的话则必须配置optionalServices注意参数内的大写字母都要改成小写
	],
	optionalServices: ['0000fff0-XXXX-XXXX-XXXX-00805f9b34fb']
	, acceptAllDevices: true//设置acceptAllDevices代表查询所有蓝牙设备 也是必须配置optionalServices
});
device.addEventListener('gattserverdisconnected', onDisconnected);//监听设备断开连接
let server = await device.gatt.connect();
let service = await server.getPrimaryService(0xfff0);//这里需要服务UUID 还是可以提供完整的蓝牙UUID或简短的16位或32位形式
let services = await server.getPrimaryServices();//如果如果不清楚服务UUID的话 可以先用getPrimaryServices获取服务的UUID 当然最简单的是去找公司的硬件工程师问一下 不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来
let characteristics = await service.getCharacteristics();//获取设备所有信息特征值
let characteristic = await service.getCharacteristic(0xfff4);//这里需要读的特征值UUID 还是可以提供完整的蓝牙UUID或简短的16位或32位形式  当然最简单的是去找公司的硬件工程师问一下 不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来
characteristic.startNotifications();//开始监听
characteristic.addEventListener(
	'characteristicvaluechanged', e => {
		//监听设备端的操作 获取到值之后再解析
		console.log('e.target.value:',ab2hex(e.target.value.buffer));
	}
);
let unCharacteristic = await service.getCharacteristic(0xfff5);//这里需要写入的特征值UUID 还是可以提供完整的蓝牙UUID或简短的16位或32位形式  当然最简单的是去找公司的硬件工程师问一下 不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来
await unCharacteristic.writeValue(string2buffer("55AAF001011165F9F10000"))//到这一步就可以写入了	这里的命令还是要去找硬件工程师要

function onDisconnected(event) {
	const device = event.target;
	console.log(`设备: ${device.name} 已经断开连接`);
}
function string2buffer(str) {
	let val = "";
	if (!str) return;
	let length = str.length;
	let index = 0;
	let array = [];
	while (index < length) {
		array.push(str.substring(index, index + 2));
		index = index + 2;
	}
	val = array.join(",");
	// 将16进制转化为ArrayBuffer
	return new Uint8Array(val.match(/[\da-f]{2}/gi).map(function (h) {
	return parseInt(h, 16);
	})).buffer
}
function ab2hex(buffer) {
	const hexArr = Array.prototype.map.call(
		new Uint8Array(buffer),
		function (bit) {
			return ('00' + bit.toString(16)).slice(-2);
		}
	)
	return hexArr.join('');
}

之前有做过小程序连接蓝牙设备或者是ios再或者是安卓连接蓝牙设备的话一定肯定对服务UUID、读UUID、写UUID不陌生
当然大部分人都应该是第一次去做连接蓝牙设备这些值都是需要硬件工程师提供过来的如果你比较幸运公司的硬件工程师懂这些的话那么恭喜你你会很省事的就做完了这些但是你和我一样什么东西都要不到的话就让他们去理解下面参数是什么意思并提供给你只有这些参数都填对了代码才跑的通最起码需要给到广播UUID然后通过getPrimaryServices和getCharacteristics去获取设备的服务UUID以及所有的特征值ID

{
    deviceName: "CCPC0XXX",//设备名称 以下是我们公司的命名 每个都是不同的
    deviceId: "601A8974-XXXX-XXXX-XXXX-AA6ED12A4502",//设备ID 谷歌浏览器需要用到的和苹果手机里面获取到的一样 硬件那边管他叫mac地址——马克地址 他们知道的和安卓手机里面获取到的一样
    servicesUUID: "0000FFF0-XXXX-XXXX-XXXX-00805F9B34FB",//服务ID 对应getPrimaryService中的参数
    writeUUID: "0000FFF5-XXXX-XXXX-XXXX-00805F9B34FB",//写入ID
    notifyUUID: "0000FFF4-XXXX-XXXX-XXXX-00805F9B34FB",//读ID
    advertisServiceUUIDs:"0000FEFF-XXXX-XXXX-XXXX-00805F9B34FB"//这个对应过滤中的services 应该是广播ID
}