index.html

<!DOCTYPE html>
<html>
	<head>
		<title>BT2WebService</title>
		<link href="https://fonts.googleapis.com/css?family=Oswald|Slabo+27px" rel="stylesheet">
		<script src="https://use.fontawesome.com/45bd5d1190.js"></script>
		<style>
			body{font-family: 'Slabo 27px', serif;background-color:#eee6cb; color:#333333}
			h1 {font-family: 'Oswald', sans-serif;font-size:42px;margin-bottom:30px;}
			h2 {font-family: 'Slabo 27px', sans-serif;font-size:18px;}
			#wrapper{width:960px;margin-left:auto;margin-right:auto;}
			#header, #connect-button, #logging-section, #connected-devices{text-align:center;margin-bottom:30px;}
			button {font-family: 'Oswald', serif; border:none;text-transform:uppercase;cursor:pointer;}
			button#connect{width:200px;height:50px;font-size:20px;background-color:#0082FC; color:#DEF4E4;}
			button#connect i {margin-right:15px;}
			textarea{font-family:monospace;border:none;width:100%;font-size:14px;background-color:#DEF4E4}
			button.disconnect{width:30px;height:30px;font-size:14px;background-color:#CA0000;color:#DEF4E4 }
			table {width:100%;}
			table th {background-color:#77c5f3; padding:10px;}
			.clear{clear:both;}
			.hidden{display:none;}
		</style>
	</head>
	<body>
		<div id="wrapper">

			<div id="header">
				<h1>Bluetooth-to-WebService-Relay</h1>
				<h2>Web bluetooth to WebService relaying for NORDIC UART service.</h2>
				<script>
				document.write("<p>Web Bluetooth is " + (navigator.bluetooth?'enabled':'not enabled') + "  on this computer.</p>");
				</script>
			</div>
		
			<div id="logging-section">
				<div><textarea id="log" rows="10" disabled></textarea></div>
			</div>

			<div id="connect-button">
				<button id="connect"><i class="fa fa-bluetooth" aria-hidden="true"></i> Connect</button>
			</div>

			<div id="connected-devices-header">
				<div style="float:left;">
					<h2>Connected devices</h2>
				</div>
				<div class="clear"></div>	
			</div>
			<div id="connected-devices">
				<div>
					<table id="device-listing">
						<tr><th>Device id</th><th>Disconnect</th></tr>
					</table>	
				</div>

			</div>
		</div>

<script>	

// logging util can see to textarea on page
function logit(id, msg) {
    //var msgfmt = msg.replace("\n", "");
    var logEdit = document.getElementById("log"); // textarea
    var update = logEdit.innerHTML + "> " + id + msg + "\n";
    logEdit.innerHTML = update;
    logEdit.scrollTop = logEdit.scrollHeight;
	}

// String utils
function String2Uint8Array(str) {
    var buf = new ArrayBuffer(str.length);
	var bufView = new Uint8Array(buf);
	for (var i=0, strLen=str.length; i<strLen; i++) {
		bufView[i] = str.charCodeAt(i);
	}
	return bufView;
}

function toHexString(byteArray) {
    return Array.prototype.map.call(byteArray, function(byte) {
        return ('0' + (byte & 0xFF).toString(16)).slice(-2);
    }).join(' ');
}

// https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html
class BleUART {

	constructor() {
		this.device = null; // Type of BluetoothDevice
		this.onDisconnected = this.onDisconnected.bind(this);

		// Nordic UART service and characteristics
		this.nUART = {
			serviceUUID: '6e400001-b5a3-f393-e0a9-e50e24dcca9e',
			txUUID: '6e400002-b5a3-f393-e0a9-e50e24dcca9e',
			rxUUID: '6e400003-b5a3-f393-e0a9-e50e24dcca9e'
		};

		this.chunked = [];
	}
    
    // let the browser choose you a bluetooth device
	request() {
		let options = {
			"filters": [{
				"services": [this.nUART.serviceUUID]
				}]
		};
		return navigator.bluetooth.requestDevice(options)
		.then(bluetoothDevice => {
			this.device = bluetoothDevice;
			this.device.addEventListener('gattserverdisconnected', this.onDisconnected);
		});
	}
	
	connect() {
		if (!this.device) {
			return Promise.reject('Device is not connected.');
		}
		return this.device.gatt.connect();
	}

	writeChunks() {

		return this.device.gatt.getPrimaryService(this.nUART.serviceUUID)
		.then(service => service.getCharacteristic(this.nUART.txUUID))
		.then(characteristic => {
			characteristic.writeValue(this.chunked[0])
			.then(_ => {
				this.chunked.shift(); // delete first
				if(this.chunked.length > 0) {
					this.writeChunks();
				} 
			});
		});
	}

	write(data) {
        const array_chunks = (array, chunk_size) => Array(Math.ceil(array.length / chunk_size)).fill().map((_, index) => index * chunk_size).map(begin => array.slice(begin, begin + chunk_size));
        this.chunked = array_chunks(data,20)
		this.writeChunks().then(_ =>{
			logit(this.device.id, " <- '" + toHexString(data) + "'");
		});	
	}

	startRXNotifications(listener) {
		return this.device.gatt.getPrimaryService(this.nUART.serviceUUID)
		.then(service => service.getCharacteristic(this.nUART.rxUUID))
		.then(characteristic => characteristic.startNotifications())
		.then(characteristic => characteristic.addEventListener('characteristicvaluechanged', listener));
	}
	
	disconnect() {
		if (!this.device) {
			return Promise.reject('Device is not connected.');
		}
		return this.device.gatt.disconnect();
	}

	onDisconnected(event) {
		// Delete tracked instance
		logit(this.device.id, ' disconnected from bluetooth.');
		delete ble_objects[this.device.id];
		var deviceRow = document.getElementById('device-'+ this.device.id);
		if (deviceRow != undefined) {
			deviceRow.remove();
		}
		
		// disconnect from WebService
		if (sockets[this.device.id]) {
			sockets[this.device.id].disconnect();
		}

		// Delete Socket object
		delete sockets[this.device.id];
        // Remove EventListener
        this.device.removeEventListener('gattserverdisconnected', this.onDisconnected)
	}
}

class Socket {
    constructor()
    {
        this.ws = null;
        this.onconnect = null;
        this.ondisconnect = null;
        this.onmessage = null;
    }

	connect(url){
		this.ws = new WebSocket(url, 'mqttv3.1');
		this.ws.binaryType = "arraybuffer";
		
        this.ws.onopen = (evt) => {
            if(this.onconnect){
                this.onconnect(evt.data);
            }
        }
        
		this.ws.onclose = (evt) => { this.disconnect(); }
        
		this.ws.onmessage = (evt) => {
            var byteArray = new Uint8Array(evt.data);
            //console.log("WebService recv: " + toHexString(byteArray));
            if(this.onmessage){
                this.onmessage(byteArray);
            }                    
        }
		this.ws.onerror = (evt) => {
			alert(evt.data);
		}
	}
    
    disconnect() {
        if(this.ondisconnect){
            this.ondisconnect();
        }
    }

    send(byteArray) {
        //console.log("WebService send: " + toHexString(byteArray));
		this.ws.send(byteArray);
    }
}

var ble_objects = {};  // BleUART objects are stored here
var sockets = {}; // mosquitto objects are stored here
var WS_Connect_string = "";

var wmq = {	
	sending : false,

	connect : function(){
		// Connect to device and set up RX listener
		// Asign device to device object for control
		var ble_object = new BleUART();
		ble_object.request()
		.then(_ => ble_object.connect())
		.then(_ => {
			var id = ble_object.device.id
			logit(id, ' connected to bluetooth.');

			// Add to table
			wmq.createTableEntry(ble_object.device);
			// RX callback
			ble_object.startRXNotifications(function(d){
				// RX Handler
				wmq.msgHandler(ble_object.device.id, new Uint8Array(d.target.value.buffer));
			});

			// Add ble_object to ble_objects list
			ble_objects[id] = ble_object;

			// Setup WebService
			sockets[id] = new Socket();

			sockets[id].onconnect = function(rc){
				logit(id, " Secure Web Socket opened");
                ble_objects[id].write(String2Uint8Array("OK"));
			};

			sockets[id].ondisconnect = function(){
                logit(id, " Secure Web Socket closed");
                WS_Connect_string = "";
			};

			// This is the main thing we're interested in here // Here is the callbackfunktion definition
			sockets[id].onmessage = function(data){
				// Straight to device 
				wmq.sending = true;
				ble_objects[id].write(data);
				wmq.sending = false;
			};

		})
		.catch(error => { console.log(error) });
	},

	createTableEntry : function(device){
		var devices = document.getElementById("device-listing");
		var row = devices.insertRow(1);
		row.setAttribute("id", "device-" + device.id);

		var deviceID = row.insertCell(0);
		deviceID.innerHTML = device.id;

		//var subCell = row.insertCell(1);
		//subCell.className = "mqtt";
		//subCell.setAttribute("id", "device-sub-" + device.id);

		// Create disconnect button with listener
		var disconnect = row.insertCell(1);
		var btn = document.createElement("button");
		btn.innerHTML = '<i class="fa fa-close" aria-hidden="true"></i>';
		btn.className = "disconnect";
		btn.setAttribute("value", device.id);
		btn.addEventListener('click', wmq.disconnect, false);
		disconnect.appendChild(btn);
	
	},

	// function for the disconnect button
	disconnect : function(){
		// read value att from the button
		var deviceID = this.getAttribute("value");
		// disconnect bluetooth device
		ble_objects[deviceID].disconnect();
	},

	// msgHandler gets the messages from the characteristicvaluechanged-
    // EventListener and sends them to the Webservice
    // If the WebService ist null (not connected),
    // it calls connect when it get the apropriate String with the URL
    // The String to connect must be formed exactly like this:
    // WebSocket('wss://some_URL:some_Port/');
	msgHandler : function(id, msg){
        // WebSocket is not connected. Waiting for a Connect-String WebSocket('wss://some_URL:some_Port/');
        if (!sockets[id].ws) {
            WS_Connect_string += String.fromCharCode.apply(null, new Uint8Array(msg));
            if (WS_Connect_string.endsWith(");")) {
                var broker = WS_Connect_string.replace(/^WebSocket\('([^']*)'\);$/, "$1");
                logit(id, " -> " + WS_Connect_string);
                sockets[id].connect(broker);
            }
            return
        }
        if (sockets[id].ws.readyState == sockets[id].ws.OPEN) {
            logit(id, " -> '" + toHexString(msg) + "'");
        sockets[id].send(msg);
        }
	},
}

// Connect button listener
document.querySelector('#connect').addEventListener('click', _ => wmq.connect());

</script>	
</body>
</html>