How to start debugging a web socket connection?

[csisnett]

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 https://pelable.com/js/chatroom.js

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



window.onload = function () {
    convert_to_local_datetimes();
    prepare_rendered_messages();
    console.log("user token: ")
    console.log(get_user_token())
    let socket = new Socket("/socket", {params: {token: get_user_token()}})
    socket.connect()
    Chat.init(socket);
    ChatNotification.init(socket);
    ChatPresence.init(socket);
    };

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", "//pelable.com"],
  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!

[kokolegorille]

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

[csisnett]

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, _} ->
        :error
    end
  end

  # 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:#{user.id}", "disconnect", %{})
  #
  # Returning `nil` makes this socket anonymous.
  def id(_socket), do: nil
end

[kokolegorille]

@csisnett

Phoenix.Token.verify(socket, "secret ", token, max_age: 86400)

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

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

[csisnett]

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

[kokolegorille]

@csisnett

Phoenix.Token.verify(socket, "secret ", token, max_age: 86400)

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: user.id, name: user.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.

@csisnett

socket = assign(socket, :current_user, Repo.get!(User, user_id))

[csisnett]

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

@kokolegorille

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

That’s true I’ll change that

[kokolegorille]

@csisnett

MyAppWeb.Endpoint?

I mean this one (I aliased mine)

[csisnett]

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