WebContent/search.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Raxa ML Search</title>
</head>
<script type="text/javascript">
	var ws = null;
	function sendMsg() {
		console.log("changed")
		var message = "{ searchRequest:{ query : '"
				+ document.getElementById("query").value + "', features: [";
		if (document.getElementById("age").value != "") {
			message = message + "{ name: 'age', value:'"
					+ document.getElementById("age").value + "'}";
		}
		message = message + "]}}";
		if (ws != null) {
			ws.send(message);
		}
	}
	function learn() {

		if (ws != null) {
			ws.send('learn:');
		}
	}
	function connect() {

		if ("WebSocket" in window) {
			console.log("WebSocket is supported by your Browser!");
			// Let us open a web socket
			ws = new WebSocket("ws://" + window.location.host
					+ "/RaxaMachineLearning/ml/search");
			ws.onopen = function() {
				// Web Socket is connected, send data using send()
				console.log("connected");
			};
			ws.onmessage = function(evt) {
				var msg = JSON.parse(evt.data);
				//console.log("Message is received... \n" + msg);
				printResults(msg.results)
			};
			ws.onclose = function() {
				// websocket is closed.
				console.log("Connection is closed...");
			};
		} else {
			// The browser doesn't support WebSocket
			alert("WebSocket NOT supported by your Browser!");
		}
	}
	function printResults(result) {
		console.log(result);
		var str = "<ul>";
		for (var i = 0; i < result.length; i++) {
			str = str + "<li><div> Drug Name: <b>" + result[i].drug.name
					+ "</b>, Drug Generic: <b>" + result[i].drug.generic
					+ "</b></div><div>Tags: "
			str = str + "<u>" + result[i].tags[0] + "</u>";
			for (var j = 1; j < result[i].tags.length; j++) {
				str = str + ", <u>" + result[i].tags[j] + "</u>";
			}
			str = str + "</div></li>";
		}
		str = str + "</ul>"
		document.getElementById("results").innerHTML = str;
	}
</script>
</head>
<body onload="connect()">
	<input type="text" size="35" style="font-size: 25px" id="query">
	<!--  onkeyup="sendMsg()" -->
	<input type="number" size="35" style="font-size: 25px" id="age" min="1">
	<button id="learn" onclick="sendMsg()">search</button>
	<button id="learn" onclick="learn()">Learn</button>
	<h2>Results</h2>
	<p id="results"></p>
</body>
</html>