实时聊天室
来源：24直播网
<script>
//获取 DOM 元素const chatBox = document.getElementById("chat-box");const chatForm = document.getElementById("chat-form");const chatMessageInput = document.getElementById("chat-message");// 创建 WebSocket 连接const websocket = new WebSocket("ws://localhost:8080/chat");// 当 WebSocket 连接打开时触发websocket.onopen = () => {console.log("WebSocket 连接已打开");};// 当 WebSocket 接收消息时触发websocket.onmessage = (event) => {
const data = JSON.parse(event.data);chatBox.innerHTML += `${data.username}: ${data.message}
`;};// 当 WebSocket 连接关闭时触发websocket.onclose = () => {console.log("WebSocket 连接已关闭");};// 当 chatForm 提交时触发chatForm.addEventListener("submit", (event) => {event.preventDefault();// 获取聊天消息const message = chatMessageInput.value;// 将聊天消息发送到 WebSocket 服务器websocket.send(JSON.stringify({username: "游客",message: message}));// 清空聊天消息输入框chatMessageInput.value = "";}); </script>