index.html

<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
	<b>Thành viên</b>
	<div id="users"></div>
</div>
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
	<div id="conversation"></div>
	<input id="data" style="width:200px;" />
	<input type="button" id="datasend" value="send" />
</div>
<script src="socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    let socket = io("http://localhost:3000");

    socket.on('connect', function(){
		socket.emit('add_user', prompt("Nhập tên của bạn"));
	});

    socket.on('update_users', (data) => {
        $('#users').empty();
        $.each(data, (key, value) => {
			$('#users').append('<div>' + value + '</div>');
		});
    });

    $(function(){
		$('#datasend').click( function() {
			var message = $('#data').val();
			$('#data').val('');
			socket.emit('send_message', message);
		});
    });

    socket.on('notification', function (username, data) {
		$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
	});
</script>