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

开发工具

基于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图片

核心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>

猜你喜欢

转载自blog.csdn.net/cxgasd/article/details/78208708