让 ReactJS 与 SocketIO 和 RxJS 一起工作答案

【问题标题】：Getting ReactJS to work with SocketIO and RxJS让 ReactJS 与 SocketIO 和 RxJS 一起工作
【发布时间】：2018-12-30 21:56:06
【问题描述】：

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

我可以仅使用 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;

【问题讨论】：

你可以在这篇文章中找到关于如何在 socketIO 上使用 Observables here 或在另一篇文章中 here 的所有详细信息

标签： reactjs socket.io rxjs rxjs6

【解决方案1】：

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

const socket = io('http://localhost:5000',{ 路径：'/流'，传输：['websocket'] });

const connection$ = Rx.Observable.fromEvent(socket, 'connect');

连接$.subscribe();

【讨论】：

这行得通，谢谢：socket.on('connect', sock => { socket.emit('json', 'my-ecs-cluster'); const clusterStream = fromEvent(socket, ' json') this.clusterStreamObserver = clusterStream.subscribe(this.setClusterData.bind(this)); }) }