eventsource 在react中使用

在 React 中使用 EventSource 可以实现服务器与客户端之间的实时通信。下面是一个简单的例子：

首先，安装 eventsource 库：

npm install eventsource

然后，创建一个新的组件，例如 `RealtimeData`，并在 `componentDidMount` 生命周期方法中初始化 EventSource 对象：

import React, { Component } from 'react';
import EventSource from 'eventsource';

class RealtimeData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
  }

  componentDidMount() {
    const source = new EventSource('/api/realtime-data');
    source.addEventListener('message', (event) => {
      this.setState({ data: event.data });
    });
  }

  render() {
    return (
      <div>{this.state.data}</div>
    );
  }
}

export default RealtimeData;

在上面的代码中，我们创建了一个新的 EventSource 对象，并订阅了服务器端的 `/api/realtime-data` 路径。当服务器端发送一条消息时，我们将其更新到组件的状态中，并在 `render` 方法中显示出来。

最后，将 `RealtimeData` 组件添加到你的应用程序中：

import React from 'react';
import RealtimeData from './RealtimeData';

function App() {
  return (
    <div>
      <h1>Realtime Data</h1>
      <RealtimeData />
    </div>
  );
}

export default App;

这样，当你访问应用程序时，你将看到实时数据被动态更新。