chat.html

<script src="/socket.io/socket.io.js"></script>
<h1>채팅창</h1>
<button type="button" id="return" style="float: right" onclick="location.href='http://localhost:3000'">돌아가기</button>
<!-- chat contents will be written down below. -->
<div id="chatContent">
  
</div>
<input id="myChat" type="text">
<input type="submit" id="send" value="Send">
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script>

	var socket = io.connect('http://localhost:3000', {
		path: '/socket.io'
		// transports: ['websocket']
	});

	// receiving a message
	socket.on('msg', function (data) {
		var msgLine = $('<div class="msgLine">');
		var msgBox = $('<div class="msgBox">');
		msgBox.append(data);
        msgBox.css('display', 'inline-block');
        msgLine.append(msgBox);
        $('#chatContent').append(msgLine);
	  	// auto scorll down when a user send something
		chatContent.scrollTop = chatContent.scrollHeight;
	});

	// sending a message
	$('#myChat').on("keyup", function () {
		if (window.event.keyCode==13 && $(this).val()!="") {
			var msgLine = $('<div class="msgLine">');
            var msgBox = $('<div class="msgBox">');
            msgBox.append($(this).val());
            msgBox.css('display', 'inline-block');
            msgLine.css('text-align', 'right');
            msgLine.append(msgBox);
            $('#chatContent').append(msgLine);
            socket.emit('msg', $(this).val());
            $(this).val("");
            chatContent.scrollTop = chatContent.scrollHeight;
        }
	});
	$("#send").click(function() {
			if ($('#myChat').val()!="") {
				var msgLine = $('<div class="msgLine">');
				var msgBox = $('<div class="msgBox">');
				msgBox.append($('#myChat').val());
				msgBox.css('display', 'inline-block');
				msgLine.css('text-align', 'right');
				msgLine.append(msgBox);
				$('#chatContent').append(msgLine);
				socket.emit('msg', $('#myChat').val());
				$('#myChat').val("");
				chatContent.scrollTop = chatContent.scrollHeight;
			}
		});
</script>
  
<style>
	* {
		box-sizing: border-box;
	}
	.msgLine {
		margin: 15px;
	}
	.msgBox {
		border: 1px solid black;
		background: rgb(255, 255, 255);
		padding: 2px 5px;
		border-radius: 10px;
	}
	#chatContent {
		border: 1px solid rgb(0, 0, 0);
		width: 100%;
		height: 200px;
		margin-bottom: 10px;
		overflow-y: auto;
	}
	#myChat {
		width: 100%;
	}
	#msg, #myChat {
		width: 80%;
		height: 32px;
		border-radius: 8px;
	}
	#send {
		width: 16%;
		height: 34px;
		border-radius: 50px;
		background: black;
		color: white;
	}
	#return {
		padding: 10px 30px;
	}
</style>