No route found for get /socket while trying to connect via websocket from client using Absinthe

Hi I am trying to send a subscription to server that is using absinthe graphql.
But I got an error in client side and server side.
in client side(flutter)

 Connecting to websocket: ws://192.168.1.11:4000/socket...
There was an error causing connection lost: WebSocketException: Connection to 'http://192.168.1.11:4000/socket#' was not upgraded to websocket

and in my phoenix application

[info] GET /socket
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /socket (JaangWeb.Router)

So I don’t know what is causing this error.
in endpoint.ex

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

in application.ex

def start(_type, _args) do
    children = [
      MyAppWeb.Endpoint,
      {Absinthe.Subscription, MyAppWeb.Endpoint}
    ]

    # See https://hexdocs.pm/elixir/Supervisor.html
    # for other strategies and supported options
    opts = [strategy: :one_for_one, name: MyApp.Supervisor]
    Supervisor.start_link(children, opts)
  end

in user_socket.ex

  use Absinthe.Phoenix.Socket, schema: MyAppWeb.Schema

What else should I check?

Well, the actual route is /socket/websocket. If you set longpoll key to true, then /socket/longpoll will be available too.
Check your routes using

mix phx.routes | grep /socket

Perhaps, you’re looking for a library for working with Phoenix channels rather than with raw websockets. Anyway, which client library do you use?

Hi Thanks for your reply.
Yes I can see /socket/websocket using mix phx.routes | grep /socket, so
I changed ws address to /socket/websocket.
Then I got a different error message says

[info] CONNECTED TO MyAppWeb.UserSocket in 35µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V1.JSONSerializer
  Parameters: %{}
[error] Ranch listener MyAppWeb.Endpoint.HTTP had connection process started with :cowboy_clear:start_link/4 at #PID<0.926.0> exit with reason: {%Phoenix.Socket.InvalidMessageError{message: "missing key \"topic\""}, [{Phoenix.Socket.Message, :from_map!, 1, [file: 'lib/phoenix/socket/message.ex', line: 35]}, {Phoenix.Socket, :__in__, 2, [file: 'lib/phoenix/socket.ex', line: 466]}, {Phoenix.Endpoint.Cowboy2Handler, :websocket_handle, 2, [file: 'lib/phoenix/endpoint/cowboy2_handler.ex', line: 175]}, {:cowboy_websocket, :handler_call, 6, [file: '/home/taedori/elixir-project/my_app/deps/cowboy/src/cowboy_websocket.erl', line: 528]}, {:cowboy_http, :loop, 1, [file: '/home/taedori/elixir-project/my_app/deps/cowboy/src/cowboy_http.erl', line: 254]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 226]}]}

I am using graphql and graphql-flutter in the client.

When I used React for client project, I used to use packages like these

import * as AbsintheSocket from "@absinthe/socket";
import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
import { Socket as PhoenixSocket } from "phoenix";

const socketLink = createAbsintheSocketLink(
  AbsintheSocket.create(new PhoenixSocket(WS_ENDPOINT))
);

To be honest, I don’t know what those packages actually doing :frowning:
I wonder if I need some kind of that packages in flutter project. something like this

Yes, definitely :slight_smile:

graphql-flutter is not compatible with the regular Absinthe.Phoenix wire protocol. Instead it uses the Apollo server protocol. If you wanted to use graphql-flutter on the client side you could try using https://github.com/vic/apollo-phoenix-websocket on the Phoenix side to expose an Apollo server compatible websocket endpoint but I don’t know if it is up to date.

How can I use that packages in phoenix side?

Can you eleborate on this?