Node.js - Socket.io의 기본 이벤트와 메서드

1. 기본 내장 이벤트

1-1. connection

// server
io.on('connection', (socket) => {
    console.log('Socket connected:', socket.id);
})

// Socket connected: bvZFBsat9v2GBCJYAAAJ

클라이언트가 서버에 연결되면 발생하는 이벤트다. 연결되면 클라이언트의 socket정보를 확인 할 수 있다.

 

1-2. disconnect

// server
io.on('connection', (socket) => {
    console.log('Socket connected:', socket.id);

    socket.on('disconnect', () => {
        console.log('Socket disconnected: ', socket.id)
    })
})

// Socket disconnected:  bvZFBsat9v2GBCJYAAAJ

// client
socket.disconnect() // client에서 소켓 연결 종료

클라이언트에서 socket.disconnect()가 실행되면 소켓 연결이 끊기게 된다. 연결이 끊기면 서버는 disconnect 이벤트가 호출된다.

 

2. 기본 메서드

2-1. emit()

서버에서 클라이언트로 또는 클라이언트에서 서버로 이벤트를 보낼 때 사용하는 메서드다. 이벤트 명과 데이터를 파라미터에 추가하여 사용한다.

// client
let fruitData = JSON.stringify({
    name: 'mango',
    price: 1000
})
socket.emit('fruit', fruitData)
// 이벤트 명: fruit
// 이벤트 데이터(payload): fruitData

// server
io.on('connection', (socket) => {
    console.log('Socket connected:', socket.id);

    socket.on('fruit', (fruitData) => {
        console.log('fruit data: ', fruitData)
    })
})

/*
    // not working
    io.on('fruit', (fruitData) => {
        console.log('fruit data: ', fruitData)
    })
*/

// fruit data:  {"name":"mango","price":1000}

emit메서드를 사용하여 클라이언트에서 fruit 이벤트를 생성한 후 이벤트 데이터를 서버에 보내면 on 메서드로 해당 이벤트를 받아 적절히 처리한다.

여기서 중요한 부분은 서버측 코드다. 클라이언트에서 넘어오는 이벤트를 받으려면 io.on(’connection’)를 통해 생성된 socket객체에 이벤트 리스너를 등록해야 한다. io객체는 서버 전체에 대한 이벤트를 처리하고 socket객체는 연결된 각 클라이언트에 대한 이벤트를 처리한다. 그렇기 때문에 클라이언트 별 이벤트를 처리하려면 io.on(’connection’)의 콜백 함수 안에서 socket 객체를 사용하여 처리해야 한다.

 

2-2. on()

이벤트 리스너를 등록할 때 사용하는 메서드다. 이벤트 명과 일치하는 이벤트가 발생하면 콜백 함수가 실행된다.

// server
io.on('connection', (socket) => {
    socket.on('fruit', (fruitData) => {
        console.log('fruit data: ', fruitData)
        socket.emit('fruit', 'event success')
    })
})
// fruit data:  {"name":"mango","price":1000}

// client
socket.emit('fruit', fruitData)
socket.on('fruit', (data) => {
    console.log(data)
})
// event success - 브라우저 콘솔에서 확인 가능

emit()와 on()을 사용하여 서버에서 클라이언트로 또는 그 반대로 클라이언트에서 서버로 양방향 간 이벤트 전달이 가능하다.

 

2-3. off()

등록된 이벤트를 제거할 때 사용한다. off를 사용하여 더 이상 사용하지 않은 이벤트를 제거하고 메모리 누수, 중복 실행과 원하지 않는 이벤트 실행을 방지하기 위해 사용한다.

// client
useEffect(() => {
    const socket = io('<http://localhost:3000>')
    const handleFruit = (data) => {
        console.log(data)
    }
    let fruitData = JSON.stringify({
        name: 'mango',
        price: 1000
    })
    socket.emit('fruit', fruitData)
    socket.on('fruit', handleFruit)

    /*
        // 콜백 함수가 익명 함수인 이벤트는 제거할 수 없다
        socket.on('fruit, (data) => {
            console.log(data)
        })
    */

    return () => {
        socket.off('fruit', handleFruit) // 이벤트 제거
    }
}, [])

off()로 이벤트를 제거하려면 on()으로 이벤트를 등록할 때 익명 함수가 아닌 함수 명이 지정된 함수가 콜백 함수에 위치해야 한다. 익명 함수는 참조할 수 없기 때문에 off()로 이벤트를 제거할 수 없다.

클라이언트에서 off()를 사용할 때는 보통 useEffect의 CleanUp 함수에 사용하여 컴포넌트가 언마운트될 때 이벤트가 제거되도록 사용한다. 클라이언트에서 이벤트를 제때 제거하지 않으면 같은 이벤트가 계속 쌓이게 되어 예상치 못한 중복 실행이 일어날 수 있다.

 

2-4. once()

on()으로 이벤트를 등록하면 이벤트가 발생할 때 마다 계속 실행이 된다. 하지만 once()로 이벤트를 등록하면 이벤트가 한 번만 발생하고 자동으로 해당 이벤트가 제거된다.

socket.once('fruit', (data) => {
    console.log(data)
})
// 이벤트가 발생하면 자동으로 제거

이벤트 발생 이후 자동으로 제거되기 때문에 콜백 함수에 익명 함수를 사용해도 되고 useEffect CleanUp 함수에 off()를 지정하지 않아도 된다.

 

2-5. removeAllListeners

on()과 once()로 등록된 이벤트를 모두 제거한다. removeAllListeners()를 사용하여 off()를 사용하여 이벤트를 일일이 제거하지 않아도 되는 장점이 있지만 잘못된 이벤트가 제거될 수도 있다는 단점이 있다.

useEffect(() => {
    return () => {
        socket.removeAllListeners() // 모든 이벤트 제거
    }
}, [])

off()와 같이 removeAllListeners()는 주로 useEffect의 CleanUp 함수에 사용한다. removeAllListeners()를 사용해도 connection, disconnect와 같은 내장 이벤트는 제거되지 않는다.

 

---

참고 사이트:

https://stackoverflow.com/questions/17287330/socket-io-handling-disconnect-event

 

https://socket.io/docs/v3/emitting-events/

Emitting events | Socket.IO

 

https://stackoverflow.com/questions/42322293/trying-to-understand-socket-io-socket-and-emit

 

https://stackoverflow.com/questions/17287330/socket-io-handling-disconnect-event

 

https://phsun102.tistory.com/89

React - Socket.io client/server 활용법