在线聊天页面 - 实时聊天功能，支持 Markdown 语法 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>在线聊天页面 - 实时聊天功能，支持 Markdown 语法</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="chat-history">
			<div class="message">
				<div class="message-content">
					<p>Welcome to the chat room!</p>
				</div>
			</div>
			<div class="message">
				<div class="message-content">
					<p>What would you like to talk about?</p>
				</div>
			</div>
		</div>
		<div class="chat-message">
			<input type="text" placeholder="Type your message here...">
		</div>
		<div class="color-picker">
			<div class="color white"></div>
			<div class="color black"></div>
			<div class="color green"></div>
			<div class="color red"></div>
			<div class="color pink"></div>
			<div class="color purple"></div>
			<div class="color blue"></div>
			<div class="color dark-green"></div>
			<div class="color orange"></div>
		</div>
	</div>
	<script>
		const messageInput = document.querySelector('.chat-message input');
		const chatHistory = document.querySelector('.chat-history');
		const colorPicker = document.querySelector('.color-picker');
<pre><code>	function sendMessage() {
		const message = messageInput.value;
		if (message) {
			const messageContainer = document.createElement('div');
			messageContainer.classList.add('message');
			messageContainer.classList.add('sent');
			messageContainer.innerHTML = `
				&lt;div class=&quot;message-content&quot;&gt;
					${message}
				&lt;/div&gt;
			`;
			chatHistory.appendChild(messageContainer);
			messageInput.value = '';
			sendRequest(message);
		}
	}

	function receiveMessage(message) {
		const messageContainer = document.createElement('div');
		messageContainer.classList.add('message');
		messageContainer.classList.add('received');
		messageContainer.innerHTML = `
			&lt;div class=&quot;message-content&quot;&gt;
				${message}
			&lt;/div&gt;
		`;
		chatHistory.appendChild(messageContainer);
	}

	function sendRequest(message) {
		const xhr = new XMLHttpRequest();
		xhr.open('POST', 'http://localhost:8089/chat');
		xhr.setRequestHeader('Content-Type', 'application/json');
		xhr.onload = function() {
			if (xhr.status === 200) {
				receiveMessage(xhr.response);
			}
		};
		xhr.send(JSON.stringify({ message: message }));
	}

	messageInput.addEventListener('keyup', function(event) {
		if (event.key === 'Enter') {
			sendMessage();
		}
	});

	colorPicker.addEventListener('click', function(event) {
		if (event.target.classList.contains('color')) {
			document.body.style.backgroundColor = event.target.classList[1];
		}
	});
&lt;/script&gt;
</code></pre>
</body>
</html>