phoenix.js：到 ws://localhost:4000/socket 的 WebSocket 连接失败答案

【问题标题】：phoenix.js: WebSocket connection to ws://localhost:4000/socket failedphoenix.js：到 ws://localhost:4000/socket 的 WebSocket 连接失败
【发布时间】：2017-11-15 20:51:17
【问题描述】：

我在 Phoenix/React 应用程序的 Chrome 控制台中收到此错误，但奇怪的是，在隐身模式下不是。一切都指向同一个/socket 端点。

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 说它是关于传输层的，这有点道理，因为这是控制台中突出显示的错误所在：

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

React 应用程序像这样找到端点：

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 });
}

注意：将该行修改为 const socket = new Socket('${WEBSOCKET_URL}/socket/websocket' 只会使错误读取为 .../socket/websocket/websocket?...。

endpoint.ex 非常标准：

socket "/socket", App.UserSocket

不过，这些都不能说明为什么应用会在隐身模式下运行并加载所有这些错误。

【问题讨论】：

标签： javascript sockets reactjs elixir phoenix-framework

【解决方案1】：

我将发布我如何解决此问题，因为它可能对其他人有所帮助，尽管我不确定为什么会这样。把正反两面的localhost改成IP地址即可：

在config.ex:

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

在你的前端：

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

【讨论】：