Question

我无法使以下代码正常工作。

我只能使用SocketIO来获取数据，而不能使用RxJS 6来获取数据。

class App extends Component {
  constructor(props){
    super(props);
  }
    state = {
      clusterdata: {}
    }
  componentDidMount(){
    const socket = io('http://localhost:5000',{
      path: '/stream',
      transports: ['websocket']
    });
    socket.emit('json', 'my-ecs-cluster');
      const clusterStream = Observable.create(observer => {
        socket.on('connect', socket => {
            console.log(socket);
          socket.on('json', data => {
            observer.next(data)
          })
      })
        this.clusterStreamObserver = clusterStream.subscribe(this.setClusterData.bind(this));
    })

... setState部分

setClusterData(clusterdata){
     if (!clusterdata || clusterdata.length === 0) {
       return;
       this.setState({clusterdata: clusterdata});
     }
  }

...渲染部分

render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          {JSON.stringify(this.state.clusterdata)}

        </p>
      </div>
    );
  }
}

export default App;

Answer 1

您可以尝试通过以下方式创建Observable：

const socket = io（'http://localhost:5000'，{ 路径：“ / stream”，传输方式：['websocket'] }）;

const connection $ = Rx.Observable.fromEvent（socket，'connect'）;

connection $ .subscribe（）;

使ReactJS与SocketIO和RxJS一起使用

1 个答案: