tflucke
/
Simple-Chat-Room
spiegel van https://github.com/tflucke/Simple-Chat-Room.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<html>
	<head>
		<title>Basic Chat Page</title>
		<style type="text/css">
			textarea
			{
				width: 100%;
				resize: none;
				min-height: 2em;
			}
			.italics
			{
				font-style: italic;
			}
		</style>
		<script src="socket.io/socket.io.js"></script>
		<script type="text/javascript">
			var user;
			var socket = io.connect(window.location.href);
			socket.on('notification', function (data)
			{
				var elm = document.getElementById("display");
				elm.innerHTML = elm.innerHTML + data;
			});
			function init()
			{
				do
				{
					user = window.prompt("Enter a username here (Minimum 2 chars).");
				}
				while (user == null || user.trim().length < 2);
				ajax({username: user});
			}
			function autoGrow(element)
			{
				element.style.height = (element.scrollHeight)+"px";
			}
			function submit()
			{
				var elm = document.getElementById("userinput");
				ajax({
					username: user,
					message: elm.value
				});
				elm.value = "";
			}
			function ajax(data, fn)
			{
/*				var xhttp = new XMLHttpRequest();
				if (fn != undefined)
				{
					xhttp.onreadystatechange = function()
					{
						if (xhttp.readyState == 4 && xhttp.status == 200)
						{
							fn(xhttp.responseText);
						}
					};
				}
				xhttp.open("POST", "index.html", true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xhttp.send(jsonToURL(data));*/
				socket.emit('notification', data);
			}
			function jsonToURL(data)
			{
				var result = "";
				for (key in data)
				{
					result += encodeURIComponent(key)+"="+encodeURIComponent(data[key])+"&";
				}
				return result;
			}
		</script>
	</head>
	<body onload="init();">
		<table style="width: 100%; height: 100%;">
			<tr>
				<td colspan="2" style="height: 100%;">
					<div id="display" style="height: 100%; border: 1px solid #000000;"></div>
				</td>
			</tr>
			<tr>
				<td style="width: 100%;">
					<textarea id="userinput" style="overflow: hidden;" onkeyup="autoGrow(this);" placeholder="Type your message here!"></textarea>
				</td>
				<td>
					<button type="button" id="enterButton" onclick="submit();">Enter</button>
				</td>
			</tr>
		</table>
	</body>
</html>