Add css style

This commit is contained in:
muzhi 2024-10-15 19:59:20 +08:00
parent bf6e25b722
commit 7fa5bb460c
4 changed files with 150 additions and 198 deletions

View File

@ -1,29 +1,114 @@
@keyframes glow-border {
0% {
box-shadow: inset 0 0 0 2px #00e6e6;
}
25% {
box-shadow: inset 0 0 0 2px #00e6e6, 2px 0 0 0 #00e6e6;
}
50% {
box-shadow: inset 0 0 0 2px #00e6e6, 2px 0 0 0 #00e6e6, 0 2px 0 0 #00e6e6;
}
75% {
box-shadow: inset 0 0 0 2px #00e6e6, 2px 0 0 0 #00e6e6, 0 2px 0 0 #00e6e6, -2px 0 0 0 #00e6e6;
}
100% {
box-shadow: inset 0 0 0 2px #00e6e6, 2px 0 0 0 #00e6e6, 0 2px 0 0 #00e6e6, -2px 0 0 0 #00e6e6, 0 -2px 0 0 #00e6e6;
}
}
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: Arial, sans-serif;
}
.App-header { .App-header {
background-color: #282c34;
padding: 20px;
color: white;
}
.App {
text-align: center; text-align: center;
margin: 20px; padding: 20px;
} }
table { h1 {
margin: 20px auto; color: #eff4f0;
border-collapse: collapse; font-size: 4em;
margin-bottom: 20px;
} }
table, th, td { h2 {
border: 1px solid #ccc; color: #2196f3;
font-size: 2em;
margin-top: 20px;
margin-bottom: 10px;
}
h3 {
color: #ff9800;
font-size: 1.75em;
margin-top: 15px;
margin-bottom: 10px;
}
h4 {
color: #f44336;
font-size: 1.5em;
margin-top: 10px;
margin-bottom: 5px;
}
input, button {
margin: 10px 0;
padding: 10px; padding: 10px;
border: none;
border-radius: 5px;
} }
th { input {
background-color: #f0f0f0; width: 80%;
max-width: 300px;
}
button {
background-color: #2196f3;
color: #ffffff;
cursor: pointer;
}
button:hover {
background-color: #1976d2;
}
section {
background-color: #333333;
padding: 20px;
margin: 20px 0;
border-radius: 10px;
animation: glow-border 4s infinite;
} }
.log-info { .log-info {
width: 80%; background-color: #444444;
margin: 20px auto; color: #ffffff;
padding: 10px;
border-radius: 5px;
animation: glow-border 4s infinite;
} }
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #444444;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
.container {
display: flex;
justify-content: space-between;
}
.left-panel, .right-panel {
width: 48%;
}

View File

@ -1,9 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import WebSocketComponent from './WebSocketComponent'; import WebSocketComponent from './WebSocketComponent';
import './App.css';
function App() { function App() {
const [nodes, setNodes] = useState([]);
const [node, setNode] = useState(null); const [node, setNode] = useState(null);
const [heartbeat, setHeartbeat] = useState(null); const [heartbeat, setHeartbeat] = useState(null);
const [nodesList, setNodesList] = useState([]); const [nodesList, setNodesList] = useState([]);
@ -13,7 +13,7 @@ function App() {
const fetchNodes = async () => { const fetchNodes = async () => {
try { try {
const response = await axios.get('/server/show_nodes'); const response = await axios.get('/server/show_nodes');
setNodes(response.data); setNodesList(response.data);
} catch (error) { } catch (error) {
console.error('Error fetching nodes:', error); console.error('Error fetching nodes:', error);
} }
@ -65,52 +65,52 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<h1>中央服务器路由</h1> <h1 className="glow">The server</h1>
<div className="container">
<div className="left-panel">
<section>
<h2 className="glow">get node</h2>
<input
type="text"
value={ip}
onChange={(e) => setIp(e.target.value)}
placeholder="Enter node ip"
/>
<button onClick={handleFetchNode}>send</button>
{node ? <p>{JSON.stringify(node)}</p> : <p>here is nothing!</p>}
</section>
<h2>所有节点</h2> <section>
{nodes.length > 0 ? ( <h2 className="glow">heartbeat</h2>
<ul> <button onClick={handleFetchHeartbeat}>Get heartbeat</button>
{nodes.map((node, index) => ( {heartbeat ? <p>{JSON.stringify(heartbeat)}</p> : <p>here is nothing!</p>}
<li key={index}>{JSON.stringify(node)}</li> </section>
))}
</ul>
) : (
<p>没有节点数据</p>
)}
<h2>单个节点</h2> <section>
<input <h2 className="glow">nodes list</h2>
type="text" <input
value={ip} type="number"
onChange={(e) => setIp(e.target.value)} value={count}
placeholder="输入节点 IP" onChange={(e) => setCount(e.target.value)}
/> placeholder="Enter the number of nodes"
<button onClick={handleFetchNode}>获取节点</button> />
{node ? <p>{JSON.stringify(node)}</p> : <p></p>} <button onClick={handleFetchNodesList}>Get node list</button>
{nodesList.length > 0 ? (
<h2>心跳信息</h2> <ul>
<button onClick={handleFetchHeartbeat}>获取心跳信息</button> {nodesList.map((node, index) => (
{heartbeat ? <p>{JSON.stringify(heartbeat)}</p> : <p></p>} <li key={index}>{JSON.stringify(node)}</li>
))}
<h2>节点列表</h2> </ul>
<input ) : (
type="number" <p>here is nothing!</p>
value={count} )}
onChange={(e) => setCount(e.target.value)} </section>
placeholder="输入节点数量" </div>
/> <div className="right-panel">
<button onClick={handleFetchNodesList}>获取节点列表</button> <WebSocketComponent />
{nodesList.length > 0 ? ( </div>
<ul> </div>
{nodesList.map((node, index) => (
<li key={index}>{JSON.stringify(node)}</li>
))}
</ul>
) : (
<p>没有节点列表数据</p>
)}
</header> </header>
<WebSocketComponent/>
</div> </div>
); );
} }

View File

@ -2,9 +2,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
const WebSocketComponent = () => { const WebSocketComponent = () => {
const [logs, setLogs] = useState([]); const [logs, setLogs] = useState([]);
const [nodes, setNodes] = useState([]);
const wsRef = useRef(null); const wsRef = useRef(null);
const heartbeatIntervalRef = useRef(null);
const connectWebSocket = useCallback(() => { const connectWebSocket = useCallback(() => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) { if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
@ -15,17 +13,11 @@ const WebSocketComponent = () => {
wsRef.current.onopen = () => { wsRef.current.onopen = () => {
console.log('WebSocket 连接成功'); console.log('WebSocket 连接成功');
heartbeatIntervalRef.current = setInterval(() => {
if (wsRef.current.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({ type: 'heartbeat' }));
}
}, 10000); // 心跳包间隔调整为 10 秒
}; };
wsRef.current.onmessage = (event) => { wsRef.current.onmessage = (event) => {
setLogs((prevLogs) => [...prevLogs, event.data]); // 直接加入收到的消息 setLogs((prevLogs) => [...prevLogs, event.data]); // 直接加入收到的消息
}; };
wsRef.current.onerror = (error) => { wsRef.current.onerror = (error) => {
console.error('WebSocket 错误: ', error); console.error('WebSocket 错误: ', error);
@ -33,7 +25,6 @@ const WebSocketComponent = () => {
wsRef.current.onclose = () => { wsRef.current.onclose = () => {
console.log('WebSocket 连接关闭,尝试重新连接...'); console.log('WebSocket 连接关闭,尝试重新连接...');
clearInterval(heartbeatIntervalRef.current);
// 确保 WebSocket 连接在关闭后再进行重连 // 确保 WebSocket 连接在关闭后再进行重连
setTimeout(() => { setTimeout(() => {
connectWebSocket(); connectWebSocket();
@ -47,30 +38,9 @@ const WebSocketComponent = () => {
if (wsRef.current) { if (wsRef.current) {
wsRef.current.close(); wsRef.current.close();
} }
clearInterval(heartbeatIntervalRef.current);
}; };
}, [connectWebSocket]); }, [connectWebSocket]);
// 获取节点信息
const fetchNodes = useCallback(async () => {
try {
const response = await fetch('/server/show_nodes');
const data = await response.json();
setNodes(data);
} catch (error) {
console.error('Error fetching nodes:', error);
}
}, []);
useEffect(() => {
connectWebSocket();
fetchNodes(); // 组件加载时获取节点信息
return () => {
if (wsRef.current) {
wsRef.current.close();
}
clearInterval(heartbeatIntervalRef.current);
};
}, [connectWebSocket, fetchNodes]);
useEffect(() => { useEffect(() => {
const logContainer = document.querySelector('.log-info'); const logContainer = document.querySelector('.log-info');
if (logContainer) { if (logContainer) {
@ -80,29 +50,10 @@ const WebSocketComponent = () => {
return ( return (
<div> <div>
<h1>节点记录信息</h1> <h2>The logs</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>IP</th>
<th>Last Heartbeat</th>
</tr>
</thead>
<tbody>
{nodes.map((node) => (
<tr key={node[0]}>
<td>{node[0]}</td>
<td>{node[1]}</td>
<td>{new Date(node[2] * 1000).toLocaleString()}</td>
</tr>
))}
</tbody>
</table>
<h2>日志信息</h2>
<div <div
className="log-info" className="log-info"
style={{ height: '300px', overflowY: 'scroll', background: '#fff', padding: '10px' }} style={{ height: '550px', overflowY: 'scroll', backgroundColor: 'rgb(32, 28, 28)', padding: '10px' }}
> >
{logs.map((log, index) => ( {logs.map((log, index) => (
<p key={index} style={{ margin: '5px 0' }}>{log}</p> <p key={index} style={{ margin: '5px 0' }}>{log}</p>
@ -112,4 +63,4 @@ const WebSocketComponent = () => {
); );
}; };
export default WebSocketComponent; export default WebSocketComponent;

View File

@ -1,84 +0,0 @@
2024-10-14 22:50:49,964 - server - INFO - 节点信息已成功获取
2024-10-14 22:50:58,662 - server - INFO - 节点信息已成功获取
2024-10-14 22:51:03,979 - server - INFO - 节点信息已成功获取
2024-10-14 22:51:05,667 - server - INFO - 节点信息已成功获取
2024-10-14 22:51:13,103 - server - INFO - 节点信息已成功获取
2024-10-14 22:51:13,117 - server - INFO - 节点信息已成功获取
2024-10-14 22:51:13,119 - server - INFO - 节点信息已成功获取
2024-10-14 22:53:44,044 - server - INFO - 数据库已清空
2024-10-14 22:55:08,488 - server - INFO - 节点信息已成功获取
2024-10-14 22:55:08,494 - server - INFO - 节点信息已成功获取
2024-10-14 22:55:08,497 - server - INFO - 节点信息已成功获取
2024-10-14 22:56:22,602 - server - INFO - 数据库已清空
2024-10-14 22:56:44,348 - server - INFO - 节点信息已成功获取
2024-10-14 22:56:44,353 - server - INFO - 节点信息已成功获取
2024-10-14 22:56:44,356 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:25,960 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:25,964 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:25,966 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:27,676 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:30,534 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:30,537 - server - INFO - 节点信息已成功获取
2024-10-14 22:57:30,540 - server - INFO - 节点信息已成功获取
2024-10-14 23:05:37,396 - server - INFO - 节点信息已成功获取
2024-10-14 23:05:37,405 - server - INFO - 节点信息已成功获取
2024-10-14 23:05:45,897 - server - INFO - 节点信息已成功获取
2024-10-14 23:05:45,906 - server - INFO - 节点信息已成功获取
2024-10-14 23:05:50,598 - server - INFO - 已成功发送 2 个节点信息
2024-10-14 23:05:55,495 - server - INFO - 已成功发送 2 个节点信息
2024-10-14 23:06:34,923 - server - INFO - 已成功发送 2 个节点信息
2024-10-14 23:06:58,479 - server - WARNING - 收到无效 IP 格式的心跳包:
2024-10-14 23:11:47,671 - server - INFO - 节点信息已成功获取
2024-10-14 23:13:06,672 - server - INFO - 节点信息已成功获取
2024-10-14 23:13:19,665 - server - INFO - 节点信息已成功获取
2024-10-14 23:13:19,976 - server - INFO - 节点信息已成功获取
2024-10-14 23:13:20,286 - server - INFO - 节点信息已成功获取
2024-10-14 23:15:27,409 - server - INFO - 节点信息已成功获取
2024-10-14 23:15:27,558 - server - INFO - 节点信息已成功获取
2024-10-14 23:15:27,621 - server - INFO - 节点信息已成功获取
2024-10-14 23:15:27,631 - server - INFO - 节点信息已成功获取
2024-10-14 23:16:40,476 - server - INFO - 节点信息已成功获取
2024-10-14 23:16:40,487 - server - INFO - 节点信息已成功获取
2024-10-14 23:16:40,540 - server - INFO - 节点信息已成功获取
2024-10-14 23:16:40,798 - server - INFO - 节点信息已成功获取
2024-10-14 23:17:25,417 - server - INFO - 节点信息已成功获取
2024-10-14 23:18:35,867 - server - INFO - IP 119.3.125.234 对应的ID为 1996717546
2024-10-14 23:18:35,867 - server - INFO - 当前时间: 1728919115
2024-10-14 23:18:35,874 - server - INFO - 节点 119.3.125.234 已成功添加到数据库
2024-10-14 23:18:56,376 - server - WARNING - 节点 127.0.0.1 未找到
2024-10-14 23:19:22,373 - server - INFO - 已成功发送 1 个节点信息
2024-10-14 23:19:22,630 - server - INFO - 已成功发送 1 个节点信息
2024-10-14 23:19:27,170 - server - WARNING - 收到无效 IP 格式的心跳包:
2024-10-14 23:19:49,887 - server - INFO - 收到来自 119.3.125.234 的心跳包
2024-10-14 23:19:49,895 - server - INFO - 成功更新节点 119.3.125.234 的心跳时间
2024-10-14 23:19:54,186 - server - WARNING - 收到无效 IP 格式的心跳包:
2024-10-15 13:05:13,546 - server - INFO - 节点信息已成功获取
2024-10-15 13:05:13,556 - server - INFO - 节点信息已成功获取
2024-10-15 13:05:13,569 - server - INFO - 节点信息已成功获取
2024-10-15 13:05:13,584 - server - INFO - 节点信息已成功获取
2024-10-15 13:06:27,487 - server - INFO - 节点信息已成功获取
2024-10-15 13:08:25,875 - server - WARNING - 节点 127.0.0.1 未找到
2024-10-15 13:08:41,176 - server - INFO - IP 127.0.0.0 对应的ID为 2130706432
2024-10-15 13:08:41,176 - server - INFO - 当前时间: 1728968921
2024-10-15 13:08:41,183 - server - INFO - 节点 127.0.0.0 已成功添加到数据库
2024-10-15 13:08:42,347 - server - INFO - IP 127.0.0.0 对应的ID为 2130706432
2024-10-15 13:08:42,347 - server - INFO - 当前时间: 1728968922
2024-10-15 13:09:42,114 - asyncio - ERROR - Task exception was never retrieved
future: <Task finished name='Task-3' coro=<receive_heartbeat_internal() done, defined at /home/muzhi/tpre-python/src/server.py:232> exception=OperationalError('no such table: nodes')>
Traceback (most recent call last):
File "/home/muzhi/tpre-python/src/server.py", line 237, in receive_heartbeat_internal
db.execute(
sqlite3.OperationalError: no such table: nodes
2024-10-15 13:11:26,824 - server - INFO - IP 192.168.8.57 对应的ID为 3232237625
2024-10-15 13:11:26,824 - server - INFO - 当前时间: 1728969086
2024-10-15 13:11:26,831 - server - INFO - 节点 192.168.8.57 已成功添加到数据库
2024-10-15 13:11:28,244 - server - INFO - IP 192.168.8.57 对应的ID为 3232237625
2024-10-15 13:11:28,244 - server - INFO - 当前时间: 1728969088
2024-10-15 13:11:46,205 - server - INFO - IP 192.168.8.57 对应的ID为 3232237625
2024-10-15 13:11:46,205 - server - INFO - 当前时间: 1728969106
2024-10-15 13:12:28,014 - server - INFO - IP 192.168.8.58 对应的ID为 3232237626
2024-10-15 13:12:28,014 - server - INFO - 当前时间: 1728969148
2024-10-15 13:12:28,020 - server - INFO - 节点 192.168.8.58 已成功添加到数据库
2024-10-15 13:12:34,416 - server - INFO - 收到来自 192.168.8.58 的心跳包
2024-10-15 13:12:34,422 - server - INFO - 成功更新节点 192.168.8.58 的心跳时间
2024-10-15 13:12:42,439 - server - INFO - 已成功发送 1 个节点信息