Starlight-0208/chat2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend：优化了界面显示效果

Browse Source
This commit is contained in:
starlight 2025-07-14 21:17:15 +08:00
parent 798f42c3c6
commit 6292448293
2 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.js
View File

@ -96,6 +96,7 @@ io.on("connection", (socket) => {
socket.username = username;
onlineList.push(username);
clientMap.set(socket.id, username);
socket.emit("username", socket.username);
socket.emit("system", JSON.stringify(new Response(true, `welcome, ${socket.username}`)))
io.emit("notice", JSON.stringify(new Response(true, `${socket.username} join the chat.`)))
logger.debug(`socket(${socket.id}) -- ${username} signed in.`)

90
static/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
@ -23,11 +23,25 @@
}
#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;
@ -52,7 +66,7 @@
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
padding: 15px;
padding: 10px;
text-align: center;
}
@ -75,38 +89,65 @@
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 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 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 class="card">
<div class="title">用户消息</div>
<div id="usrmsg"></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>
<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" maxlength="20" />
<button onclick="register()">set Username</button>
</div>
</div>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
@ -127,6 +168,10 @@
writeLogSystem(data.msg, data.status, "system")
})
socket.on("username", data => {
updateUsername(data);
})
socket.on("notice", data => {
console.log("notice", data)
data = JSON.parse(data)
@ -144,6 +189,7 @@
updateState(false);
console.log("Disconnected")
writeLogSystem("You are disconnected from server", false, "client")
updateUsername("未设置用户名")
});
const connect = () => socket.connect()
@ -161,6 +207,8 @@
}
});
const updateUsername = data => document.getElementById("current-username").textContent = data;
function fetchHistory() {
fetch("/history")
.then(res => res.json())