Getting ReactJS to work with SocketIO and RxJS

Question

I'm having trouble getting the below code to work.

I can get the data using just SocketIO but not with 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));
    })

... the setState part

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

... the render part

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;

you can find all details on how to use Observables over socketIO here in this article or here in this other article — Picci
– Picci, Commented Jul 23, 2018 at 14:14

Oleksandr Sachuk · Accepted Answer · 2018-07-23 13:39:14Z

2

You can try to create an Observable by the following way:

const socket = io('http://localhost:5000',{ path: '/stream', transports: ['websocket'] });

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

connection$.subscribe();

answered Jul 23, 2018 at 13:39

Oleksandr Sachuk

1311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simply Seth Over a year ago

This works, thanks: socket.on('connect', sock => { socket.emit('json', 'my-ecs-cluster'); const clusterStream = fromEvent(socket, 'json') this.clusterStreamObserver = clusterStream.subscribe(this.setClusterData.bind(this)); }) }

Collectives™ on Stack Overflow

Getting ReactJS to work with SocketIO and RxJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related