How to maintain a persistent WebSocket connection across page navigations in Next.js 15?

I am trying to implement a real-time messaging system in my Next.js 15 application using socket.io-client.

Currently, I initialize my socket connection inside a useEffect hook inside a specific chat room page component. The real-time connection functions perfectly when a user stays on that page. However, as soon as the user uses a Next.js <Link> component to navigate to another view (like checking their profile or browsing the main feed), the page unmounts, the cleanup function runs, and the WebSocket connection completely disconnects.

When they navigate back to the chat room, a whole new handshake execution has to happen, creating a laggy experience and overloading my Node.js signaling server with constant reconnection events.

Here is my current initialization hook:

1// app/(root)/chat/[roomId]/page.tsx
2"use client";
3
4import { useEffect, useState } from "react";
5import { io, Socket } from "socket.io-client";
6
7export default function ChatRoom() {
8  const [socket, setSocket] = useState<Socket | null>(null);
9
10  useEffect(() => {
11    const socketInstance = io(process.env.NEXT_PUBLIC_SOCKET_SERVER_URL!);
12    setSocket(socketInstance);
13
14    return () => {
15      // Disconnects every single time the user navigates away
16      socketInstance.disconnect();
17    };
18  }, []);
19
20  return <div className="p-6">Chat Room View</div>;
21}

1// app/(root)/chat/[roomId]/page.tsx
2"use client";
3
4import { useEffect, useState } from "react";
5import { io, Socket } from "socket.io-client";
6
7export default function ChatRoom() {
8  const [socket, setSocket] = useState<Socket | null>(null);
9
10  useEffect(() => {
11    const socketInstance = io(process.env.NEXT_PUBLIC_SOCKET_SERVER_URL!);
12    setSocket(socketInstance);
13
14    return () => {
15      // Disconnects every single time the user navigates away
16      socketInstance.disconnect();
17    };
18  }, []);
19
20  return <div className="p-6">Chat Room View</div>;
21}

How to maintain a persistent WebSocket connection across page navigations in Next.js 15?

0 Answers

No Answers Found

Write your answer here

Top Questions

Popular Tags