Error during WebSocket handshake: Unexpected response code: 500

archimondain

I receive the error

Error during WebSocket handshake: Unexpected response code: 500

in my browser.

The Phoenix code is

defmodule SyntaxWeb.UserSocket do
  use Phoenix.Socket

  def connect(%{"token" => token}, socket, _connect_info) do
    IO.inspect "get here"
    case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
      {:ok, user_id} ->
        IO.inspect "and get there"
        {:ok, assign(socket, :current_user, Syntax.Accounts.get_user!(user_id))}
      {:error, reason} ->
        IO.inspect "bad user socket token : #{reason}"
        :error
    end
  end
end

The javascript code uses is :

let { Socket } = require('phoenix-channels');
socket = new Socket("ws:" + myurl + "/socket", {params: {token: userToken}})
socket.connect();

The request for connection reaches the server as I have both “get here” and “get there” displayed. Would anyone have an idea of what goes wrong ?

7 comments

/phoenix #websockets

0 10224 7

2019-09-03 10:34:22 UTC

Showing Posts 1 to 7

Show Best Posts
Show All (oldest first)
Show All (newest first)

sb8244

Author of Real-Time Phoenix

If you open your network tab and then refresh, you will see the 500 error request. There may be information as to why the error occurred here.

Another place to look for the error is the Phoenix logs. Can you paste what you see in red when the 500 occurs?

Post #1

archimondain

Unfortunately there is nothing display on the server side : like everything is going fine.

I found out that the version of my code works with Phoenix version 1.4.0. The version I’m having problem with is 1.4.9. I’m thinking that maybe there is a compatibility issue with phoenix-channels, or maybe the rest of my code is not compatible with version 1.4.9. On my EndPoint I have

  socket "/socket", SyntaxWeb.UserSocket,
    websocket: true,
    longpoll: false

Maybe it could help…

Post #2

kokolegorille

Are You sure of this code? I use phoenix npm package… which is compatible with 1.4.9

yarn add phoenix

# or 
npm install --save phoenix

# then
import { Socket } from 'phoenix';

BTW doing a DB query when using token is quite strange because You could get all needed info in the token. I sign my token like this.

def sign(user), do: Phoenix.Token.sign(Endpoint, @salt, %{id: user.id, name: user.name})

So I don’t need to make additional DB query when checking token. It has the advantage to not expose sensitive data in socket assigns.

Unless You want to invalidate tokens, like guardian-db does.

Syntax.Accounts.get_user!(user_id)

Post #3

archimondain

Thanks for the tip

I now have the exact same version of erlang/elixir/phoenix on dev and production, but I keep having the same issue on production while everything is fine on dev.

The only thing I can think of is the following: I use the following trick on production so that Cowboy can accept connections on the port 80 :

sudo setcap 'cap_net_bind_service=+ep' /HOME/myapp/erts-8.3/bin/beam.smp

Is it possible that another program than beam.smp is in charge of socket connections ?

Post #4

archimondain

I changed nothing, and at some point it started to work. This is mysterious…
Maybe some cache system somewhere caused this.

Addition :
I found something more specific : The problem disappear when I suppress the website cookie from my browser. I have to find out what causes this.

Post #5

sb8244

Author of Real-Time Phoenix

Is it a particularly large cookie? A marketing installation caused this issue in my app once due to a shared domain. The solution in that case was to allow larger cookies to be processed by cowboy.

Post #6