socket.ioを聞くためにReactコンポーネントを設定する

Question

私のReactコンポーネントがsocket.ioからのイベントを聞きたい。私は、HTMLファイルが含まれている場合は私のコードは動作します：

<script src="socket.io/socket.io.js"></script>

して、コンポーネントのコンストラクタ（）を持っている：

this.socket = io(); // eslint-disable-line no-undef

HTMLファイルがから適切socket.ioクライアントコードを取得私のExpressサーバ、そしてすべてがうまくいきます。

しかし、これはとても安っぽい感じです。私はio（）関数を見つけるためにグローバルなウィンドウ名空間に頼ることは嫌いです。 Reactコンポーネントがsocket.ioを介してサーバーに接続させるためのベストプラクティスは何ですか？ありがとう。

Answer 1

WebpackやBrowserifyのようなバンドルを使用している場合は、socket.io-clientを使用できます。例えば

：

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

class MyComponent extends React.Component { 
    constructor(...args) { 
    super(...args); 
    this.socket = io(); 
    } 
    ... 
} 

Answer 2

目的のイベントコールバックでcomponentWillMountとsetStateにソケットを作成します。