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

Question

我的 Kubernetes 集群上运行了多个 pod，并且我有一个使用 react 构建的“核心应用”，我想从中获取 CPU 和内存使用统计信息。

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

但是，使用如下所示的一个组件，我可以从服务器获取实时更新。

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>
    )
}

现在，统计组件的“时间”正在添加到我的最后一个项目组件中（这是有道理的，因为我还没有实施任何方法来映射它）。

关于如何为我的每个“项目”拥有不同的统计组件，每个项目都连接到提供的端点有什么想法吗？ （我可以将所有端点作为环境变量传递）

任何帮助将不胜感激。

Answer 1

所以这是我为使其工作所做的实现。 （不确定是否理想，请随时提出任何建议）

我在 state.projects 中添加了“端点”，它保存了我从后端获取的数据。

然后在问题中提到的“项目列表”组件中，我将项目（来自 state.projects）作为道具传递

<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

它似乎工作正常，但是请提供任何建议，因为我可能没有遵循最佳方法（性能和可扩展性方面）