WebPack + ReactJSプロジェクトでSocket.io（v1.7.3）接続をグローバルに設定する方法はありますか？

Question

私はリアクト・コンポーネントへの小道具としてソケットを渡すことがあります。

<Component1 socket={this.state.socket}/> 

をしたがって、別のコンポーネントで、または子コンポーネントでサーバーからのメッセージをサブスクライブし、私は彼らにそれを再度転送する必要がありますプロパティ。 それは恐ろしいです。 So ... WebPack + ReactJSプロジェクトでSocket.io（v1.7.3）接続をグローバルに設定する方法はありますか？ 各コンポーネントでsocket.on（）とsocket.emit（）を宣言せずに使用する。

Answer 1

あなたは言及していないので、あなたはFluxを使用していないと思いますか？ ホームページから：

Fluxは、FacebookがクライアントサイドWebアプリケーションを構築するために使用するアプリケーションアーキテクチャです。これは、単方向データフローを利用してReactの構成可能なビューコンポーネントを補完します。これは正式なフレームワークではなく、パターンであり、新しいコードを多く使わずにFluxをすぐに使用することができます。

Fluxを使用している場合、ソケットオブジェクトを渡す必要はありませんが、それとReactコンポーネント間の通信は非常にうまくいっています。 たとえば、次の形式で：

const Dispatcher = require('./Dispatcher)'; 
const socket = require('socket.io-client')(); 

// Listen to events from server -> Emit them to listeners in the client app 
socket.on('EVENT_A', data => { 
    data.type = 'EVENT_A'; 
    Dispatcher.dispatch(data); 
}); 

// Listen to events from the client app -> Emit them to server 
Dispatcher.register(payload => { 
    switch(payload.type) { 
    case 'EVENT_B': 
     socket.emit('EVENT_B', payload.data); 
     break; 
    case 'EVENT_QUIT': 
     socket.disconnet(); 
     location.assign('/exit'); 
     break; 
    default: break; 
    } 
}); 

あなたは、単一のファイル内のソケット関連のコードを置くことができ、かつフラックスのディスパッチャは、フラックス店を通じてまたはリアクトコンポーネントに直接自分自身にいずれか、すべての通信作業を行います。