SREENATHPGS/client.html

## client.html
<html>
<head>
	<title>Web Socket Messenger.</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<style>
		.message_board{
			border: solid 1px;
			width: 500px;
			margin:auto;
			padding:5px;
			font-family: 'fira_sansregular';
			height:600px;
			overflow:auto;
		}
		.message_thread {
			border: solid 1px;
			width:70%;
			padding:2px;
			margin:2px;
		}

		.message_box {
			border: solid 0px;
			overflow: auto;
			padding:3px;
			margin-bottom:5px
		}

		#server_message{
			float: left;
		}

		#client_message {
			float: right;
		}

		.server_icon {
			border:solid 1px;
			display:inline-block;
			padding:3px;
			float:left;
		}

		.client_icon {
			border:solid 1px;
			display:inline-block;
			padding:3px;
			float:right;
		}

		p {
			border:solid 1px;
		}

		#recmsg {
			border: solid 1px;
			margin: auto;
			width: 500px;
			padding: 5px;
		}

		#input_box {
			margin: auto;
			width: 500px;
			padding: 5px;
			border: solid 1px;
		}

		input {
			width: 500px;
		}

		body {
			background-color: black;
			color:white;
		}

	</style>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous">

</script>
</head>
<body>
	<div class="message_board" id="message_board">

		<div class="message_box">
			<div class="server_icon"><i class="fas fa-user-tie"></i></div>
			<div class="message_thread" id="server_message">
			</div>
		</div>

		<div class="message_box">
			<div class="client_icon"><i class="fas fa-user-alt"></i></div>
			<div class="message_thread" id="client_message">
			</div>
		</div>

	</div>
	<div id="input_box">
		<table>
			<tr><td><input type="text" name="input" id="inputText" placeholder=".>"></td></tr>
		</table>
	</div>
	<div class="custom_font" id="recmsg">
	</div>
</body>
<script type="text/javascript">
	var messageLogs = {};
	messageLogs["me"] = {};
	messageLogs["remote"] = {};
	var glob = {}
		glob["receiverId"]="";
	$(document).ready(function (){
		buildwebsocket();
		$(document).on('keypress', function(e) {
			if (e.which == 13) {
				console.log('Enter pressed!');
				inputText = $("#inputText").val();
				console.log("Input text is.:"+ inputText);

				if (inputText.startsWith("#")) {
					console.log("# Detected. Calling setReceiverId function.");
					setReceiverId( inputText.replace("#","") );
				} else {
					timestamp = getCurrentTime();
					try {
						sendText = packTheMessageToJsonMap(inputText);
						updateMessageLogs(timestamp,'me', sendText);
						mapUpdated(timestamp);
 					console.log(messageLogs);
					} catch (e) {
						console.log(e);
					}
 	  		}
 			}
 		});

		function mapUpdated(timestamp) {
			updateUI(timestamp, 'me');
			sendMessageToServer(timestamp);
		}

		function updateUI(timestamp, message_from) {
			if ( message_from =='me') {
				$("#message_board").append("<div class='message_box'><div class='client_icon'><i class='fas fa-user-alt'></i></div><div class='message_thread' id='client_message'>"+messageLogs['me'][timestamp]+"</div></div>");
				$("#message_board").stop ().animate ({scrollTop: $('#message_board')[0].scrollHeight});
			} else if (message_from == 'remote') {
				$("#message_board").append("<div class='message_box'><div class='server_icon'><i class='fas fa-user-tie'></i></div><div class='message_thread' id='server_message'>"+messageLogs['remote'][timestamp]+"</div></div>");
				$("#message_board").stop ().animate ({scrollTop: $('#message_board')[0].scrollHeight});
			}
		}

		function sendMessageToServer(timestamp) {
			console.log("Sending Message to server! "+ messageLogs['me'][timestamp]);
			if (messageLogs['me'][timestamp]["to"] == "") {
				console.log("To not found");
			} else {
				ws.send(messageLogs['me'][timestamp]);
			}

		}

		function getReceiverId() {
			console.log("Returning receiverId "+glob["receiverId"]);
			return glob["receiverId"];
		}

		function setReceiverId(receiverId) {
			glob["receiverId"] = receiverId;
		}

		function packTheMessageToJsonMap(inputText) {
			console.log("packing the message.");
			messageFrame = {};
			messageFrame["to"] = getReceiverId();
			messageFrame["message"] = inputText;
			return JSON.stringify(messageFrame)
		}

		function updateMessageLogs(timestamp, message_from, data){
			if (data["to"] || data["to"] === "") {
				throw {
					name:"JSON error",
					message: "Receiver id not found"
				}
			} else {
				messageLogs[message_from][timestamp] = data;
			}
		}

		function getCurrentTime() {
			timestamp = new Date();
			return timestamp;
		}


		var ws;
		function buildwebsocket(){
			ws = new WebSocket("ws://0.0.0.0:5050",'echo-protocol');
			ws.onopen = function(evt) { onOpen(evt) };
			ws.onclose = function(evt) { onClose(evt) };
			ws.onmessage = function(evt) { onMessage(evt) };
			ws.onerror = function(evt) { onError(evt) };
		}
		function onOpen(ev){
			console.log("connected to server! cool! :D");
			$("#recmsg").append("<p>connected!</p>");
		}
		function onClose(ev){
			$("#recmsg").append("<p>connection closed!</p>");
		}
		function onMessage(ev){
			console.log("from server:");
			timestamp = getCurrentTime();
			updateMessageLogs(timestamp, 'remote', ev.data);
			updateUI(timestamp, 'remote');

		}
		function onError(ev){
			$("#recmsg").append("<p>connecting error!</p>");
		}
    function doClose(){
		ws.close();
	}

});
        </script>
        </html>
	<html>
	<head>
	<title>Web Socket Messenger.</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<style>
	.message_board{
	border: solid 1px;
	width: 500px;
	margin:auto;
	padding:5px;
	font-family: 'fira_sansregular';
	height:600px;
	overflow:auto;
	}
	.message_thread {
	border: solid 1px;
	width:70%;
	padding:2px;
	margin:2px;
	}

	.message_box {
	border: solid 0px;
	overflow: auto;
	padding:3px;
	margin-bottom:5px
	}

	#server_message{
	float: left;
	}

	#client_message {
	float: right;
	}

	.server_icon {
	border:solid 1px;
	display:inline-block;
	padding:3px;
	float:left;
	}

	.client_icon {
	border:solid 1px;
	display:inline-block;
	padding:3px;
	float:right;
	}

	p {
	border:solid 1px;
	}

	#recmsg {
	border: solid 1px;
	margin: auto;
	width: 500px;
	padding: 5px;
	}

	#input_box {
	margin: auto;
	width: 500px;
	padding: 5px;
	border: solid 1px;
	}

	input {
	width: 500px;
	}

	body {
	background-color: black;
	color:white;
	}

	</style>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous">

	</script>
	</head>
	<body>
	<div class="message_board" id="message_board">

	<div class="message_box">
	<div class="server_icon"><i class="fas fa-user-tie"></i></div>
	<div class="message_thread" id="server_message">
	</div>
	</div>

	<div class="message_box">
	<div class="client_icon"><i class="fas fa-user-alt"></i></div>
	<div class="message_thread" id="client_message">
	</div>
	</div>

	</div>
	<div id="input_box">
	<table>
	<tr><td><input type="text" name="input" id="inputText" placeholder=".>"></td></tr>
	</table>
	</div>
	<div class="custom_font" id="recmsg">
	</div>
	</body>
	<script type="text/javascript">
	var messageLogs = {};
	messageLogs["me"] = {};
	messageLogs["remote"] = {};
	var glob = {}
	glob["receiverId"]="";
	$(document).ready(function (){
	buildwebsocket();
	$(document).on('keypress', function(e) {
	if (e.which == 13) {
	console.log('Enter pressed!');
	inputText = $("#inputText").val();
	console.log("Input text is.:"+ inputText);

	if (inputText.startsWith("#")) {
	console.log("# Detected. Calling setReceiverId function.");
	setReceiverId( inputText.replace("#","") );
	} else {
	timestamp = getCurrentTime();
	try {
	sendText = packTheMessageToJsonMap(inputText);
	updateMessageLogs(timestamp,'me', sendText);
	mapUpdated(timestamp);
	console.log(messageLogs);
	} catch (e) {
	console.log(e);
	}
	}
	}
	});

	function mapUpdated(timestamp) {
	updateUI(timestamp, 'me');
	sendMessageToServer(timestamp);
	}

	function updateUI(timestamp, message_from) {
	if ( message_from =='me') {
	$("#message_board").append("<div class='message_box'><div class='client_icon'><i class='fas fa-user-alt'></i></div><div class='message_thread' id='client_message'>"+messageLogs['me'][timestamp]+"</div></div>");
	$("#message_board").stop ().animate ({scrollTop: $('#message_board')[0].scrollHeight});
	} else if (message_from == 'remote') {
	$("#message_board").append("<div class='message_box'><div class='server_icon'><i class='fas fa-user-tie'></i></div><div class='message_thread' id='server_message'>"+messageLogs['remote'][timestamp]+"</div></div>");
	$("#message_board").stop ().animate ({scrollTop: $('#message_board')[0].scrollHeight});
	}
	}

	function sendMessageToServer(timestamp) {
	console.log("Sending Message to server! "+ messageLogs['me'][timestamp]);
	if (messageLogs['me'][timestamp]["to"] == "") {
	console.log("To not found");
	} else {
	ws.send(messageLogs['me'][timestamp]);
	}

	}

	function getReceiverId() {
	console.log("Returning receiverId "+glob["receiverId"]);
	return glob["receiverId"];
	}

	function setReceiverId(receiverId) {
	glob["receiverId"] = receiverId;
	}

	function packTheMessageToJsonMap(inputText) {
	console.log("packing the message.");
	messageFrame = {};
	messageFrame["to"] = getReceiverId();
	messageFrame["message"] = inputText;
	return JSON.stringify(messageFrame)
	}

	function updateMessageLogs(timestamp, message_from, data){
	if (data["to"] \|\| data["to"] === "") {
	throw {
	name:"JSON error",
	message: "Receiver id not found"
	}
	} else {
	messageLogs[message_from][timestamp] = data;
	}
	}

	function getCurrentTime() {
	timestamp = new Date();
	return timestamp;
	}


	var ws;
	function buildwebsocket(){
	ws = new WebSocket("ws://0.0.0.0:5050",'echo-protocol');
	ws.onopen = function(evt) { onOpen(evt) };
	ws.onclose = function(evt) { onClose(evt) };
	ws.onmessage = function(evt) { onMessage(evt) };
	ws.onerror = function(evt) { onError(evt) };
	}
	function onOpen(ev){
	console.log("connected to server! cool! :D");
	$("#recmsg").append("<p>connected!</p>");
	}
	function onClose(ev){
	$("#recmsg").append("<p>connection closed!</p>");
	}
	function onMessage(ev){
	console.log("from server:");
	timestamp = getCurrentTime();
	updateMessageLogs(timestamp, 'remote', ev.data);
	updateUI(timestamp, 'remote');

	}
	function onError(ev){
	$("#recmsg").append("<p>connecting error!</p>");
	}
	function doClose(){
	ws.close();
	}

	});
	</script>
	</html>