Скачать или смотреть keystone.js graphql subscriptions not working - code: 4406, reason: "Subprotocol not acceptable"

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!keystone.js graphql subscriptions not working - code: 4406, reason: "Subprotocol not acceptable"

I am developing a keystone app, where we want to use graphql subscriptions.
Followed the documentation:
https://keystonejs.com/docs/config/co... https://keystonejs.com/docs/config/co... and the keytone github example for websocket file:
https://github.com/keystonejs/keyston...
https://github.com/keystonejs/keyston...
The created subscriptions appear in the Apollo playground schema.
The websocket connection works as long as I comment out graphql-ws from the code. When I add wsUseServer coming from graphql-ws it gives the following errors on these two tries:

wscat -c ws://localhost:3000/api/graphql
Connected (press CTRL+C to quit)
Disconnected (code: 4406, reason: "Subprotocol not acceptable")
wscat -c ws://localhost:3000/api/graphql -s graphql-ws
error: Server sent no subprotocol

wscat -c ws://localhost:3000/api/graphql
Connected (press CTRL+C to quit)
Disconnected (code: 4406, reason: "Subprotocol not acceptable")

wscat -c ws://localhost:3000/api/graphql -s graphql-ws
error: Server sent no subprotocol
My websocket.ts code which is the same as the example, excepting logs and commented test lines for debugging:

import type http from 'http'
import { useServer as wsUseServer } from 'graphql-ws/lib/use/ws'
import { WebSocketServer } from 'ws'
import { PubSub } from 'graphql-subscriptions'
import { parse } from 'graphql'
import { type Context } from '.keystone/types'

// Setup pubsub as a Global variable in dev so it survives Hot Reloads.
declare global {
let graphqlSubscriptionPubSub: PubSub
}

// The 'graphql-subscriptions' pubsub library is not recommended for production use, but can be useful as an example
// for details see https://www.apollographql.com/docs/ap... export const pubSub = global.graphqlSubscriptionPubSub || new PubSub()
globalThis.graphqlSubscriptionPubSub = pubSub

export function extendHttpServer (
httpServer: http.Server,
commonContext: Context,
) {
console.log('HTTP Server:', httpServer);
console.log(commonContext.graphql.schema)

// Setup WebSocket server using 'ws'
const wss = new WebSocketServer({
server: httpServer,
path: '/api/graphql',
/*handleProtocols: (protocols) = {
return Array.from(protocols).includes('graphql-ws') ? 'graphql-ws' : null;
}*/
})

// Setup the WebSocket to handle GraphQL subscriptions using 'graphql-ws'
wsUseServer(
{
schema: commonContext.graphql.schema,
// run these onSubscribe functions as needed or remove them if you don't need them
onSubscribe: async (ctx: any, msg) = {
const context = await commonContext.withRequest(ctx.extra.request)
// Return the execution args for this subscription passing through the Keystone Context
return {
schema: commonContext.graphql.schema,
operationName: msg.payload.operationName,
document: parse(msg.payload.query),
variableValues: msg.payload.variables,
contextValue: context,
}
},
},
wss
)

//wsUseServer({ schema: commonContext.graphql.schema }, wss); // For testing
//const ws = new WebSocket('ws://localhost:3000/api/graphql', 'graphql-ws'); // For testing

// Optional: Log connection Source of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/