admin.html

<!doctype html>
<html>
	<head>
		<title>
			Moderator Page
		</title>
		<script src="/socket.io/socket.io.js"></script>
		<style>
p:hover {
	background-color:#CCFFCC;
	width: 400px;
	overflow-x: auto;
}
		</style>
	</head>
	<body>
		<button type="button" id="remover">Clear</button>
		<div id="container">

		</div>
		<script>

let socket = io();
let pendingMessages = [];
let container = document.querySelector("#container");
let remover = document.querySelector("#remover");

socket.on('message_received', (message)=>{
	let para = document.createElement('p');
	para.innerText += `${message.username}: ${message.body}`;
	pendingMessages.unshift(para);
	displayMessages();
});

remover.onclick = ()=>{
	pendingMessages = [];
	displayMessages();
}

function displayMessages(){
	container.innerHTML = "";
	for(let message of pendingMessages){
		container.appendChild(message);
	}
}

		</script>
	</body>
</html>