Laravel-websockets: Help with graphql

[4levels]

Hi,

I've been trying to use this package as drop in replacement for pusher in order to be able to work with GraphQL subscriptions. The dashboard works, I can send and receive events and I do have usage statistics, so all seems well. Whenever I try to connect to the websocket via GraphQL Playground I keep getting the following error:
426 No Sec-WebSocket-Protocols requested supported

I've been comparing the request headers that your built in dashboard uses with the ones from GraphQL Playground and the only difference I can find is that GraphQL playground adds
Sec-WebSocket-Protocol: graphql-ws

Adding the protocol, version & client via query string parameters (like the dasboard does) doesn't seem to help, eg. protocol=7&client=js&version=4.3.1&flash=false

Could this mean this repository / ratchet doesn't understand the protocol graphql-ws? Am I overlooking something? Is it possible to use laravel-websockets with GraphQL and GraphQL-Playground?

Kind regards,

[crissi]

If you are using a custom websocket handler: https://docs.beyondco.de/laravel-websockets/1.0/advanced-usage/custom-websocket-handlers.html

you need to implement: WsServerInterface as well

and return

public function getSubProtocols() {
        return ['graphql-ws'];
 }

[4levels]

Hi @crissi,

thanks for your feedback. Currently I'm not using any custom handlers. If someone can tell me I SHOULD use a custom handler for the protocol handling of GraphQL Playground graphql-ws, I'll be happy to go down that route.

But since I'm not even sure this is the reason why I keep getting the forementioned error, I'd rather await someone elses feedback, I can't imagine I'm the only one in the world trying to setup laravel-websockets as Pusher replacement for GraphQL Subscriptions.. :wink:

[crissi]

I am working on the same thing as you do. I got it to sort of work with the custom handler, at least it is receiving new data in the graphql playground. Still needs a lot of work and testing.

[lukadriel7]

Hello, since the issue is still open I thought I had to ask. I am planning to use both laravel-websocket and lighthouse to try the subscriptions. Have you been able to solve the issue you were having with the graphql playground ?

[stayallive]

A little off-topic but I wanted to leave a warning here for using this package in combination with Lighthouse.

Lighthouse uses the webhooks from Pusher to cleanup the subscriptions created on the server side, since this package does not support webhooks or similar the subscriptions will never be cleanup up on the server side which could bring your server to it's knees if it's running for an extended period of time. All subscriptions (still connected/valid or not) will accumulate over time and each subscription will be evaluated to see if the subscriber should be notified about updates.

This makes this package currently "incompatible" with Lighthouse (or the other way around depending on your viewpoint).

For the record, this works perfectly with Lighthouse except for the subscription cleanup which is a vital part to keep you subscriptions running in a timely manner which makes the combination not work currently.

[lukadriel7]

Hey @stayallive ,
From what I understand, you say that due to lighthouse using webhooks there will be a problem concerning the cleaning of subscriptions. Unless I am mistaken, laravel-websockets uses events to notify the dashboard about connections status. Is it possible to implement a custom solution to use those events as webhook replacement ? I haven't yet looked into the code source of either packages but I thought it might be possible to do it.

[stayallive]

I might be. But I did not have the time to look into it either :)

I'm not saying it will _never_ be possible, it just is not possible right now and I wanted to leave that as a warning for people that are attempting it in case they did not see this before it was too late.

There might be (easy) solutions to get it to working, but there is none out of the box right now. Something people who really want to use it might want to take into and your comment about the dashboard notifications might be a good step in the right direction indeed!

[lukadriel7]

@4levels and @crissi , can we have your take on this issue ?

[4levels]

Hi @crissi,

can you elaborate a bit to have the custom WsServerInterface class being used? I implemented it and added the custom subProtocol graphql-ws but I'm currently failing to grasp how my custom WsServerInterface class should be loaded. It seems not being referenced from the custom websocket handler as far as I can see..

Kind regards,

Erik

[crissi]

It has been a while since I played around with it.

`

class MyCustomWebSocketHandler implements MessageComponentInterface, WsServerInterface
{

public function __construct()
{

}

public function onOpen(ConnectionInterface $connection)
{
    ....
}

public function onClose(ConnectionInterface $connection)
{
    ...
}

public function onError(ConnectionInterface $connection, \Exception $e)
{
    ....
}



public function onMessage(ConnectionInterface $connection, MessageInterface $msg)
{
    ...
}


public function getSubProtocols()
{
    return ['graphql-ws'];
}
}`

and then in routes web.php

//workaround for it not to fail with logging
app()->singleton(WebsocketsLogger::class, function () {
    return (new WebsocketsLogger(new NullOutput()))->enable(false);
});

WebSocketsRouter::get('/graphql', MyCustomWebSocketHandler::class);

[lukadriel7]

Hello @crissi , Thank you for sharing a code snippet. I wanted to ask you about the lighthouse subscription cleanup mentioned by @stayallive ?
Did you find a way around it ?

[crissi]

Hello @crissi , Thank you for sharing a code snippet. I wanted to ask you about the lighthouse subscription cleanup mentioned by @stayallive ?
Did you find a way around it ?

Never used this in live code yet, I have no experience with lighthouse and don't fully understand how it works under the hood. I implemented it without using pusher though

[lukadriel7]

Ok thank you. My guess is laravel-websockets uses events to notify of the changes where pusher uses webhooks right ? If I am wrong, does this package implements the pusher webhooks in any other ways ?

[gehad17]

Hello All
Can anyone tell me how to use lighthouse graphql subscriptions, i did all the steps as explained here https://lighthouse-php.com/3.1/extensions/subscriptions.html but when mobile team (android and ios ) trying to use it, it asking them to enter websocket endpoint so how can i make this websocket with graphql lighthouse subscription, i know about laravel websocket in general but how to connect this websockets with graphql lighthouse subscription?

[enzonotario]

Hi all! I get it working, please check this: https://github.com/nuwave/lighthouse/issues/847#issuecomment-515107076

[lukadriel7]

Hello @enzonotario I saw you implementation. I haven't tried it yet but it seems that it doesn't work with other websockets implementation beside lighthouse subscription, can you please confirm ?

[enzonotario]

Yes, it is just for Lighthouse.

[binaryweavers]

Hi all! I get it working, please check this: nuwave/lighthouse#847 (comment)

@enzonotario thanks for the help there. I followed your guide as it is. everything running fine except the same issue of
Sec-WebSocket-Protocol: graphql-ws
I am still getting error
Error during WebSocket handshake: Unexpected response code: 426
I've also implemented the WsServerInterface and defined getSubProtocols() method as mentioned above but no effect.
Can you please guide me on this

[enzonotario]

@binaryweavers I don't implement the WsServerInterface. I just do what I described in the comment. Please try with just that code, if there are any error, I'm glad to help you!

[lukadriel7]

@enzonotario Hey, You talked about making a repository with the right configuration. Are you still planning to do so ?

[binaryweavers]

@enzonotario I am getting that error with or without implementing WsServerInterface.
Having the exact same code you specified but the
Error during WebSocket handshake: Unexpected response code: 426
regarding the header Sec-WebSocket-Protocol: graphql-ws

[enzonotario]

@lukadriel7 @binaryweavers yes, sorry I left this but I can do that these days. Please wait me until the weekend, I'll let you know when it is ready!

[enzonotario]

Hi @lukadriel7 @binaryweavers , please check the example here: https://github.com/nuwave/lighthouse/issues/847#issuecomment-529236052