I get this error in the Chrome console on my Phoenix/React app—but, strangely, not in incognito mode. Everything is pointed to the same /socket endpoint.

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 say it's about the transport layer, which makes a bit of sense since this is what's highlighted in the console where the error is:

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

The React app finds the endpoint like so:

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: Amending that line to const socket = new Socket('${WEBSOCKET_URL}/socket/websocket' just makes the error read .../socket/websocket/websocket?....

The endpoint.ex is pretty standard:

socket "/socket", App.UserSocket

None of this points to why the app would work in incognito and load all these errors otherwise, though.

I get this error in the Chrome console on my Phoenix/React app—but, strangely, not in incognito mode. Everything is pointed to the same /socket endpoint.

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 say it's about the transport layer, which makes a bit of sense since this is what's highlighted in the console where the error is:

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

The React app finds the endpoint like so:

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: Amending that line to const socket = new Socket('${WEBSOCKET_URL}/socket/websocket' just makes the error read .../socket/websocket/websocket?....

The endpoint.ex is pretty standard:

socket "/socket", App.UserSocket

None of this points to why the app would work in incognito and load all these errors otherwise, though.

• javascript
• sockets
• reactjs
• elixir
• phoenix-framework

1 Answer 1

I'll post how I fixed this because it might help someone else, although I'm not really certain why it's the case. Just change localhost in both the front and the back to the IP address:

In config.ex:

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

In your front end:

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