socket.io-client + реагировать, где подключиться к серверу?

Question

Я пишу очень простое приложение Nodejs. Я использую React + Socket.io.

Существует корневой элемент, который немедленно отображает другой компонент реакции (вы можете задаться вопросом, почему у меня есть этот корневой элемент. Причина в том, что я хочу иметь возможность подключить один из двух компонентов после получения сообщения с сервера, но для начало я представляю предварительно выбранный компонент). В этом корневом компоненте я определяю сокет в componentDidMount. Теперь проблема в том, что я хочу передать этот сокет всем детям (чтобы они могли слушать и общаться с сообщениями сервера.) Но если я подключусь к серверу в componentDidMount корня, во время рендеринга нет сокета как он еще не подключен, и null будет передан дочерним компонентам.

'use strict'; 

var React = require('react'); 
var ioClient = require('socket.io-client'); 
var UsersList = require('./usersList'); 
var Game = require('./game'); 
var socket; 

var Snake = React.createClass({ 

    displayName: 'Snake', 

    propTypes: {}, 

    getDefaultProps: function() { 
     return {}; 
    }, 

    mixins: [], 

    getInitialState: function() { 
     return ({ 
      usersList: true, 
      game: false 
     }); 
    }, 

    componentWillMount: function() { 
    }, 

    componentWillUnmount: function() { 
     this.socket.close(); 
    }, 
    componentDidMount: function() { 
     socket = ioClient.connect(); // this happens after render 
    }, 
    render: function() { 
     var result = null; 
     if (this.state.usersList) { 
      result = <UsersList socket={socket}/> // therefore this one is passed as null 
     } else { //game : true 
      result = <Game socket={socket}/> 
     } 
     return (<div> 
      {result} 
     </div>) 
    } 
}); 

module.exports = Snake; 

'use strict'; 

var React = require('react'); 

    var UsersList = React.createClass({ 

     displayName: 'UsersList', 

     propTypes: {}, 

     getDefaultProps: function() { 
      return {}; 
     }, 

     mixins: [], 

     getInitialState: function() { 
      return ({ 
       usersList:[] 
      }); 
     }, 
     componentWillReceiveProps: function(){ 
     }, 
     componentWillMount: function() { 
     }, 

     componentWillUnmount: function() { 
     }, 

     componentDidMount: function(){ 
      var socket = this.props.socket; // this one was passed into the component as null 
      socket.on('usersList', function(data){ // so this one returns an error 
       this.setState({ 
        usersList: data.usersList 
       }); 
      }); 
     }, 
     render: function() { 
      var users = []; 
      for (var i = 0 ; i < this.state.usersList.length ; i++){ 
       users.push(<span>{this.state.usersList[i]}</span>); 
      } 
      return(<div>{users}</div>); 
     } 
    }); 

    module.exports = UsersList; 

Итак, теперь вы можете спросить, почему я не ставлю io.connect() в componentWillMount или в верхней части файла. Ну, это не сработает! он возвращает эту ошибку: Cannot find property "protocol" .... Не могу поместить его в render, componentWillMount, вверху файла ...

Любая идея о том, как это сделать?

Answer 1

Вы можете продолжить подключение в: componentDidMount. Это не будет немедленно доступно для детей компоненты, но тогда вы могли бы сделать что-то подобное в детях:

componentDidUpdate(prevProps, prevState) { 
    if (this.props.socket) { 
     // do your connection logic here 
    } 
} 

Это будет гарантировать, что дети сразу же подключить, когда сокет первого подключена и доступны для них. Внутри инструкции if вы также можете убедиться, что this.props.socket не равно prevProps.socket, чтобы предотвратить попытку избыточного соединения.