Demo entry 6850825

a

   

Submitted by anonymous on Jul 11, 2019 at 18:21
Language: HTML. Code size: 2.0 kB.

<html>
	<head>
		<title>LIJW CHATROOM</title>
		<link rel="stylesheet" href="main.css" type="text/css" />
	</head>
	<body>
		<div align="center">
			<p>
				<input type="text" placeholder="Input Message Here" id="chat" />
				<button type="button" id="sendbutton">SEND</button>
			</p>
			<div id="console-container">
				<div id="console"/>
			</div>
		</div>
	</body>

	<script type="application/javascript">
		var Chats={};
		var MaxMessageOnscreen=100;
		Chats.socket=null;
		Chats.connect=(function(host) {
			if ('WebSocket' in window) {
				Chats.socket=new WebSocket(host);
			} else if ('MozWebSocket' in window) {
				Chats.socket=new MozWebSocket(host);
			} else {
				ChatBox.showmessage('Error: WebSocket is not supported by this browser.');
				return;
			}
			Chats.socket.onopen=function () {
				document.getElementById('sendbutton').onclick=function(event) {
					Chats.sendMessage();
				};
			};

			Chats.socket.onclose=function () {
				document.getElementById('chat').onkeydown=null;
				ChatBox.showmessage('Info: WebSocket closed.');
			};

			Chats.socket.onmessage=function (message) {
				ChatBox.showmessage(message.data);
			};
		});

		Chats.run=function() {
			Chats.connect('ws://'+window.location.host+'/lijw/mychatroom/chat');
		};

		Chats.sendMessage=(function() {
			var message=document.getElementById('chat').value;
			if (message != '') {
				Chats.socket.send(message);
				document.getElementById('chat').value='';
			}
		});

		var ChatBox={};

		ChatBox.showmessage=(function(message) {
			var console=document.getElementById('console');
			var p=document.createElement('p');	
			p.align="left";
			p.innerHTML='<br/>'+message;
			console.appendChild(p);
			while (console.childNodes.length>MaxMessageOnscreen) {
				console.removeChild(console.firstChild);
			}
			console.scrollTop=console.scrollHeight;
		});

		Chats.run();
		
	</script>

</html>

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).