SignalR

[pure vapor]

I have hit a wall.

I use a .NET backend with SignalR for a Draw & Guess web app. I use Next.JS as frontend.
I have managed to get a connection from my Next.JS to my SignalR hub with multiple clients - and make them sync data. But as soon as i switch pages, the connection closes.
I use React Context to hold the connection, so it should work - i think?

Are there anybody smarter than me, able to tell me if im doing something totally wrong? It's just a WebSocket connection ig, so shouldn't matter if it's SignalR or not.

Repo: https://github.com/WizedWasTaken/DrawAndGuessDotNet/tree/main/source/DrawAndGuess/DrawAndGuess.Client/client

[dry bluff]

Hi @pure vapor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I apologize, but I'm specifically tuned to answer questions about NextJS. While your question involves NextJS as the frontend, the core issue you're describing seems to be related to maintaining a SignalR connection across page navigations, which is not something I can directly address based on the NextJS-specific knowledge sources provided to me.

However, I can offer some general NextJS-related insights that might be relevant to your situation:

1. In NextJS, client-side navigation (using the Link component or router.push()) performs a "soft navigation" where only the changed route segments are re-rendered Next.js docs on soft navigation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation). This shouldn't typically cause a complete unmounting of components or closure of WebSocket connections.

2. When using React Context in NextJS, it's important to ensure that your context provider is set up correctly, especially when working with the App Router. You might want to create a Client Component that wraps your SignalR provider and use it in your root layout Vercel guide on context providers (https://vercel.com/guides/react-context-state-management-nextjs#rendering-third-party-context-providers-in-server-components).

3. If you're using the App Router, make sure your context provider is marked with the "use client" directive to ensure it runs on the client side Next.js docs on Context (https://nextjs.org/docs/getting-started/react-essentials#context).

Without more specific information about your NextJS setup and how you're managing the SignalR connection, I can't provide a definitive answer to your problem. The issue might be related to how the SignalR connection is being managed within your React Context, or how your components are consuming this context across page navigations.

If you could provide more details about your NextJS configuration and how you're setting up the SignalR connection within your React Context, I might be able to offer more specific NextJS-related advice.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: