Subscriptions fail to create WebSocket connections

Describe the Bug

I have a FastAPI server with Strawberry. It requires to have a WebSocket system for chat functionality and hence it uses the Subscriptions. While the server is up the WebSocket connection gets created in the playground of one window and doesn't in another window.

The developer tools console gives the following error:

WebSocket connection to 'wss://my_url.com/api/graphql' failed:

In the network tab, except the request URL everything is empty. Further, there are no errors visible in the server logs

The setup is as below:

@strawberry.type
class Subscription:

    @strawberry.subscription
    async def test(self, data: str) -> AsyncGenerator[str, None]:
        print("Test Subscription")
        yield "Hello World"
schema = strawberry.Schema(query=Query, subscription=Subscription, mutation=Mutation)

graphql_app = GraphQLRouter(schema, graphiql=None)

app = FastAPI(docs_url="/docs", redoc_url=None)

audio_router = APIRouter()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allows all origins
    allow_credentials=True,
    allow_methods=["*"],  # Allows all methods
    allow_headers=["*"],  # Allows all headers
)

app.include_router(graphql_app, prefix="/api/graphql")

In the graphql playground i get:

{
  "errors": [
    {
      "isTrusted": true
    }
  ]
}

Now, I have tried it in multiple browsers, their windows on multiple operating systems as well.

The problem doesn't occur on Windows Chrome browsers and Mac Safari

Though it is intermittently faced on MacOS chrome browser. The weird part is that it on the chrome browser, it works fine in one window while doesn't in another.

I faced this initially on the deployed server which has TLS but it is reproducible locally as well (again happens 50% of times).

System Information

Operating system: Mac OS Sonoma
Strawberry version (if applicable): 0.215.1

Additional Context

Upvote & Fund

We're using Polar.sh so you can upvote and help fund this issue.
We receive the funding once the issue is completed & confirmed by you.
Thank you in advance for helping prioritize & fund our backlog.

strawberry-graphql / strawberry