Using WebSockets with Next.js

taco_truck_tom

I'm wondering what's the best approach to connect into my WebSockets server using Next.js' pages? I'd like that the user could navigate through the pages with one connection, and when he closes the page he also closes the WebSockets connection. I tried using React's Context API: const WSContext = createContext(null); const Wrapper = ({ children }) => { const instance = WebSocket("ws://localhost:3000/ws"); return <WSContext.Provider...

Originally asked by Cholewka on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

There are multiple things that need to be done in order for ws to work on Next.js. Firstly, it is important to realize where do I want my ws code to run. React code on Next.js runs in two environments: On the server (when building the page or when using ssr) and on the client. Making a ws connection at page build time has little utility, thats why I will cover client-side ws only. The global Websocket class is a browser only feature and is not present on the server. Thats why we need to prevent any instantiation until the code is run in the browser. One simple way to do so would be: export const isBrowser = typeof window !== "undefined"; export const wsInstance = isBrowser ? new...

Full answer by Filip Kaštovský: https://stackoverflow.stackexchange.com/a/68345557 (CC BY-SA 4.0).

Need it done for your business? UphillTech.