今天我们来看看怎样建立web Bluetooth页面并通过该页面建立蓝牙连接和发现服务器端的服务和属性。 

如上回提到的，要在自己的PC侧（WINDOWS）建立服务器，大家需要在设备管理器-管理工具中把Internet Information Service（IIS）服务器打开，在网站目录下创建一个网站名，并通过编辑网站选项卡设定指向该站点的网页的物理路径。通常这个物理路径是你放置主页html文件（比方说index.html）的目录，比方你配置了8080端口，那么在Chrome浏览器中键入https://localhost:8080/index.html你就应当能在本机访问这个设在本机的服务器页面了。当然，如果你觉得在本机设置有可能太烦，也可以将你的网页文件上传到公众网络服务器上，这样通过internet，你在任何配置合适的电脑的Chrome浏览器都可以打开该服务页面。（我这里将示例页面放在 https://alberthinku.github.io/，大家可以点击测试）。 

    <h1>Web Bluetooth try</h1>
    <h2>Status</h2>
    <table border="1">
        <tr>
            <td>
                <b>Connected</b>
            </td>
            <td>
                <b>Services Discovery Completed</b>
            </td>
            <td>
                <b>Notifications</b>
            </td>
        </tr>
        <tr>
            <td id="status_connected">false</td>
            <td id="status_discovered">false</td>
            <td id="status_notifications">false</td>
        </tr>
    </table>

    <h2>Device Discovery and Connection</h2>
    <button id="btn_scan" onclick="discoverDevicesOrDisconnect()">discoverDevices</button>
    <hr>
    <h2>Reading and Writing</h2>

书归正传，下面我们就逐行看看web bluetooth的discoverDeviceOrDisconnect()以及发起和建立连接发现服务等相关函数的 JS脚本： 

function discoverDevicesOrDisconnect() {
    console.log("discoverDevicesOrDisconnect");
    if (!connected) {
        discoverDevices();
    } else {
        selected_device.gatt.disconnect();
        resetUI();
    }
}

function discoverDevices() {
    console.log("discoverDevices");

    var options = {
        //acceptAllDevices: true

//Chrome蓝牙服务可以将全部蓝牙设备扫描出来，但考虑到现在家里的电器设备蓝牙功能的增多，强烈建议给出扫描选项在扫描阶段就先过滤一下 

//下面的参数从设备名称和服务UUID两方面做了过滤，提高了扫描的效率 

        filters: [{ namePrefix: 'BBC' }],
        optionalServices: [DEVICE_INFORMATION_SERVICE, ACCELEROMETER_SERVICE, LED_SERVICE]
    }

	

		
		

			//下面的requestDevice API将弹出对话框，并将扫描到的符合options规则的广播中的器件 
		

	

	

		
		

			//列出来，然后通过promise机制（navigator.bluetooth.requestDevice事实上是一 
		

	

	

		
		

			//个promise）在用户通过鼠标点选确认或取消操作后返回操作内容device， 
		

	

	

		
		

			//然后一个带有所选器件描述属性的JSON参数对象device被传送到“then”的语句体中。 
		

	

	

		
		

			//关于Promise，大家可以自行在google或度娘搜索。我看到一些有意思的解释，在这里 
		

	

	

		
		

			//分享一点：在处理异步逻辑时，操作系统往往需要对时间和事件做效率和优先安排，异 
		

	

	

		
		

			//步进程函数返回后主程序告知Promise执行相关操作--与之对应的Callback机制也是处理 
		

	

	

		
		

			//异步逻辑，但Callback是在异步进程结束后告知主程序接下来该做什么了。 
		

	

	

		
		

			//有读过Microbit Runtime的朋友一定会发现，在 
		

	

	

		
		

			//http://club.digiic.com/Forum/PostDetail/p-11632.html 的concurrency一节中，我们也见到异 
		

	

	

		
		

			//步程序的处理，通过不同的路径实现并发和异步，大家可以交叉验证，融汇贯通。 
		

	
navigator.bluetooth.requestDevice(options)
        .then(device => {
            console.log('> Name:           ' + device.name);
            console.log('> Id:             ' + device.id);
            console.log('> Connected:      ' + device.gatt.connected);
            selected_device = device;
            console.log(selected_device);
            connect();// this function will connect to the device
        })
        .catch(error => {
            alert('ERROR: ' + error);
            console.log('ERROR: ' + error);
        });

}
function connect() {
    if (connected == false) {
        console.log('connecting');
        selected_device.gatt.connect().then(
            function (server) {
                console.log('Connected to ' + server.device.id);
                console.log('connected = ' + server.connected);
                setConnectedStatus(true);
                connected_server = server;
                selected_device.addEventListener(
                    'gattserverdisconnected',
                    onDisconnected);
                discoverSvcsAndChars();
            },
            function (error) {
                console.log('ERROR: could not connect -' + error);
                alert('ERROR: could not connect -' + error);
                setConnectedStatus(false);
            }
        );
    }
}

function onDisconnected() {
    console.log("onDisconnected");
    resetUI();
}

function resetUI() {
    setConnectedStatus(false);
    setDiscoveryStatus(false);
    setNotificationStatus(false);
    document.getElementById('model_number').innerHTML = "";
    document.getElementById('accelerometer_data').innerHTML = "";

}

	

		
		

			  //在服务发现的进程中，也需要异步处理--事件和时间并不能由单方面决定同时在service 
		

	

	

		
		

			//发现完成后才会进入到属性的发现。所以这里看到connected.server.getPrimaryService()函 
		

	

	

		
		

			//数也是一个promise，返回services后，在每一个services都有一个services.forEach的 
		

	

	

		
		

			//promise来执行该service的标记（比较主函数定义的service uuid，如果有相符的service  
		

	

	

		
		

			//uuid就把相关服务的布尔变量置为真，为后续的处理做准备），同时，在每个service下 
		

	

	

		
		

			//都会进行characteristics的发现（过程与service类似，也是先获取该service下的char的数 
		

	

	

		
		

			//量，然后依次发现全部的characteristic同时做好标记）。 
		

	
function discoverSvcsAndChars() {
    console.log("discoverSvcsAndChars server=" + connected_server);
    connected_server.getPrimaryServices()
        .then(services => {
            has_accelerometer_service = false;
            has_led_service = false;
            has_device_information_service = false;

            services_discovered = 0;
            service_count = services.length;
            console.log("Got" + service_count + " services");

            services.forEach(service => {
                if (service.uuid == ACCELEROMETER_SERVICE) {
                    has_accelerometer_service = true;
                }
                if (service.uuid == LED_SERVICE) {
                    has_led_service = true;
                }
                if (service.uuid == DEVICE_INFORMATION_SERVICE) {
                    has_device_information_service = true;
                }
                console.log('getting Characteristics for service' + service.uuid);
                service.getCharacteristics().then(characteriscs => {
                    console.log('> Service: ' + service.uuid);
                    services_discovered++;
                    characteriscs_discovered = 0;
                    characterisc_count = characteriscs.length;
                    characteriscs.forEach(characterisc => {
                        characteriscs_discovered++;
                        console.log('>> Characteristic: ' + characterisc.uuid);
                        if (characterisc.uuid == ACCELEROMETER_DATA) {
                            accelerometer_data = characterisc;
                            has_accelerometer_data = true;
                        }
                        if (characterisc.uuid == LED_MATRIX_STATE) {
                            led_matrix_state = characterisc;
                            has_led_matrix_state = true;
                        }
                        if (characterisc.uuid == MODEL_NUMBER_STRING) {
                            model_number_string = characterisc;
                            has_model_name_string = true;
                        }
                        if (services_discovered = service_count && characteriscs_discovered == characterisc_count) {
                            console.log("FINISHED DISCOVERY");
                            setDiscoveryStatus(true);
                        }
                    });
                });
            });
        });
}