答案：使用HTML5和WebSocket可实现简易聊天室客户端，通过JavaScript创建WebSocket连接ws://localhost:8080，监听onopen、onmessage和onclose事件以处理连接状态与实时消息，结合输入框和发送按钮，用户输入内容后点击或按回车触发send()发送消息，并将服务器返回的消息动态添加到页面聊天框中，同时滚动到底部，确保良好交互体验。
要使用 HTML5 和 WebSocket 制作一个简单的聊天室，客户端代码主要负责连接服务器、发送消息和接收实时消息。下面是一个简洁、实用的客户端实现示例。
建立 WebSocket 连接
在网页中通过 JavaScript 创建 WebSocket 实例，连接到后端 WebSocket 服务（例如运行在 ws://localhost:8080 的服务器）。
确保服务器已就绪，支持 WebSocket 协议。
- 创建 WebSocket 对象指向服务器地址
- 监听连接打开、消息接收、关闭等事件
示例代码：
立即学习“前端免费学习笔记（深入）”；
<script>
// 替换为你的 WebSocket 服务器地址
const socket = new WebSocket("ws://localhost:8080");
// 连接成功时
socket.onopen = function(event) {
console.log("已连接到聊天服务器");
};
// 接收来自服务器的消息
socket.onmessage = function(event) {
const chatBox = document.getElementById("chat-box");
const message = document.createElement("div");
message.textContent = event.data;
chatBox.appendChild(message);
};
// 处理连接关闭
socket.onclose = function(event) {
console.log("连接已关闭");
};
</script>
发送消息到服务器
提供输入框和发送按钮，用户输入内容后点击发送，消息通过 WebSocket 发送到服务器。
关键点：
- 获取输入框内容
- 调用 socket.send() 发送文本
- 清空输入框
完整 HTML 与 JS 示例：
<!DOCTYPE html>
<html>
<head>
<title>简易聊天室</title>
<style>
#chat-box {
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
padding: 10px;
margin-bottom: 10px;
}
#message-input {
width: 70%;
padding: 8px;
}
#send-btn {
padding: 8px;
}
</style>
</head>
<body>
<h2>聊天室</h2>
<div id="chat-box"></div>
<input type="text" id="message-input" placeholder="输入消息..." />
<button id="send-btn">发送</button>
<script>
const socket = new WebSocket("ws://localhost:8080");
const chatBox = document.getElementById("chat-box");
const messageInput = document.getElementById("message-input");
const sendButton = document.getElementById("send-btn");
socket.onopen = function() {
console.log("连接已建立");
};
socket.onmessage = function(event) {
const message = document.createElement("div");
message.textContent = event.data;
chatBox.appendChild(message);
chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
};
sendButton.onclick = function() {
const msg = messageInput.value.trim();
if (msg) {
socket.send(msg);
messageInput.value = ""; // 清空输入框
}
};
// 支持回车发送
messageInput.addEventListener("keypress", function(e) {
if (e.key === "Enter") {
sendButton.click();
}
});
socket.onclose = function() {
console.log("连接已断开");
};
</script>
</body>
</html>
注意事项
实际使用中需要注意以下几点：
- 确保后端有 WebSocket 服务监听指定端口
- 处理连接失败或网络中断的情况（可监听 onerror）
- 生产环境建议使用 wss:// 加密连接
- 对用户输入做基本过滤，防止 XSS（如转义 HTML 字符）
