Disconnect during handshake

[addudley]

This is my first attempt at using anything with graphql. Just trying to get a simple example running. I followed the setup instructions provided, including the creation of the "hello world" subscription and an exact copy of the routing.py file.

When I try to connect to the websocket server from my web browser, my server displays the following:
INFO 2020-06-08 17:10:53,544 runserver 105285 140070039136000 WebSocket HANDSHAKING /graphql/ [127.0.0.1:41850] WebSocket DISCONNECT /graphql/ [127.0.0.1:41850] INFO 2020-06-08 17:10:57,761 runserver 105285 140070039136000 WebSocket DISCONNECT /graphql/ [127.0.0.1:41850]

and the browser displays
WebSocket connection to 'ws://localhost:8000/graphql/' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET

I can't seem to complete the handshake, and don't receive any error to help debug

[jaydenwindle]

Hi @addudley!

I wonder if the GraphQL client setup in your browser is causing some issues here - can you share any more details about how that is set up so that I can help you debug it? Also, are you running your Django app using ./manage.py runserver locally?

Could you also try testing the "hello world" subscription you created using something like GraphQL Playground to see whether it's an issue at the subscription layer?

[techknowfile]

Thanks for the fast response, @jaydenwindle !

The good news is, you put me on the right track to figuring out that it isn't completely broken. I installed GraphQL Playground and was able to successfully subscribe to "hello"! In doing so, you also made me realize that I needed to configure a separate graphql endpoint for graphene, as well.

I had been trying to connect to the websockets using both a websocket client and using ws = new WebSocket('ws://localhost:8000/graphql/') (with the same results). If you have any insights into why these may not be working, great, but if not no worries!

To answer your question, yes I am using ./manage.py runserver.

Now on to figuring out exactly how the demo "hello world" subscription works and the syntax required, and the many other questions that have sprung into my head while figuring this one out!

edit: I have a few general questions regarding using this module that I think you'd be able to answer off the top of your head. If there's an appropriate channel that I may be able to reach you and get 5 minutes of your time, lmk!

[jaydenwindle]

Ok awesome! Glad it worked in Playground.

My guess is that it's an issue with your client-side GraphQL setup. What kind of stack are you using on the front end? Have you tried setting up subscriptions using something like Apollo Client?

Feel free to ping me in our gitter channel and I'll help out with your additional questions however I can!

[DricoGrosch]

Pass 'graphql-ws' on the subprotocol parameter on the client side worked for me.
ws = new WebSocket('ws://localhost:8000/graphql/', 'graphql-ws')