2017-02-14 22 views
0

私は、React Routerを使ってReact/Reduxアプリケーションをルーティングしています。反応ルータでwebsocket接続を維持する

このアプリの一環として、websocket接続を設定しました。私が直面している問題は、URLに直接ナビゲートすると、接続が切断されるということです。例えば

:接続が確立されてwww.app.com/

  • のWebSocketのホームページ上

    1. ユーザーの土地。
    2. React Router browserHistory経由でユーザのナビゲートをwww.app.com/linkに送信します(このページに接続するためのコードはありません)。
    3. 接続が維持されます。

    期待どおりに動作します。しかし:www.app.com/

  • のWebSocket接続のホーム・ページ上の

    1. ユーザー土地は確立されています。
    2. ユーザーがアドレスバーに入力する(または前の例を経由して、それに移動した後にページを更新して/linkに直接移動します。
    3. 接続が切断。

    は、この予想される動作ですか?そういずれかがある場合Redux/React Routerのパターンを避けるには?毎回手動で接続を再確立する必要がありますか?

  • +0

    クライアント側のルーティングとサーバー側のルーティングについて知っていますか? – Jayce444

    +0

    これまでのところ、このアプリはサーバレスであることが計画されていました。したがって、すべてがクライアント側であり、それは 'app.com /'以外のリクエストをキャッチするためにRoute53でS3上でホストされます –

    +0

    websocketの部分についてはわかりませんが、手動でリンクにナビゲートするとそのファイルをサーバーに照会し、クライアント側のみがルートとして存在する場合は404を取得し、失敗するでしょう。これを解決するには、バックエンドのすべてのパスをキャッチする必要があります(明示的に 'app.get(' * '、(req、res)=> {res.sendFile(' index.html ')}) ; 'これは、手動でURLを入力するか、ページを更新する場合にトリガされます。あなたのケースでは、サーバー側とwebsocketに対して、特定のReactルートに関係なく接続が確立されるように設定する必要があります) – Jayce444

    答えて

    2

    はい、これは予想される動作です。サーバーに再度アクセスして、javascriptアプリケーションを含むファイルを読み込みます(キャッシュが結果は同じです)。このため、websocket接続を含むメモリ内のjavascriptコードが失われ、すべてのスクリプトが再度評価されます。

    これを回避する方法はありません。常にwebsocket接続を開くには、ユーザーのページに関係なく、アプリケーションのエントリポイントスクリプトで接続を開くことができます。

    関連する問題