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

freewebwithme

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?

10 comments

#absinthe #websockets

0 3177 10

2022-05-18 20:58:01 UTC

Showing Posts 1 to 10

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

fuelen

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?

Post #1

freewebwithme

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
I wonder if I need some kind of that packages in flutter project. something like this

Post #2

fuelen

Yes, definitely

Post #3

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

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 GitHub - vic/apollo-phoenix-websocket: An Apollo networkInterface for executing GraphQL queries via Phoenix Channels · GitHub on the Phoenix side to expose an Apollo server compatible websocket endpoint but I don’t know if it is up to date.

Post #4

freewebwithme

How can I use that packages in phoenix side?

Can you eleborate on this?

Post #5

redDwarf03

hello
have you find how to fix you issue in flutter about “missing key "topic"” please

Post #6

freewebwithme

What are you trying to do? trying to use subscription from Absinthe?
If yes, I have no idea.
I am using websocket from flutter to phoenix server using this package

Post #7