基于html5+的nativejs实现android蓝牙串口通讯

已于 2022-01-19 19:30:07 修改
阅读量3.4w 收藏 88
点赞数 15
分类专栏： web前端 文章标签： web前端 安卓 蓝牙 web app
于 2018-07-20 22:50:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxgasd/article/details/78208708
版权

##开发工具
基于hbuilder打包的webapp。
##所需知识

  1. 了解基本的html，css，js，vue.js
  2. 了解原生android的开发
  3. 了解android蓝牙的开发
  4. 了解hbuilder的使用

##代码实现

摸索了一下，自己写了一个蓝牙串口连接接收数据的小示例。
由于是连接到串口蓝牙，需要在手机或电脑下载一个蓝牙串口助手来测试。

demo地址

由于js不能实现多线程，此种方法接收数据速度太慢，有条件还是要用原生插件来开多线程读取数据。

现在比较遗憾的是每次只能读取一个数据：

	let dataArr = [];
	while(invoke(btInStream, "available") !== 0) {
		let data = invoke(btInStream, "read");
		dataArr.push(data);
		let ct = new Date().getTime();
		if(ct - t > 20) {
			break;
		}
	}
	if(dataArr.length > 0) {
		options.readDataCallback && options.readDataCallback(dataArr);
	}

通过传入一个byte数组来读取流中数据的方法，如何用nativejs来翻译呢，希望有大神告知一下。

	byte[] buffer = new byte[16];
	int len = btInStream.read(buffer);

demo图片

我还封装了一个基于cordova打包的串口蓝牙插件，可以进行多线程读取数据，有需要的联系我。

核心js代码

/**
 * html5+ 串口蓝牙操作
 */
function BluetoothTool() {
	let BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
	let Intent = plus.android.importClass("android.content.Intent");
	let IntentFilter = plus.android.importClass("android.content.IntentFilter");
	let BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
	let UUID = plus.android.importClass("java.util.UUID");
	let Toast = plus.android.importClass("android.widget.Toast");
	//连接串口设备的 UUID
	let MY_UUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");

	let invoke = plus.android.invoke;
	let btAdapter = BluetoothAdapter.getDefaultAdapter();
	let activity = plus.android.runtimeMainActivity();

	let btSocket = null;
	let btInStream = null;
	let btOutStream = null;
	let setIntervalId = 0;

	let btFindReceiver = null; //蓝牙搜索广播接收器
	let btStatusReceiver = null; //蓝牙状态监听广播

	let state = {
		bluetoothEnable: false, //蓝牙是否开启
		bluetoothState: "", //当前蓝牙状态
		discoveryDeviceState: false, //是否正在搜索蓝牙设备
		readThreadState: false, //数据读取线程状态
	};

	let options = {
		/**
		 * 监听蓝牙状态回调
		 * @param {String} state
		 */
		listenBTStatusCallback: function(state) {},
		/**
		 * 搜索到新的蓝牙设备回调
		 * @param {Device} newDevice
		 */
		discoveryDeviceCallback: function(newDevice) {},
		/**
		 * 蓝牙搜索完成回调
		 */
		discoveryFinishedCallback: function() {},
		/**
		 * 接收到数据回调
		 * @param {Array} dataByteArr
		 */
		readDataCallback: function(dataByteArr) {},
		/**
		 * 蓝牙连接中断回调
		 * @param {Exception} e
		 */
		connExceptionCallback: function(e) {}
	}

	let bluetoothToolInstance = {
		state: state, //蓝牙状态
		init: init, //初始化回调函数
		isSupportBluetooth: isSupportBluetooth,
		getBluetoothStatus: getBluetoothStatus,
		turnOnBluetooth: turnOnBluetooth,
		turnOffBluetooth: turnOffBluetooth,
		getPairedDevices: getPairedDevices,
		discoveryNewDevice: discoveryNewDevice,
		listenBluetoothStatus: listenBluetoothStatus,
		connDevice: connDevice,
		disConnDevice: disConnDevice,
		cancelDiscovery: cancelDiscovery,
		readData: readData,
		sendData: sendData
	}
	if(window.bluetoothToolInstance) {
		return window.bluetoothToolInstance;
	} else {
		window.bluetoothToolInstance = bluetoothToolInstance;
		return bluetoothToolInstance;
	}

	function init(setOptions) {
		Object.assign(options, setOptions);
		state.bluetoothEnable = getBluetoothStatus();
		listenBluetoothStatus();
	}

	function shortToast(msg) {
		Toast.makeText(activity, msg, Toast.LENGTH_SHORT).show();
	}

	/**
	 * 是否支持蓝牙
	 * @return {boolean}
	 */
	function isSupportBluetooth() {
		if(btAdapter != null) {
			return true;
		}
		return false;
	}
	/**
	 * 获取蓝牙的状态
	 * @return {boolean} 是否已开启
	 */
	function getBluetoothStatus() {
		if(btAdapter != null) {
			return btAdapter.isEnabled();
		}
		return false;
	}

	/**
	 * 打开蓝牙
	 * @param activity
	 * @param requestCode
	 */
	function turnOnBluetooth() {
		if(btAdapter == null) {
			shortToast("没有蓝牙");
			return;
		}
		if(!btAdapter.isEnabled()) {
			if(activity == null) {
				shortToast("未获取到activity");
				return;
			} else {
				let intent = new Intent(BluetoothAdapter.ACTION_REQUEST_ENABLE);
				let requestCode = 1;
				activity.startActivityForResult(intent, requestCode);
				return;
			}
		} else {
			shortToast("蓝牙已经打开");
		}
	}

	/**
	 * 关闭蓝牙
	 */
	function turnOffBluetooth() {
		if(btAdapter != null && btAdapter.isEnabled()) {
			btAdapter.disable();
		}
		if(btFindReceiver != null) {
			try {
				activity.unregisterReceiver(btFindReceiver);
			} catch(e) {

			}
			btFindReceiver = null;
		}
		state.bluetoothEnable = false;
		cancelDiscovery();
		closeBtSocket();

		if(btAdapter != null && btAdapter.isEnabled()) {
			btAdapter.disable();
			shortToast("蓝牙关闭成功");
		} else {
			shortToast("蓝牙已经关闭");
		}
	}

	/**
	 * 获取已经配对的设备
	 * @return {Array} connetedDevices
	 */
	function getPairedDevices() {
		let pairedDevices = [];

		//蓝牙连接android原生对象，是一个set集合
		let pairedDevicesAndroid = null;
		if(btAdapter != null && btAdapter.isEnabled()) {
			pairedDevicesAndroid = btAdapter.getBondedDevices();
		} else {
			shortToast("蓝牙未开启");
		}

		if(!pairedDevicesAndroid) {
			return pairedDevices;
		}

		//遍历连接设备的set集合，转换为js数组
		let it = invoke(pairedDevicesAndroid, "iterator");
		while(invoke(it, "hasNext")) {
			let device = invoke(it, "next");
			pairedDevices.push({
				"name": invoke(device, "getName"),
				"address": invoke(device, "getAddress")
			});
		}
		return pairedDevices;
	}

	/**
	 * 发现设备
	 */
	function discoveryNewDevice() {
		if(btFindReceiver != null) {
			try {
				activity.unregisterReceiver(btFindReceiver);
			} catch(e) {
				console.error(e);
			}
			btFindReceiver = null;
			cancelDiscovery();
		}
		let Build = plus.android.importClass("android.os.Build");
		
		 //6.0以后的如果需要利用本机查找周围的wifi和蓝牙设备, 申请权限
        if(Build.VERSION.SDK_INT >= 6.0){
           
        }
		
		btFindReceiver = plus.android.implements("io.dcloud.android.content.BroadcastReceiver", {
			"onReceive": function(context, intent) {
				plus.android.importClass(context);
				plus.android.importClass(intent);
				let action = intent.getAction();

				if(BluetoothDevice.ACTION_FOUND == action) { // 找到设备
					let device = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
					let newDevice = {
						"name": plus.android.invoke(device, "getName"),
						"address": plus.android.invoke(device, "getAddress")
					}
					options.discoveryDeviceCallback && options.discoveryDeviceCallback(newDevice);
				}
				if(BluetoothAdapter.ACTION_DISCOVERY_FINISHED == action) { // 搜索完成
					cancelDiscovery();
					options.discoveryFinishedCallback && options.discoveryFinishedCallback();
				}
			}
		});
		let filter = new IntentFilter();
		filter.addAction(BluetoothDevice.ACTION_FOUND);
		filter.addAction(BluetoothAdapter.ACTION_DISCOVERY_FINISHED);
		activity.registerReceiver(btFindReceiver, filter);
		btAdapter.startDiscovery(); //开启搜索
		state.discoveryDeviceState = true;
	}

	/**
	 * 蓝牙状态监听
	 * @param {Activity} activity
	 */
	function listenBluetoothStatus() {
		if(btStatusReceiver != null) {
			try {
				activity.unregisterReceiver(btStatusReceiver);
			} catch(e) {
				console.error(e);
			}
			btStatusReceiver = null;
		}

		btStatusReceiver = plus.android.implements("io.dcloud.android.content.BroadcastReceiver", {
			"onReceive": function(context, intent) {
				plus.android.importClass(context);
				plus.android.importClass(intent);

				let action = intent.getAction();
				switch(action) {
					case BluetoothAdapter.ACTION_STATE_CHANGED:
						let blueState = intent.getIntExtra(BluetoothAdapter.EXTRA_STATE, 0);
						let stateStr = "";
						switch(blueState) {
							case BluetoothAdapter.STATE_TURNING_ON:
								stateStr = "STATE_TURNING_ON";
								break;
							case BluetoothAdapter.STATE_ON:
								state.bluetoothEnable = true;
								stateStr = "STATE_ON";
								break;
							case BluetoothAdapter.STATE_TURNING_OFF:
								stateStr = "STATE_TURNING_OFF";
								break;
							case BluetoothAdapter.STATE_OFF:
								stateStr = "STATE_OFF";
								state.bluetoothEnable = false;
								break;
						}
						state.bluetoothState = stateStr;
						options.listenBTStatusCallback && options.listenBTStatusCallback(stateStr);
						break;
				}
			}
		});
		let filter = new IntentFilter();
		filter.addAction(BluetoothAdapter.ACTION_STATE_CHANGED);
		activity.registerReceiver(btStatusReceiver, filter);
	}

	/**
	 * 根据蓝牙地址，连接设备
	 * @param {Stirng} address
	 * @return {Boolean}
	 */
	function connDevice(address) {
		let InputStream = plus.android.importClass("java.io.InputStream");
		let OutputStream = plus.android.importClass("java.io.OutputStream");
		let BluetoothSocket = plus.android.importClass("android.bluetooth.BluetoothSocket");

		cancelDiscovery();
		if(btSocket != null) {
			closeBtSocket();
		}
		state.readThreadState = false;

		try {
			let device = invoke(btAdapter, "getRemoteDevice", address);
			btSocket = invoke(device, "createRfcommSocketToServiceRecord", MY_UUID);
		} catch(e) {
			console.error(e);
			shortToast("连接失败，获取Socket失败！");
			return false;
		}
		try {
			invoke(btSocket, "connect");
			readData(); //读数据
			shortToast("连接成功");
		} catch(e) {
			console.error(e);
			shortToast("连接失败");
			try {
				btSocket.close();
				btSocket = null;
			} catch(e1) {
				console.error(e1);
			}
			return false;
		}
		return true;
	}

	/**
	 * 断开连接设备
	 * @param {Object} address
	 * @return {Boolean}
	 */
	function disConnDevice() {
		if(btSocket != null) {
			closeBtSocket();
		}
		state.readThreadState = false;
		shortToast("断开连接成功");
	}

	/**
	 * 断开连接设备
	 * @param {Object} address
	 * @return {Boolean}
	 */
	function closeBtSocket() {
		state.readThreadState = false;
		if(!btSocket) {
			return;
		}
		try {
			btSocket.close();
		} catch(e) {
			console.error(e);
			btSocket = null;
		}
	}

	/**
	 * 取消发现
	 */
	function cancelDiscovery() {
		if(btAdapter.isDiscovering()) {
			btAdapter.cancelDiscovery();
		}
		if(btFindReceiver != null) {
			activity.unregisterReceiver(btFindReceiver);
			btFindReceiver = null;
		}
		state.discoveryDeviceState = false;
	}

	/**
	 * 读取数据
	 * @param {Object} activity
	 * @param {Function} callback
	 * @return {Boolean}
	 */
	function readData() {
		if(!btSocket) {
			shortToast("请先连接蓝牙设备！");
			return false;
		}
		try {
			btInStream = invoke(btSocket, "getInputStream");
			btOutStream = invoke(btSocket, "getOutputStream");
		} catch(e) {
			console.error(e);
			shortToast("创建输入输出流失败！");
			closeBtSocket();
			return false;
		}
		let setTimeCount = 0;
		read();
		state.readThreadState = true;
		return true;

		/**
		 * 模拟java多线程读取数据
		 */
		function read() {
			clearInterval(setIntervalId);
			setIntervalId = setInterval(function() {
				setTimeCount++;
				if(state.readThreadState) {
					let t = new Date().getTime();
					//心跳检测
					if(setTimeCount % 20 == 0) {
						try {
							btOutStream.write([0b00]);
						} catch(e) {
							state.readThreadState = false;
							options.connExceptionCallback && options.connExceptionCallback(e);
						}
					}
					let dataArr = [];
					while(invoke(btInStream, "available") !== 0) {
						let data = invoke(btInStream, "read");
						dataArr.push(data);
						let ct = new Date().getTime();
						if(ct - t > 20) {
							break;
						}
					}
					if(dataArr.length > 0) {
						options.readDataCallback && options.readDataCallback(dataArr);
					}
				}
			}, 40);
		}

	}

	/**
	 * 发送数据
	 * @param {String} dataStr
	 * @return {Boolean}
	 */
	function sendData(dataStr) {
		if(!btOutStream) {
			shortToast("创建输出流失败！");
			return;
		}
		let bytes = invoke(dataStr, 'getBytes', 'gbk');
		try {
			btOutStream.write(bytes);
		} catch(e) {
			return false;
		}
		return true;
	}
};

调用示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>html5+ android蓝牙操作</title>
	</head>

	<body>
		<div id="app">
			<input type="button" name="" id="" value="打开蓝牙" @click="turnOnBluetooth" />
			<input type="button" name="" id="" value="关闭蓝牙" @click="turnOffBluetooth" />
			<input type="button" name="" id="" value="已配对的设备" @click="getPairedDevices" />
			<input type="button" name="" id="" value="搜索蓝牙设备" @click="discoveryNewDevice" />
			<div>
				蓝牙状态：
				<pre>{{bluetoothState}}</pre>
			</div>
			<div>
				消息：{{msg}}
			</div>
			<div>
				<input type="button" value="断开连接" @click="disConnDevice" />
			</div>
			已配对的设备：
			<br>
			<ul>
				<li v-for="device in pairedDevices">
					名称：{{device.name}}<br> 地址：{{device.address}}
					<br>
					<input type="button" value="连接" @click="connDevice(device.address)" />
				</li>
			</ul>
			发现的设备：<br>
			<ul>
				<li v-for="device in newDevices">
					名称：{{device.name}}<br> 地址：{{device.address}}<br>
					<input type="button" value="连接" @click="connDevice(device.address)" />
				</li>
			</ul>
			<div>
				发送数据：
				<textarea cols="20" rows="4" v-model="sendData"></textarea>
				<input type="button" value="发送" @click="onSendData" />
			</div>
			<br>
			<div style="margin-bottom: 100px;">接收的数据：
				<input type="button" value="清空" @click="receiveDataArr = [];" />
				<div style="width: 100%;min-height: 50px;">byte数组:
					<span v-for="data in receiveDataArr">
						{{data}}&nbsp;
					</span>
				</div>
				<div style="width: 100%;min-height: 50px;word-wrap:break-word;">
					对应的string字符串:<br> {{receiveDataStr}}
				</div>
			</div>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/BluetoothTool.js"></script>
		<script type="text/javascript">
			// 监听plusready事件
			document.addEventListener("plusready", function() {
				var bluetoothTool = null;
				var vm = new Vue({
					"el": "#app",
					data: function() {
						return {
							bluetoothState: {},
							pairedDevices: [],
							newDevices: [],
							receiveDataArr: [],
							sendData: "",
							msg: ""
						}
					},
					computed: {
						receiveDataStr: function() {
							return String.fromCharCode.apply(String, this.receiveDataArr);
						},
						bluetoothStatusDesc: function() {
							return this.bluetoothStatus ? "已开启" : "已关闭";
						}
					},
					created: function() {
						let that = this;
						bluetoothTool = BluetoothTool();
						this.bluetoothState = bluetoothTool.state;
						bluetoothTool.init({
							listenBTStatusCallback: function(state) {
								that.msg = "蓝牙状态: " + state;
							},
							discoveryDeviceCallback: function(newDevice) {
								that.newDevices.push(newDevice);
							},
							discoveryFinishedCallback: function() {
								that.msg = "搜索完成";
							},
							readDataCallback: function(dataByteArr) {
								if(that.receiveDataArr.length >= 200) {
									that.receiveDataArr = [];
								}
								that.receiveDataArr.push.apply(that.receiveDataArr, dataByteArr);
							},
							connExceptionCallback: function(e) {
								console.log(e);
								that.msg = "设备连接失败";
							}
						});
					},
					methods: {
						turnOnBluetooth: function() {
							bluetoothTool.turnOnBluetooth();
						},
						turnOffBluetooth: function() {
							bluetoothTool.turnOffBluetooth();
						},
						getPairedDevices: function() {
							this.pairedDevices = bluetoothTool.getPairedDevices();
						},
						discoveryNewDevice: function() {
							this.newDevices = [];
							bluetoothTool.discoveryNewDevice();
						},
						cancelDiscovery: function() {
							bluetoothTool.cancelDiscovery();
						},
						connDevice: function(address) {
							bluetoothTool.connDevice(address);
						},
						disConnDevice: function() {
							bluetoothTool.disConnDevice();
						},
						onSendData: function() {
							bluetoothTool.sendData(this.sendData);
						},
						
					}
				});
			}, false);
		</script>

	</body>

</html>

当时在cordova上开发的蓝牙插件demo https://github.com/chengxg/small-car

apicloud上的插件见 https://blog.csdn.net/cxgasd/article/details/122537895
这个比较实用

仁泉之子
关注
  • 15
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 114
    评论
专栏目录
评论 114
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值