javascript - 如何将 shell 输出从终端流式传输到前端反应应用程序？

Question

我有一个简单的 react-app，在前端，有一个按钮，我可以通过它执行特定功能，如下所示

  runTest = async () => {
this.setState(
  {
    isLoading: true,
    notificationData: null
  },
  async () => {
    const { selectedTest } = this.state;

    try {
      const response = await axios.get(`tests/${selectedTest.value}`);

      const notificationData = {
        reportUrl: response.data.reportUrl,
        status: response.data.status,
        name: selectedTest.label
      };

      const historyResponse = await axios.get("history");
      this.setState({
        historyData: historyResponse.data,
        isLoading: false,
        notificationData
      });
    } catch (error) {
      this.setState({
        error: error.message,
        isLoading: false
      });
      setTimeout(() => {
        this.setState({
          error: null
        });
      }, 3000);
    }
  }
);
};


 renderTestRunner = () => {
const { isLoading, selectedTest } = this.state;
return (
  <div className="sample">
    <span className="application_name">
      run <span className="bolded">run</span>
    </span>
    <span className="description">sample</span>
    <div className="dropdown">
      <Dropdown
        onChange={this.onChange}
        value={selectedTest}
        options={this.getDropdownOptions()}
        isDisabled={isLoading}
      />
      {selectedTest && !isLoading && (
        <span className="run_button" onClick={this.runTest}>
          Run
        </span>
      )}
    </div>
    <div></div>
  </div>
);};

一旦通过单击按钮触发此函数runTest，函数输出就会出现在我的 Vs 代码终端上，所以我想知道是否可以将此输出实时流式传输到前端，目前我只显示微调器，如下所示

render() {
    // legacy support for show
    const { visible, show, className, msg } = this.props;

    return (
        <div
            data-spec="spinner-wrapper"
            className={`spinner__wrapper`}
        >
            <canvas
                ref="spinner"
                className="spinner"
                style={{ display: visible || show ? "block" : "none" }}
                width={this.size}
                height={this.size}
            >
                Your browser does not support HTML5 canvas elements.
            </canvas>
            <p className="spinner__msg">This might take a few minutes. Please wait..</p>
        </div>
    );
}
  }

我想做一些类似于詹金斯输出终端的事情

标签： javascriptnode.jsreactjsshellfrontend