Javascript 如何将shell输出从终端传输到前端react应用程序？

我有一个简单的react应用程序，在前端，有一个按钮，我通过它执行一个特定的功能，下面的一个

  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=async（）=>{
这是我的国家(
{
孤岛加载：是的，
notificationData:空
},
异步（）=>{
const{selectedTest}=this.state；
试一试{
const response=wait axios.get（`tests/${selectedTest.value}`）；
施工通知数据={
reportUrl:response.data.reportUrl，
状态：response.data.status，
名称：selectedTest.label
};
const historyResponse=等待axios.get（“历史”）；
这是我的国家({
historyData:historyResponse.data，
孤岛加载：false，
通知数据
});
}捕获（错误）{
这是我的国家({
错误：error.message，
孤岛加载：false
});
设置超时（（）=>{
这是我的国家({
错误：null
});
}, 3000);
}
}
);
};
renderTestRunner=（）=>{
const{isLoading，selectedTest}=this.state；
返回(
跑
样品
{selectedTest&&！isLoading&&(
跑
)}
);};

单击按钮触发此函数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>
    );
}
  }

render（）{
//对show的传统支持
const{visible，show，className，msg}=this.props；
返回(
您的浏览器不支持HTML5画布元素。
这可能需要几分钟时间。请稍候

);
}
}

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