219 lines
6.5 KiB
HTML
219 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
<style>
|
||
body {
|
||
font-family: 'HarmonyOS Sans SC Medium';
|
||
}
|
||
.title {
|
||
font-size: 24px;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.card {
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
#container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
#sysmsg {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
#usrmsg > span {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
#online {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 5px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
#online > span {
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
background-color: #f9f9f9;
|
||
padding: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
input[type="text"] {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
button, input[type="button"] {
|
||
padding: 8px 12px;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="container">
|
||
<div class="card">
|
||
<div class="title">在线列表（在线人数：<span id="online-number">NaN</span>）</div>
|
||
<div id="online"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="title">系统消息</div>
|
||
<div id="sysmsg"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="title">用户消息</div>
|
||
<div id="usrmsg"></div>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 20px" id="control">
|
||
<div>
|
||
<input type="text" id="message" />
|
||
<button onclick="sendMsg()">Submit</button>
|
||
</div>
|
||
<div>
|
||
<div>Status: <span id="stat"></span></div>
|
||
<button onclick="connect()">Connect</button>
|
||
<button onclick="disconnect()">Disconnect</button>
|
||
</div>
|
||
<div>
|
||
<input type="text" id="username" />
|
||
<button onclick="register()">set Username</button>
|
||
</div>
|
||
</div>
|
||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
||
<script>
|
||
window.onload = () => {
|
||
fetchHistory()
|
||
}
|
||
const socket = io("ws://localhost:5691");
|
||
socket.on("connect", () => {
|
||
console.log("Connected");
|
||
updateState(true)
|
||
writeLogSystem("You are connected to server", true, "client")
|
||
});
|
||
|
||
socket.on("system", data => {
|
||
console.log("system", data)
|
||
data = JSON.parse(data)
|
||
writeLogSystem(data.msg, data.status, "system")
|
||
})
|
||
|
||
socket.on("notice", data => {
|
||
console.log("notice", data)
|
||
data = JSON.parse(data)
|
||
writeLogSystem(data.msg, data.status, "notice")
|
||
})
|
||
|
||
socket.on("msg", data => {
|
||
console.log("user", data)
|
||
data = JSON.parse(data);
|
||
let msg = ` ${data.msg}`
|
||
writeLogUser(msg, data.sender)
|
||
})
|
||
|
||
socket.on("disconnect", () => {
|
||
updateState(false);
|
||
console.log("Disconnected")
|
||
writeLogSystem("You are disconnected from server", false, "client")
|
||
});
|
||
|
||
const connect = () => socket.connect()
|
||
const disconnect = () => socket.disconnect();
|
||
const register = () => socket.emit("system", JSON.stringify({ opt: "signin", args: { username: document.getElementById("username").value } }));
|
||
const sendMsg = () => socket.emit("msg", document.getElementById("message").value)
|
||
|
||
const updateState = (value) => {
|
||
document.getElementById('stat').textContent = value ? "connected" : "disconnected";
|
||
}
|
||
|
||
document.getElementById("message").addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") {
|
||
sendMsg();
|
||
}
|
||
});
|
||
|
||
function fetchHistory() {
|
||
fetch("/history")
|
||
.then(res => res.json())
|
||
.then(res => {
|
||
res.data.forEach(element => {
|
||
writeLogUser(element.message, element.sender)
|
||
});
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
function fetchOnline() {
|
||
fetch("/online").then(res => res.json()).then(res => {
|
||
const c = document.getElementById('online');
|
||
// console.log(res)
|
||
document.getElementById('online-number').textContent = res.online;
|
||
c.innerHTML = "";
|
||
res.user.forEach(element => {
|
||
const u = document.createElement('span');
|
||
u.textContent = element;
|
||
c.append(u);
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
const onlineChecker = setInterval(() => {
|
||
fetchOnline();
|
||
}, 1000)
|
||
|
||
function writeLogSystem(msg, status = true, topic = "system") {
|
||
const c = document.getElementById('sysmsg');
|
||
const m = document.createElement('span');
|
||
m.style.color = status ? 'green' : 'red'
|
||
m.textContent = `[${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}][${topic}] ${msg}`
|
||
c.append(m);
|
||
}
|
||
|
||
function writeLogUser(msg, sender) {
|
||
const c = document.getElementById('usrmsg');
|
||
const m = document.createElement('span');
|
||
m.textContent = `[${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}][${sender}] ${msg}`
|
||
c.append(m);
|
||
}
|
||
|
||
document.getElementById("username").addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") {
|
||
register();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |