Now when we have the server and client services, we can enable them in the application. The most suitable place is the App container--./app/js/Containers/App.jsx:
import Server from "../Service/Server";
import Client from "../Service/Client";
const HOST = "127.0.0.1",
PORT = 8001;
export default class App extends React.Component {
constructor(){
super();
this.client = new Client();
this.server = new Server();
this.server.connect( HOST, PORT, this.client );
}
//...
}
Do you remember that we rendered either the ChatPane or Welcome component conditionally in the static prototype?:
{ name ?
( <ChatPane client={client}
/> ) :
( <Welcome onNameChange={this.onNameChange} /> ) }
Back then, we hardcoded name, yet it belongs...