correct socket.io implementation

I'm trying out socket io for my project to show online friends, and I was wondering (actually, it looks kind of strange to me) that whenever I try to rerender the page (it doesn't matter if a user changes his profile info or send a friend req) the useEffect which is in charge of initializing the socket will disconnect and reconnect.

Well... I agree that if the page is being refreshed or closed, the socket should be closed, but not whenever a user sends a friend request or changes his profile info. I just started to include the socket and the functionality is not full but so far at the beginning, having these various reconnections and creation of Sockets is strange. Plus, my main concern shows itself on rerender; the socket will be disconnected (which is normal) and won't connect back (which is abnormal), but I only want this behavior on actual refreshes or logouts.

File (Client): socket.js:

import { io } from 'socket.io-client';
export const initializeSocket = (token, userInfoQuery, setOnlineFriends, setSocket) => {
if (token && userInfoQuery) {
const socket = io(process.env.REACT_APP_API_URL, { auth: { token } });
const friendIds = userInfoQuery.friends
socket.emit("userFriends", friendIds);
socket.on("onlineUsers", (users) => {
setOnlineFriends(users);
});
socket.on("addFriend", (friend) => {
console.log("Received friend request:", friend);
});
socket.on("removeFriend", (friend) => {
console.log("Received friend request:", friend);
});
setSocket(socket);
return socket;
}
return null;
};

File (Client): App.js:

export default function App() {
const { token, logout, login } = useContext(AuthContext);
const [onlineFriends, setOnlineFriends] = useState([]);
const [socket, setSocket] = useState(null);
const userInfoQuery = useQuery("userInfo", async () => {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/api/user`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
return response.data;
});
const userBooksQuery = useQuery("userBooks", async () => {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/api/user/books`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
return response.data;
});
useEffect(() => {
if (socket) {
socket.connect();
}
if (token && userInfoQuery.data && !socket) {
initializeSocket(token, userInfoQuery.data, setOnlineFriends, setSocket);
}
return () => {
if (socket) {
socket.disconnect();
}
};
}, [token, userInfoQuery.data, socket]);
return ( ...
)

As you can see, I initiated the socket and all its functionality on one useEffect and those dep array. Not having the userInfoQuery as dep would not rerender the page since online friends are coming from the socket.

File (Server): socketController.js:

const knexConfig = require("../knexfile");
const { knex } = require("knex");
const db = knex(knexConfig);
const io = require("socket.io");
const jwt = require("jsonwebtoken");
require("dotenv").config();
module.exports.socketController = (io) => {
const onlineFriends = new Map();
io.on("connection", async (socket) => {
console.log(`A user connected ${socket.id}`);
try {
const token = socket.handshake.auth.token;
const decoded = jwt.verify(token, process.env.JWT_SIGN_KEY);
const userId = decoded.user_id;
await db("user").where("user_id", userId).update({ is_online: 1 });
const user = await db("user").where("user_id", userId).first();
onlineFriends.set(userId, user);
socket.join(userId);
const onlineFriendList = Array.from(onlineFriends.values());
socket.emit("onlineUsers", onlineFriendList);
socket.on("userFriends", async (friendsList) => {
friendsList.forEach((friend) => {
socket.join(friend.friend);
});
const onlineUsers = await db("user")
.whereIn(
"user_id",
friendsList.map((friend) => friend.friend)
)
.andWhere("is_online", 1);
onlineUsers.forEach((user) => onlineFriends.set(user.user_id, user));
const updatedOnlineFriendList = Array.from(onlineFriends.values());
socket.broadcast.emit("onlineUsers", updatedOnlineFriendList);
});
socket.on("addFriend", async (friendId) => {
const recipientUser = onlineFriends.get(friendId); 
if (recipientUser) {
const recipientSocket = io.sockets.sockets.get(recipientUser.socket_id); 
if (recipientSocket) {
recipientSocket.emit("addFriend", userId);
}
}
});
socket.on("removeFriend", async (friendId) => {
const recipientUser = onlineFriends.get(friendId);
if (recipientUser) {
const recipientSocket = io.sockets.sockets.get(recipientUser.socket_id); 
if (recipientSocket) {
recipientSocket.emit("removeFriend", userId);
}
}
});
socket.on("disconnect", async () => {
await db("user").where("user_id", userId).update({ is_online: 0 });
onlineFriends.delete(userId);
const updatedOnlineFriendList = Array.from(onlineFriends.values());
socket.broadcast.emit("onlineUsers", updatedOnlineFriendList);
console.log(`${socket.id} disconnected`);
});
} catch (error) {
console.error("Authentication error:", error.message);
socket.disconnect();
}
});
};

I feel the server-side is pretty much fine in terms of sending back the online friend users. again if the server-side had some problem or you had suggestions on it, feel free to let me know...

each user object if like this :

{
avatar_image: "https://i.pravatar.cc/150?img=13"
​​email: "ross001@gmail.com"
​​favorite_genre: "comedy"
​​first_name: "ross"
​​friends: Array [ {…} ]
​goal_set: 9
last_name: "test"​​
username: "rosss001"
}

Although not being efficient in useEffect, I tried to do socket.connect() to attempt to reconnect to the socket, but it seems not to work. Also, when a user changes his profile info, I tried to in my component refetch the data to trigger the useEffect by : queryClient.refetchQueries("userInfo"); . again it seems it rerenders and disconnects the whole socket and causes the problem altogether. on the other hand, I need to rerender the page to inform the user and the changes made to his account! The socket.connect() at the beginning of useEffect was my ultimate try...

Main problem here is dependencies in your useEffect, whenever your dependencies values changes your App component is re-rendering. This means your return function in useEffect is executing. To solve this problem try seperating your socket logic and user logic

import { io } from 'socket.io-client';
const SocketContext = createContext()
export default function App() {
const {token, logout, login} = useContext(AuthContext);
const [socket, setSocket] = useState(null);
useEffect(() => {
if (token && !socket) {
const socket = io(process.env.REACT_APP_API_URL, { auth: { token } });
socket.on("connect", () => {
setSocket(socket);
})
}
return () => {
if (socket) {
socket.disconnect();
}
};
}, [token, socket]);
if (!socket) return <p>Loading</p>
return (
<SocketContext.Provider value={{socket}}>
<UserControlComponent/>
</SocketContext.Provider>
)
}

Code given above provides your UserComponent with already connected io-socket object. With socket object you can do any action you want.

Example:

function UserControlComponent() {
const {socket} = useContext(SocketContext)
const {token} = useContext(AuthContext);
const [onlineFriends, setOnlineFriends] = useState([]);
const userInfoQuery = useQuery("userInfo", async () => {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/api/user`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
return response.data;
});
const userBooksQuery = useQuery("userBooks", async () => {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/api/user/books`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
return response.data;
});
useEffect(() => {
socket.on("onlineUsers", (users) => {
setOnlineFriends(users);
});
socket.on("addFriend", (friend) => {
console.log("Received friend request:", friend);
});
socket.on("removeFriend", (friend) => {
console.log("Received friend request:", friend);
});
}, [socket])
return (
<p>Your user logic</p>
)
}

And try to use socket.emit("signal", data) in event handlers