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

Phoenix Forum Questions / Help
, , ,
1

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?

2

What is the error?

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

3

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

4

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

5

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

6

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.

7

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.

8

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

9

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.

10

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

5 Likes
11

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!!!

4 Likes