使用websocket更新ReactJS应用程序

我正在尝试为我的客户做一个监督页面，但我正在努力实时更新ReactJS应用程序。这个监控页面可以包含多达16个视频通量，这些视频通量可以同时或不可以同时使用。使用websocket更新ReactJS应用程序

当我产生我的Django的页面，我建立存储在一个JS变量的初始列表：

var anims = {{list|safe}}

我ReactJS单个视频流量的代码如下：

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'}) 
       ) 
      ) 
     ) 
    } 
})

然后，我使用以下来生成X通量：

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

最后，我打电话给我的应用程序：

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') 
)

它在页面生成时工作得很好。但我的客户不希望每次通量在线/离线加载页面，所以我在实时监测每个通量与WebSocket的状态，其中更新anims：

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

哪有当anims正在改变（创建/销毁）时，我继续更新应用程序？

来源

2016-11-17 Dr Mouse

您需要将anim变量保持为App类中的状态，并将状态映射到您的ModelFlux实例。然后，当更新动画状态时，相关的子组件将被更新。例如，

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') 
)

来源

2016-11-17 16:09:28

谢谢你的回答，这有助于我更多地理解我在做什么！我几乎可以工作，但我仍然收到一条错误消息：this.updateAnims（event.data.anims）; –

我把“this.data.anims”作为占位符放在那里。在websockets的onmessage回调函数中，你需要使用发送给你的任何数据来重新生成anims变量，然后用这个函数调用this.updateAnims。什么数据从websocket返回？ –

我使用websocket更新我的anims函数，添加或删除元素。 –

基于Alex Young的回答和这个SO问题React this.setState is not a function，我终于做到了！最后的诀窍是在ws.on消息部分之前保存应用程序引用！所以，它给：

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

否则，这对应的onMessage功能，不以ReactJS应用程序！

来源

2016-11-18 09:10:30

糟糕我的错误，我编辑了我的原始答案，以使用ES6 lambda函数来避免这种情况。 –

使用websocket更新ReactJS应用程序

回答

相关问题