Compare commits
8 Commits
bf6e25b722
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e70cfdd857 | |||
| 5397a2bb90 | |||
| edab4a3950 | |||
| 043da6cb70 | |||
| c64ccd57e3 | |||
| 835c908ca7 | |||
| fffa6728bc | |||
| 7fa5bb460c |
42
frontend/package-lock.json
generated
42
frontend/package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"axios": "^1.7.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.27.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
@@ -3484,6 +3485,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.20.0.tgz",
|
||||
"integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@@ -16207,6 +16217,38 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.27.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.27.0.tgz",
|
||||
"integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.20.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.27.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.27.0.tgz",
|
||||
"integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.20.0",
|
||||
"react-router": "6.27.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"axios": "^1.7.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.27.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
|
||||
@@ -1,29 +1,135 @@
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
/* App.css */
|
||||
body {
|
||||
background-color: #f0f8ff; /* AliceBlue */
|
||||
color: #2f6c99; /* Navy */
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh; /* Minimum height set to 100% of the viewport height */
|
||||
}
|
||||
|
||||
.App {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh; /* Ensure the App component takes the full height */
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #4abbe1; /*背景颜色*/
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
.App-content {
|
||||
flex: 1; /* This makes the main content take up the remaining space */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
background: linear-gradient(135deg, #e0f7fa, #80deea); /* 渐变背景颜色 */
|
||||
border-radius: 0px; /* 圆角边框 */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid #ccc;
|
||||
.App-footer {
|
||||
background-color: #4abbe1; /*背景颜色*/
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f0f0f0;
|
||||
.glow {
|
||||
color: #ffffff; /* White */
|
||||
text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 30px #00bfff, 0 0 40px #00bfff, 0 0 50px #00bfff, 0 0 60px #00bfff, 0 0 70px #00bfff;
|
||||
font-size: 2.5em; /* 调整字体大小 */
|
||||
}
|
||||
|
||||
input, button {
|
||||
margin: 20px 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #000080; /* Navy */
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em; /* 调整字体大小 */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #104e8b; /* DodgerBlue Darker */
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 20px 0; /* 增加上下间距 */
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ffffff; /* White */
|
||||
text-decoration: none;
|
||||
font-size: 1.5em; /* 调整字体大小 */
|
||||
padding: 5px 19px;
|
||||
border-radius: 5px;
|
||||
background-color: #2db5c391; /* DodgerBlue */
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
background-color: #104e8b; /* DodgerBlue Darker */
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.log-info {
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
height: 200px;
|
||||
overflow-y: scroll;
|
||||
background-color: #ffffff; /* White */
|
||||
padding: 10px;
|
||||
border: 1px solid #b3d9ff; /* Light Blue Border */
|
||||
border-radius: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
margin: 5px 0;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #b3d9ff; /* Light Blue Border */
|
||||
}
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: #007acc; /* Blue */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
color: #333333; /* Dark Gray */
|
||||
}
|
||||
|
||||
.node-info, .heartbeat-info, .nodes-list {
|
||||
margin-top: 20px;
|
||||
background-color: #e6f7ff; /* Light Blue */
|
||||
padding: 10px;
|
||||
border: 1px solid #b3d9ff; /* Light Blue Border */
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap; /* Wrap long lines */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
}
|
||||
@@ -1,118 +1,38 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||
import HomePage from './HomePage';
|
||||
import NodePage from './NodePage';
|
||||
import HeartbeatPage from './HeartbeatPage';
|
||||
import NodesListPage from './NodesListPage';
|
||||
import WebSocketComponent from './WebSocketComponent';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
const [nodes, setNodes] = useState([]);
|
||||
const [node, setNode] = useState(null);
|
||||
const [heartbeat, setHeartbeat] = useState(null);
|
||||
const [nodesList, setNodesList] = useState([]);
|
||||
const [ip, setIp] = useState('');
|
||||
const [count, setCount] = useState('');
|
||||
|
||||
const fetchNodes = async () => {
|
||||
try {
|
||||
const response = await axios.get('/server/show_nodes');
|
||||
setNodes(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching nodes:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNode = async (ip) => {
|
||||
try {
|
||||
const response = await axios.get('/server/get_node', { params: { ip } });
|
||||
setNode(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching node:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchHeartbeat = async (ip) => {
|
||||
try {
|
||||
const response = await axios.get('/server/heartbeat', { params: { ip } });
|
||||
setHeartbeat(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching heartbeat:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNodesList = async (count) => {
|
||||
try {
|
||||
const response = await axios.get('/server/send_nodes_list', { params: { count } });
|
||||
setNodesList(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching nodes list:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchNodes(); // 获取所有节点
|
||||
}, []);
|
||||
|
||||
const handleFetchNode = () => {
|
||||
fetchNode(ip); // 根据输入的 IP 获取单个节点
|
||||
};
|
||||
|
||||
const handleFetchHeartbeat = () => {
|
||||
fetchHeartbeat(ip); // 根据输入的 IP 获取心跳信息
|
||||
};
|
||||
|
||||
const handleFetchNodesList = () => {
|
||||
fetchNodesList(count); // 根据输入的数量获取节点列表
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<h1>中央服务器路由</h1>
|
||||
<Router>
|
||||
<div className="App">
|
||||
{/* Header 部分仅放置导航或标题 */}
|
||||
<header className="App-header">
|
||||
</header>
|
||||
|
||||
<h2>所有节点</h2>
|
||||
{nodes.length > 0 ? (
|
||||
<ul>
|
||||
{nodes.map((node, index) => (
|
||||
<li key={index}>{JSON.stringify(node)}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>没有节点数据</p>
|
||||
)}
|
||||
{/* Main 部分用来渲染路由的内容 */}
|
||||
<main className="App-content">
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/node" element={<NodePage />} />
|
||||
<Route path="/heartbeat" element={<HeartbeatPage />} />
|
||||
<Route path="/nodes-list" element={<NodesListPage />} />
|
||||
<Route path="/logs" element={<WebSocketComponent />} />
|
||||
</Routes>
|
||||
</main>
|
||||
|
||||
<h2>单个节点</h2>
|
||||
<input
|
||||
type="text"
|
||||
value={ip}
|
||||
onChange={(e) => setIp(e.target.value)}
|
||||
placeholder="输入节点 IP"
|
||||
/>
|
||||
<button onClick={handleFetchNode}>获取节点</button>
|
||||
{node ? <p>{JSON.stringify(node)}</p> : <p>没有单个节点数据</p>}
|
||||
|
||||
<h2>心跳信息</h2>
|
||||
<button onClick={handleFetchHeartbeat}>获取心跳信息</button>
|
||||
{heartbeat ? <p>{JSON.stringify(heartbeat)}</p> : <p>没有心跳数据</p>}
|
||||
|
||||
<h2>节点列表</h2>
|
||||
<input
|
||||
type="number"
|
||||
value={count}
|
||||
onChange={(e) => setCount(e.target.value)}
|
||||
placeholder="输入节点数量"
|
||||
/>
|
||||
<button onClick={handleFetchNodesList}>获取节点列表</button>
|
||||
{nodesList.length > 0 ? (
|
||||
<ul>
|
||||
{nodesList.map((node, index) => (
|
||||
<li key={index}>{JSON.stringify(node)}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>没有节点列表数据</p>
|
||||
)}
|
||||
</header>
|
||||
<WebSocketComponent/>
|
||||
</div>
|
||||
{/* Footer 部分 */}
|
||||
<footer className="App-footer">
|
||||
<p>© 2024 Server Application</p>
|
||||
</footer>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
55
frontend/src/HeartbeatPage.js
Normal file
55
frontend/src/HeartbeatPage.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './App.css';
|
||||
|
||||
const HeartbeatPage = () => {
|
||||
const [ip, setIp] = useState('');
|
||||
const [heartbeat, setHeartbeat] = useState(null);
|
||||
|
||||
const fetchHeartbeat = async (ip) => {
|
||||
try {
|
||||
const response = await axios.get('/server/heartbeat', { params: { ip } });
|
||||
setHeartbeat(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching heartbeat:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchHeartbeat = () => {
|
||||
fetchHeartbeat(ip);
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/node">Get Node</Link></li>
|
||||
<li><Link to="/heartbeat">Heartbeat</Link></li>
|
||||
<li><Link to="/nodes-list">Nodes List</Link></li>
|
||||
<li><Link to="/logs">Logs</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h2 className="glow">Heartbeat</h2>
|
||||
<p>请输入节点 IP 地址以获取心跳状态信息:</p>
|
||||
<input
|
||||
type="text"
|
||||
value={ip}
|
||||
onChange={(e) => setIp(e.target.value)}
|
||||
placeholder="Enter node IP"
|
||||
/>
|
||||
<button onClick={handleFetchHeartbeat}>Get Heartbeat</button>
|
||||
{heartbeat ? (
|
||||
<div className="heartbeat-info">
|
||||
<h3>Heartbeat Information:</h3>
|
||||
<div className="info-item"><strong>Status:</strong> {heartbeat.status}</div>
|
||||
</div>
|
||||
) : (
|
||||
<p>这里没有任何信息!</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeartbeatPage;
|
||||
21
frontend/src/HomePage.js
Normal file
21
frontend/src/HomePage.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './App.css';
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="glow">The server</h1>
|
||||
<p>欢迎来到服务器管理页面。请选择一个操作:</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/node">Get Node</Link></li>
|
||||
<li><Link to="/heartbeat">Heartbeat</Link></li>
|
||||
<li><Link to="/nodes-list">Nodes List</Link></li>
|
||||
<li><Link to="/logs">Logs</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
59
frontend/src/NodePage.js
Normal file
59
frontend/src/NodePage.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './App.css';
|
||||
|
||||
const NodePage = () => {
|
||||
const [ip, setIp] = useState('');
|
||||
const [node, setNode] = useState(null);
|
||||
|
||||
const fetchNode = async (ip) => {
|
||||
try {
|
||||
const response = await axios.get('/server/get_node', { params: { ip } });
|
||||
const nodeData = response.data;
|
||||
const date = new Date(nodeData.current_time * 1000);
|
||||
nodeData.current_time = date.toLocaleString();
|
||||
setNode(nodeData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching node:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchNode = () => {
|
||||
fetchNode(ip);
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/node">Get Node</Link></li>
|
||||
<li><Link to="/heartbeat">Heartbeat</Link></li>
|
||||
<li><Link to="/nodes-list">Nodes List</Link></li>
|
||||
<li><Link to="/logs">Logs</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h2 className="glow">Get Node</h2>
|
||||
<p>请输入节点 IP 地址以获取节点信息:</p>
|
||||
<input
|
||||
type="text"
|
||||
value={ip}
|
||||
onChange={(e) => setIp(e.target.value)}
|
||||
placeholder="Enter node IP"
|
||||
/>
|
||||
<button onClick={handleFetchNode}>Send</button>
|
||||
{node ? (
|
||||
<div className="node-info">
|
||||
<h3>Node Information:</h3>
|
||||
<div className="info-item"><strong>ID:</strong> {node.id}</div>
|
||||
<div className="info-item"><strong>Current Time:</strong> {node.current_time}</div>
|
||||
</div>
|
||||
) : (
|
||||
<p>这里没有任何信息!</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default NodePage;
|
||||
61
frontend/src/NodesListPage.js
Normal file
61
frontend/src/NodesListPage.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './App.css';
|
||||
|
||||
const NodesListPage = () => {
|
||||
const [count, setCount] = useState('');
|
||||
const [nodesList, setNodesList] = useState([]);
|
||||
|
||||
const fetchNodesList = async (count) => {
|
||||
try {
|
||||
const response = await axios.get('/server/send_nodes_list', { params: { count } });
|
||||
setNodesList(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching nodes list:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchNodesList = () => {
|
||||
fetchNodesList(count);
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/node">Get Node</Link></li>
|
||||
<li><Link to="/heartbeat">Heartbeat</Link></li>
|
||||
<li><Link to="/nodes-list">Nodes List</Link></li>
|
||||
<li><Link to="/logs">Logs</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h2 className="glow">Nodes List</h2>
|
||||
<p>请输入要获取的节点数量:</p>
|
||||
<input
|
||||
type="number"
|
||||
value={count}
|
||||
onChange={(e) => setCount(e.target.value)}
|
||||
placeholder="Enter the number of nodes"
|
||||
/>
|
||||
<button onClick={handleFetchNodesList}>Get Node List</button>
|
||||
{nodesList.length > 0 ? (
|
||||
<div className="nodes-list">
|
||||
<h3>Nodes Information:</h3>
|
||||
<ul>
|
||||
{nodesList.map((node, index) => (
|
||||
<li key={index} className="info-item">
|
||||
{node}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<p>这里没有任何信息!</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default NodesListPage;
|
||||
@@ -1,10 +1,9 @@
|
||||
import React, { useEffect, useState, useRef, useCallback } from 'react';
|
||||
import './App.css'; // 确保引入了样式文件
|
||||
|
||||
const WebSocketComponent = () => {
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [nodes, setNodes] = useState([]);
|
||||
const wsRef = useRef(null);
|
||||
const heartbeatIntervalRef = useRef(null);
|
||||
|
||||
const connectWebSocket = useCallback(() => {
|
||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||
@@ -15,17 +14,11 @@ const WebSocketComponent = () => {
|
||||
|
||||
wsRef.current.onopen = () => {
|
||||
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) => {
|
||||
setLogs((prevLogs) => [...prevLogs, event.data]); // 直接加入收到的消息
|
||||
setLogs((prevLogs) => [...prevLogs, JSON.parse(event.data)]); // 解析 JSON 数据
|
||||
};
|
||||
|
||||
|
||||
wsRef.current.onerror = (error) => {
|
||||
console.error('WebSocket 错误: ', error);
|
||||
@@ -33,7 +26,6 @@ const WebSocketComponent = () => {
|
||||
|
||||
wsRef.current.onclose = () => {
|
||||
console.log('WebSocket 连接关闭,尝试重新连接...');
|
||||
clearInterval(heartbeatIntervalRef.current);
|
||||
// 确保 WebSocket 连接在关闭后再进行重连
|
||||
setTimeout(() => {
|
||||
connectWebSocket();
|
||||
@@ -47,30 +39,9 @@ const WebSocketComponent = () => {
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
}
|
||||
clearInterval(heartbeatIntervalRef.current);
|
||||
};
|
||||
}, [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(() => {
|
||||
const logContainer = document.querySelector('.log-info');
|
||||
if (logContainer) {
|
||||
@@ -80,36 +51,21 @@ const WebSocketComponent = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>节点记录信息</h1>
|
||||
<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
|
||||
className="log-info"
|
||||
style={{ height: '300px', overflowY: 'scroll', background: '#fff', padding: '10px' }}
|
||||
>
|
||||
{logs.map((log, index) => (
|
||||
<p key={index} style={{ margin: '5px 0' }}>{log}</p>
|
||||
))}
|
||||
<h2 className="glow">The logs</h2>
|
||||
<p>这里显示服务器的日志信息:</p>
|
||||
<div className="log-info">
|
||||
{logs.map((log, index) => {
|
||||
const [timestamp, message] = log.message.split(' - ', 2);
|
||||
return (
|
||||
<div key={index} className="log-entry">
|
||||
<span className="log-timestamp">{timestamp}</span>
|
||||
<span className="log-message"> - {message}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebSocketComponent;
|
||||
export default WebSocketComponent;
|
||||
@@ -1,11 +1,18 @@
|
||||
/* src/index.css */
|
||||
body {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%; /* Ensures the body takes the full height */
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%; /* Makes sure the root element takes the full height of the viewport */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -8,6 +8,7 @@ cp -r gmssl/include include
|
||||
mkdir gmssl/build
|
||||
cd gmssl/build || exit
|
||||
cmake ..
|
||||
make
|
||||
cd bin || exit
|
||||
cp libgmssl.so libgmssl.so.3 libgmssl.so.3.1 ../../../lib
|
||||
cp libsdf_dummy.so libsdf_dummy.so.3 libsdf_dummy.so.3.1 ../../../lib
|
||||
|
||||
@@ -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 个节点信息
|
||||
@@ -28,9 +28,10 @@ app.add_middleware(
|
||||
)
|
||||
|
||||
# 配置日志文件路径
|
||||
log_dir = "logs"
|
||||
if not os.path.exists(log_dir):
|
||||
os.makedirs(log_dir)
|
||||
|
||||
log_dir = os.path.expanduser("~/tpre-python-logs")
|
||||
os.makedirs(log_dir, exist_ok=True)
|
||||
|
||||
log_file = os.path.join(log_dir, "server_logs.log")
|
||||
|
||||
# 全局日志配置
|
||||
@@ -58,10 +59,10 @@ async def lifespan(_: FastAPI):
|
||||
current_dir = os.path.dirname(os.path.abspath(__file__))
|
||||
|
||||
# 定义 frontend 的绝对路径
|
||||
frontend_dir = os.path.join(current_dir, "..", "frontend")
|
||||
frontend_dir = os.path.join(current_dir, "..", "frontend","build")
|
||||
|
||||
app = FastAPI(lifespan=lifespan)
|
||||
app.mount("/frontend", StaticFiles(directory="frontend/build"), name="frontend")
|
||||
app.mount("/frontend", StaticFiles(directory=frontend_dir), name="frontend")
|
||||
|
||||
|
||||
def init():
|
||||
|
||||
@@ -9,7 +9,6 @@ import httpx
|
||||
import respx
|
||||
from fastapi.testclient import TestClient
|
||||
import sys
|
||||
import os
|
||||
|
||||
sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), "../src")))
|
||||
from node import (
|
||||
|
||||
Reference in New Issue
Block a user