How to display message when user disconnects from chat room in socket.io - node.js

Question

I am working on a project in which there is a chat room. The messaging and the joining message is working fine but I don't know how to display a message when someone disconnects. I don't have much knowledge about socket.io as you will see in the code below.
(Edit)
Server Code(Express/Node)
io.on('connection', socket => {
socket.on('message', ({ name, message }) => {
io.emit('message', { name, message })
})
socket.on('join' , (name)=>{
console.log(name);
socket.broadcast.emit("join" , name.usnm.toUpperCase() + " just joined")
})
socket.on('pre_disconnect', (name) => {
console.log(name);
socket.broadcast.emit("pre_disconnect" , name.usnm.toUpperCase() + " just left")
})
})
Client Code(React.js)
const socketRef = useRef()
useEffect(
() => {
socketRef.current = io.connect("http://localhost:4000")
socketRef.current.on("message", ({ name, message }) => {
setChat([ ...chat, { name, message } ])
})
socketRef.current.on("join", (usnm) => {
setChat([ ...chat, {name:usnm} ])
})
socketRef.current.on("pre_disconnect", (usnm) => {
setChat([ ...chat, {name:usnm} ])
})
},
[ chat ]
)
useEffect(
() => {
let usnm = sessionStorage.getItem("User");
socketRef.current.emit("join" ,{usnm});
return () => {
socketRef.current.emit("pre_disconnect" ,{usnm});
socketRef.current.disconnect()
}
},
[ ]
)
In the code above the pre_disconnect doesn't do anything. Code works the same with or without it.

Answer 1

In the server app, define a pre_disconnect event which will be similar to the join event.
io.on('connection', socket => {
socket.on('message', ({ name, message }) => {
io.emit('message', { name, message })
})
socket.on('join', (name) => {
console.log(name);
socket.broadcast.emit("join" , name.usnm.toUpperCase() + " just joined")
})
// Fire this before disconnecting the socket
socket.on('pre_disconnect', (name) => {
console.log(name);
socket.broadcast.emit("pre_disconnect" , name.usnm.toUpperCase() + " just left")
})
})
In the first useEffect hook call, a new socket connection is made and closed everytime there is a chat state update. This means that number of messages in the current session will be generated by amount of socket connects/disconnects. From React Docs
The default behavior for effects is to fire the effect after every completed render. That way an effect is always recreated if one of its dependencies changes. However, this may be overkill in some cases, like the subscription example from the previous section. We don’t need to create a new subscription on every update, only if the source prop has changed. To implement this, pass a second argument to useEffect that is the array of values that the effect depends on.
Similarly, unless you explicitly need to create and close a new connection on every chat update, avoid it for performance reasons.
In the react app, fire pre_disconnect event with usnm, before calling socketRef.current.disconnect() and add the appropriate handler similar to join.
const socketRef = useRef()
useEffect(() => {
// socketRef.current = io.connect("http://localhost:4000")
if (socketRef.current) {
// Add socketRef as dependency and check if socketRef.current exists then continue with listeners
socketRef.current.on("message", ({ name, message }) => {
setChat([...chat, { name, message }]);
});
socketRef.current.on("join", (usnm) => {
setChat([...chat, { name: usnm }]);
});
// handler for disconnect message
socketRef.current.on("pre_disconnect", (usnm) => {
setChat([...chat, { name: usnm }]);
});
}
// return () => socketRef.current.disconnect()
}, [chat, socketRef]);
useEffect(
() => {
// Here, creates a socket connection only when component renders the first time. Similar to componentDidMount() in class components
socketRef.current = io.connect("http://localhost:4000")
let usnm = sessionStorage.getItem("User");
socketRef.current.emit("join" ,{usnm});
// Disconnect the socket when component is to be unmounted from DOM. Similar to componentWillUnmount() in class components
return () => {
socketRef.current.emit("pre_disconnect" ,{usnm});
socketRef.current.disconnect()
}
},
[ ]
)
Edit:
You were getting that error because socketRef was not initialized. I have added socketRef as a dependency and wrapped the code inside an if condition. Please check the changes.