phoenix.js：ws：// localhost：4000/socketへのWebSocket接続に失敗しました

Question

Chromeコンソールのフェニックス/リアクションアプリでこのエラーが発生しましたが、間違いなくではなく、がシークレットモードです。すべてが同じ/socketエンドポイントを指しています。

this.conn = new this.transport(this.endPointURL()); 

リアクトアプリはそうのようなエンドポイントを検索します。

WebSocket connection to 'ws://localhost:4000/socket/websocket?token=blah&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 400 

Various sources

が、これは誤りである場合、コンソールで強調表示されるものですので、それは感覚のビットを行い、トランスポート層、についてだと言います。

const API_URL = 'http://localhost:4000/api'; 
const WEBSOCKET_URL = API_URL.replace(/(https|http)/, 'ws').replace('/api', ''); 

function connectToSocket(dispatch) { 
    const token = JSON.parse(localStorage.getItem('token')); 
    const socket = new Socket(`${WEBSOCKET_URL}/socket`, { 
    params: { token }, 
    }); 
    socket.connect(); 
    dispatch({ type: 'SOCKET_CONNECTED', socket }); 
} 

NB：改正const socket = new Socket('${WEBSOCKET_URL}/socket/websocket'にその行だけエラーがを読みます。

endpoint.exはかなり標準です：この

socket "/socket", App.UserSocket 

なしアプリがお忍びで仕事といえ、そうでない場合は、すべてのこれらのエラーをロードする理由を指していません。

Answer 1

私はこれを修正した方法を投稿します。他人を助けるかもしれないので、私は本当にそれがなぜそのようなのかは分かりません。

const API_URL = 'http://127.0.0.1:4000/api'; 

：あなたのフロントエンドで

config :app, App.Endpoint, 
    url: [host: "127.0.0.1"]... 

：

config.exで：ちょうど前とIPアドレスにバックの両方でlocalhostを変更