How to start debugging a web socket connection?

Hi everyone!

I have a chat app live and some users haven’t been able to connect to their socket.

At first I thought it was my frontend code but I changed things and still doesn’t connect for this user and probably others (it works for me and other users)

this is where I make the socket connection

import {Socket} from "./phoenix.js"
import Chat from "./chat.js";
import ChatNotification from "./chatnotification.js";
import ChatPresence from "./chatpresence.js";

window.onload = function () {
    console.log("user token: ")
    let socket = new Socket("/socket", {params: {token: get_user_token()}})

I’m now thinking it probably is my configuration in the backend:

this is my releases.exs

import Config
config :logger, level: :info
config :pelable, PelableWeb.Endpoint, server: true

config :pelable, PelableWeb.Endpoint,
  http: [:inet6, port: String.to_integer(System.get_env("PORT") || "4000")],
  secret_key_base: System.get_env("SECRET_KEY_BASE")

config :pelable, Pelable.Repo,
  ssl: true,
  database: System.get_env("DATABASE_URL"),
  pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10")

This is my prod.exs

use Mix.Config
config :pelable, PelableWeb.Endpoint,
  http: [:inet6, port: System.get_env("PORT") || 4000],
  url: [host: System.get_env("RENDER_EXTERNAL_HOSTNAME") || "localhost", port: 80],
  check_origin: ["//locahost", "//"],
  cache_static_manifest: "priv/static/cache_manifest.json"

config :logger, level: :info

and my config.exs:

use Mix.Config

config :pelable,
  ecto_repos: [Pelable.Repo]

# Configures the endpoint
config :pelable, PelableWeb.Endpoint,
  url: [host: "localhost"],
  secret_key_base: " secret base key here",
  render_errors: [view: PelableWeb.ErrorView, accepts: ~w(html json)],
  pubsub: [name: Pelable.PubSub, adapter: Phoenix.PubSub.PG2]

# Configures Elixir's Logger
config :logger, :console,
  format: "$time $metadata[$level] $message\n",
  metadata: [:request_id]

# Use Jason for JSON parsing in Phoenix
config :phoenix, :json_library, Jason

config :pelable, :pow,
  user: Pelable.Users.User,
  repo: Pelable.Repo,
  web_module: PelableWeb,
  cache_store_backend: PelableWeb.PowRedisCache,
  extensions: [PowResetPassword, PowEmailConfirmation, PowPersistentSession],
  controller_callbacks: Pow.Extension.Phoenix.ControllerCallbacks,
  mailer_backend: PelableWeb.PowMailer,
  web_mailer_module: PelableWeb,
  routes_backend: PelableWeb.Pow.Routes

  config :pow, PelableWeb.PowMailer,
  adapter: Swoosh.Adapters.Sendgrid,
  api_key: "api key here"

# Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above.
import_config "#{Mix.env()}.exs"

I can see on my logs the following, but I can’t confirm if this is the user that reported this to me:

Oct 14 06:39:24 AM  11:39:24.360 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 406µs
Oct 14 06:39:24 AM    Transport: :websocket
Oct 14 06:39:24 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:39:24 AM    Connect Info: %{}
Oct 14 06:39:24 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}
Oct 14 06:40:25 AM  11:40:25.094 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 310µs
Oct 14 06:40:25 AM    Transport: :websocket
Oct 14 06:40:25 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:40:25 AM    Connect Info: %{}
Oct 14 06:40:25 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}
Oct 14 06:41:25 AM  11:41:25.817 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 462µs
Oct 14 06:41:25 AM    Transport: :websocket
Oct 14 06:41:25 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:41:25 AM    Connect Info: %{}
Oct 14 06:41:25 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}

I also started looking into ways of tracking window.errors on the client but services seemed to be paid and can’t afford it right now, if you know a way of doing this

Thank you!

You should show your user_socket.ex file… it would be easier.

Sorry my bad @kokolegorille

defmodule PelableWeb.UserSocket do
  use Phoenix.Socket
  alias Pelable.Repo
  alias Pelable.Users.User

  channel "chat:*", PelableWeb.ChatChannel
  channel "chat_notification:*", PelableWeb.ChatNotificationChannel
  channel "chat_presence", PelableWeb.PresenceChannel
  ## Channels
  # channel "room:*", PelableWeb.RoomChannel

  # Socket params are passed from the client and can
  # be used to verify and authenticate a user. After
  # verification, you can put default assigns into
  # the socket that will be set for all channels, ie
  #     {:ok, assign(socket, :user_id, verified_user_id)}
  # To deny connection, return `:error`.
  # See `Phoenix.Token` documentation for examples in
  # performing token verification on connect.
  def connect(%{"token" => token}, socket, _connect_info) do
    case Phoenix.Token.verify(socket, "secret ", token, max_age: 86400) do
      {:ok, user_id} ->
        socket = assign(socket, :current_user, Repo.get!(User, user_id))
        {:ok, socket}
      {:error, _} ->

  # Socket id's are topics that allow you to identify all sockets for a given user:
  #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
  # Would allow you to broadcast a "disconnect" event and terminate
  # all active sockets and channels for a given user:
  #     PelableWeb.Endpoint.broadcast("user_socket:#{}", "disconnect", %{})
  # Returning `nil` makes this socket anonymous.
  def id(_socket), do: nil

The token You are passing is not a real token… is that on purpose?

Parameters: %{"token" => "same token", "vsn" => "2.0.0"}

That’s not the actual token I see, I just thought it would be insecure to share it? @kokolegorille

I use the Endpoint to sign my token, not the socket… not sure it changes something… Those are helpers I am using to sign and verify token.

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

  def verify_token(token), do: Phoenix.Token.verify(Endpoint, @salt, token, max_age: @max_age)

Also I am not sure it is efficient to make db query with token… it should contain your identity already.

When you use Endpoint you mean it like Phoenix.Endpoint or MyAppWeb.Endpoint?

That’s true I’ll change that :sweat_smile:

I mean this one (I aliased mine)

Right, I’ll try using an endpoint instead to see if that helps thanks! @kokolegorille