CODEWITHSUNDEEP
node.jsreactjswebsocketsocket.io
SebastianH2
SebastianH2

Reputation: 37

Error: "disconnect" is a reserved event name, why am I getting this error?

I am building a chat application using react, node.js and socket.io.

I have the following hook that I use for connecting and disconnecting

useEffect(() => {
        const { name, room } = queryString.parse(location.search)
        socket = io(ENDPOINT)

        setRoom(room)

        // New user joins room
        socket.emit('join', { name, room }, (userNamesPresent, error) => {
            setUsersPresent(userNamesPresent.userNamesPresent)
        })

        return () => {
            // User leaves room
            socket.emit('disconnect')

            socket.off()
        }
    }, [ENDPOINT, location.search])

and I handle it in node like this

io.on("connection", socket => {
    socket.on("join", ({ name, room }, callback) => {
        const { error, user } = addUser({id: socket.id, name, room})
    if(error) {
        return callback({error})
    }
    // Emitting a welcome message
    socket.emit('message', {user: 'admin', text: `Welcome to the chat ${user.name}`})

    // Broadcasting to everyone except the connecting user
    socket.broadcast.to(user.room).emit('message', {user: 'admin', text: `${user.name} has joined ${user.room}`})

    socket.join(user.room)

    // Get the users in room 
    const usersPresent = getUsersInRoom(user.room)

    const userNamesPresent = usersPresent.map(user => {
        return {name: user.name}
    })

    callback({userNamesPresent})
})

socket.on('message-sent', (message, callback) => {
    console.log(socket.id)
    const user = getUser(socket.id)

    io.to(user.room).emit('message', {user: user.name, text: message} )

    callback()
})

socket.on("disconnect", () => {
    console.log("User has disconnected")

    removeUser(socket.id)
})
})

When I leave the page (go back to the previous page for example) I get the following error

enter image description here

Upvotes: 1

Views: 5841

Answers (3)

yaach
yaach

Reputation: 462

I have a similar issue, not using react but just nodejs and socket. The error 'disconnect is a reserved event name' shows when reloading the page and or closing the browser. Here is the snippet:

socket.on('disconnect', function () {
        console.log('user disconnected: ', socket.id);

        // remove this player from our players object
        delete players[socket.id];

        // emit a message to all players to remove this player
        io.emit('disconnect', socket.id);

});

Upvotes: 0

Jaydeep Deshpande
Jaydeep Deshpande

Reputation: 15

As per socket.io website there is disconnect is reserved keyword so you cannnot use it as socket.emit('disconnect') instead of it use it as socket.disconnect() and it will work.

Upvotes: 0

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

As per the docs, instead of doing socket.emit('disconnect') in your cleanup function of useEffect since disconnect is a reserved event name in Socket.io, you can use socket.disconnect().

Upvotes: 13

Related Questions