Update ReactJS app using websocket

Question

I am trying to do a supervision page for my customer, but I am struggling with updating a ReactJS app in real time. This supervision page can contains up to sixteen video flux, which can or cannot be in service at the same time.

When I generate my page with Django, I build an initial list stored in a JS variable :

var anims = {{list|safe}}

My ReactJS code for a single video flux is the following :

var ModelFlux = React.createClass({
    displayName : "Flux player",
    propTypes: {
        animID: React.PropTypes.number.isRequired,
    },
    componentDidMount:function() {
       //generating the player
    },
    render: function() {
        var newDivId = 'iv' + this.props.animID;
        return(
            React.createElement('div',{className:'col-md-3 col-sm-6 col-xs-12'},
                React.createElement('div', {id:"content"},
                    React.createElement('div',{id:newDivId,className:'smallPl'})
                )
            )
        )
    }
})

Then, I use the following to generate X flux:

var ModelFluxwithID = anims
    .map(function(anim) {return React.createElement('div',{},React.createElement(ModelFlux,{key:anim.key,animID:anim.animID}))})

And finally, I call my app :

var App = React.createClass({
    displayName : "React App",
    render: function() {
        return(
            React.createElement('div',{className:'container'},
                React.createElement('div',{className:'row'},ModelFluxwithID)
            )
        )
    }
})

ReactDOM.render(
    React.createElement(App),
    document.getElementById('react-app')
)

It is working perfectly fine when the page is generated. But my customer doesn't want to load the page each time a flux is online/offline, so I monitor in real time the status of each flux with a websocket, which update anims :

ws = new WebSocket('xxxxxx');
ws.onmessage = function(event) {
    // Update the anims variable      
}

How can I proceed to update the app when anims is changing (creating/destroying) ?

Alex Young · Accepted Answer · 2016-11-18T15:39:48.813

You need to keep the anim variable as state within the App class, and map your ModelFlux instances from the state. Then when the anim state is updated, the relevant child components will be updated. For example,

var App = React.createClass({
  displayName : "React App",
  render: function() {
    return(
        React.createElement('div',{className:'container'},
            React.createElement('div',{className:'row'},{this.mapAnims(this.state.anims)})
        )
    )
  },
  getInitialState: function() {
    return {
      anims: yourAnimsVariable
    };
  },
  updateAnims: function(newAnims) {
    this.setState({
      anims: newAnims
    });
  },
  mapAnims: function() {
    return this.state.anims.map(function(anim) {
       return React.createElement('div',{},React.createElement(ModelFlux,{key:anim.key,animID:anim.animID});
    }
  },
  componentWillMount: function() {
    var ws = new WebSocket('xxxxxx');
    ws.onmessage = event => {
        this.updateAnims(event.data.anims); //or wherever your new anim data is in the event    
    }
  }
});

ReactDOM.render(
  React.createElement(App),
  document.getElementById('react-app')
)

Thank you for your answer, which helps me to understand a bit more what I'm doing ! I nearly got it working, but I still got an error message : this.updateAnims(event.data.anims); — Dr Mouse, Nov 17 '16 at 16:30
I put "this.data.anims" in there as a placeholder. In the websockets onmessage callback you need to use whatever data has been sent to you to regenerate the anims variable, then call this.updateAnims with that. What data is being returned from the websocket? — Alex Young, Nov 17 '16 at 16:53
I update my anims function with the websocket, adding or removing elements. — Dr Mouse, Nov 18 '16 at 08:00

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

Based on Alex Young answer and this SO question React this.setState is not a function, I finally made it ! The final trick was to save the App reference before the ws.on message part ! So it gives :

componentWillMount: function() {
var ws = new WebSocket('xxxxxx');
var that = this; //
ws.onmessage = function(event) {
    that.updateAnims(anims);
}

Otherwise, the this corresponds to the onmessage function, not to the ReactJS App !

edited May 23 '17 at 10:30

Community

1
1

answered Nov 18 '16 at 09:10

Dr Mouse

331
1
5
19

Oops my mistake, I've edited my original answer to use ES6 lambda functions to avoid this. – Alex Young Nov 18 '16 at 15:39

Update ReactJS app using websocket

2 Answers2