How to set the “Sec-WebSocket-Protocol” header in Phoenix?

Hello, im trying to connect websocket for using absinthe subscriptions, but i have a error in google chrome because of this header “Sec-WebSocket-Protocol”. There some way to pass a list of protocols in phoenix framework?

What is the error?

I didn’t think GraphQL subscriptions had a specific protocol they used.

There’s no mention of it here, https://github.com/apollographql/subscriptions-transport-ws/blob/master/PROTOCOL.md

i had this error on connect using Chrome: “Error during WebSocket handshake: Sent non-empty ‘Sec-WebSocket-Protocol’ header but no response was received”

That is on the client side? What JS client are you using to connect?

We use Apollo-Link-Ws. I did some research and the chrome navigator use this “Sec-WebSocket-Protocol" to make a handshake with back-end, but back-end needs the same protocol in the list to make this. The same config works on firefox with no errors.

I’ve always just used Cowboy, which makes it simple enough to add custom headers to the socket. From some previous posts, I don’t think Phoenix exposes this functionality unfortunately.

This is bad :confused:
I think there is no way to do that, tanks dude!

It does appear that you can provide custom protocols to the Apollo Link client, https://github.com/apollographql/subscriptions-transport-ws/blob/cf3f492f93aa1df812f630327dc5eea33999fb71/src/test/tests.ts#L1327

Maybe you can override the defaults to pass nothing, or whatever the Phoenix Channels are sending back.

Check the subprotocols section of endpoint websocket docs:
https://hexdocs.pm/phoenix/Phoenix.Endpoint.html#socket/3-websocket-configuration

3 Likes

Ah cool! I tried this and it works here.

I put this on my endpoint.ex:

socket "/socket", AppWeb.UserSocket,
    websocket: [
      subprotocols: ["graphql-ws"]
    ],
    longpoll: false

Thank you very much for help guys!!!

2 Likes