phoenix.js:与ws:// localhost:4000/socket的WebSocket连接失败

Question

我在我的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 

各种消息来源说它是关于传输层的,这有点意义,因为这是在控制台中突出显示的错误是:

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

然而,这些都没有说明为什么应用程序会隐姓埋名并加载所有这些错误.

Answer 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';