270 lines
8.0 KiB
HTML
270 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<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: row;
|
|
gap: 5px;
|
|
}
|
|
|
|
#msg-list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
#online-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
width: 800px;
|
|
}
|
|
|
|
#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: 10px;
|
|
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;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
#container {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
#online-list {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
|
|
<div id="msg-list">
|
|
<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 class="card">
|
|
<div style="display: flex;">
|
|
<input type="text" id="message" style="width: 100%;" />
|
|
<button onclick="sendMsg()">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="online-list">
|
|
<div class="card">
|
|
<div class="title">在线列表</div>
|
|
<div style="color: gray;">在线人数：<span id="online-number">NaN</span></div>
|
|
<div id="online"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">服务器选项</div>
|
|
<div>连接状态: <span id="stat"></span></div>
|
|
<button onclick="connect()">连接</button>
|
|
<button onclick="disconnect()">断开</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">设置用户名</div>
|
|
<div>当前用户名：<span id="current-username">未设置用户名</span></div>
|
|
<input type="text" id="username" maxlength="20" />
|
|
<button onclick="register()">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding-top: 20px" id="control">
|
|
<div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
</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("username", data => {
|
|
updateUsername(data);
|
|
})
|
|
|
|
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")
|
|
updateUsername("未设置用户名")
|
|
});
|
|
|
|
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)
|
|
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();
|
|
}
|
|
});
|
|
|
|
const updateUsername = data => document.getElementById("current-username").textContent = data;
|
|
|
|
function fetchHistory() {
|
|
fetch("/history")
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
res.data.reverse().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> |