监控React JS中的多个服务器统计信息

Question

我有多个pod在我的Kubernetes集群上运行，我有一个"核心应用程序"；用react构建，我想从中获得CPU&内存使用情况统计数据。

现在我正在使用一个非常简单的设置进行测试，其中我有一个本地节点应用程序，使用socket.io来流式传输时间(基于本教程(

然而，有了一个如下所示的组件，我就可以从服务器获得实时更新。

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
import {StatsCPUWrapper} from './statsCPU.style'
const ENDPOINT = process.env.STATS_ENDPOINT || "http://127.0.0.1:4001";

function StatsCPUComp() {
const [cpustats, setCPUstats] = useState("");

useEffect(() => {
const socket = socketIOClient(ENDPOINT);
socket.on("FromAPI", data => {
setCPUstats(data);
});
// Clean up the effect
return () => socket.disconnect();
}, []);

return (
<StatsCPUWrapper>
<p>
It's <time dateTime={cpustats}>{cpustats}</time>
</p>
</StatsCPUWrapper>
);
}

export default StatsCPUComp;

我现在试图做的是让3个或更多的这些组件(取决于我从后端得到的列表("；订阅"；同时连接到多个服务器。

这是我的"；项目列表"；组件，它从初始状态获取统计数据并呈现所有细节：

import React from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {Link} from 'react-router-dom'
import PropTypes from 'prop-types'
import {create, remove} from '../../features/projects/projectSlice'
import {ProjectWrapper} from './project.style'
import StatsCPUComp from './stats/statsCPU'
export function ProjectComp() {
const dispatch = useDispatch()
const projects = useSelector((state) => state.projects)
const handleSubmit = (e) => {
e.preventDefault()
}
const handleAction = (e) => {
e.preventDefault()
}
return (
<ProjectWrapper>
<div className="projects">
<div className="row">
{projects.map((projects) => (
<div className="col-12">
<div class="card project-card">
<div className="card-body">
<div className="row">
<div className="col-4 project-text">
<h5 class="card-title">
{' '}
<Link to={`/projects/` + projects.id}>{projects.name}</Link>
</h5>
<p class="card-text">Owner: {projects.owner}</p>
<p class="card-text">{projects.email}</p>
</div>
<div className="col-4 projects-stats">
<StatsCPUComp />
</div>
<div className="col-4 projects-stats"></div>
<div className="col-4 projects-stats"></div>
</div>
</div>
</div>
<br></br>
</div>
))}
</div>
</div>
</ProjectWrapper>
)
}

现在；时间"；来自stats的组件正在添加到我的上一个项目组件上(这很有意义，因为我还没有实现任何映射方法(。

关于如何为我的每个"；项目"；其中每一个连接到所提供的端点？(我可以将所有端点作为env变量传递(

如有任何帮助，我们将不胜感激。

Answer 1

下面是我为使它发挥作用所做的实现。(不确定它是否理想，所以请随时提出任何建议(

我添加了"；端点"；到state.projects，它保存我从后端获得的数据。

然后在我的"；项目列表"；问题中提到的组件，我将项目(来自state.products(作为道具

<StatsCPUComp props={projects}/>

然后，我将其销毁，并将其传递给stats组件中的useEffect((，如下所示：

import React, {useState, useEffect} from 'react'
import socketIOClient from 'socket.io-client'
import {StatsCPUWrapper} from './statsCPU.style'
import {useSelector, useDispatch} from 'react-redux'
let ENDPOINTS = []
let PROJECTS = []
function StatsCPUComp(...props) {
const [cpustats, setCPUstats] = useState('')
let endpoints = {...props}
let endpoints_2 = {...endpoints[0]}

useEffect(() => {
let socketlist = []
console.log(endpoints[0].props.endpoint)
const socket = socketIOClient(endpoints[0].props.endpoint);
socket.on("FromAPI", data => {
setCPUstats(data);
});
return () => socket.disconnect();
}, [cpustats])
return (
<>

<StatsCPUWrapper>
<p>
It's <time dateTime={cpustats}>{cpustats}</time>
</p>
</StatsCPUWrapper>
</>
)
}
export default StatsCPUComp

它似乎运行良好，但请提供任何建议，因为我可能没有遵循最佳方法(性能和可扩展性方面(