Node.js - Socket.io의 room관련 메서드

1. Join

서버에서만 작동하는 메서드며 연결된 소켓을 특정한 room에 참여시킬 때 사용한다. 하나의 room에만 참여시키는 게 아니라 여러 room에 참여시킬 수 있다.

io.on('connection', (socket) => {
    console.log('Socket connected:', socket.id);
    socket.join('roomA')
    socket.join('roomB') // 다른 room에도 참여시킬 수 있다.
})

위와 같이 코드를 작성하면 소켓에 연결되는 모든 클라이언트는 roomA와 roomB라는 room에 속하게 된다.

 

1-1. Query Parameter 지정

소켓에 연결하는 모든 클라이언트를 같은 room이 아닌 조건에 따라 달리 지정하려면 소켓을 연결하는 클라이언트 부분에서 query를 지정하여 분리할 수 있다.

// client
useEffect(() => {
    const roleId = Math.floor(Math.random() * 2) // generate randome roleId
    console.log('roleId: ', roleId)

    let socket

    if(roleId == 0) { // admin
        socket = io('<http://localhost:3000>', {
            query: { // query params
                'role': 'admin'
            }
        })
        socket.once('adminJoined', (data) => {
            console.log(data)
        }) // get admin joined message
    } else { // user
        socket = io('<http://localhost:3000>', {
            query: { // query params
                'role': 'user'
            }
        })
        socket.once('userJoined', (data) => {
            console.log(data)
        }) // get user joined message
    }

    return () => {
        socket.removeAllListeners()
    }
}, [])

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

    let userRole
    if(typeof socket.handshake.query.role != 'undefined') {
        userRole = socket.handshake.query.role

        switch(userRole) {
            case 'admin':
                socket.join('adminRoom')
                break
            case 'user':
                socket.join('userRoom')
                break
        }
    }

    io.to('adminRoom').emit('adminJoined', 'admin joined')
    io.to('userRoom').emit('userJoined', 'user joined')
})

• socket.handshake.query: 클라이언트에서 socket연결을 할 때 지정한 query를 확인할 수 있다.

userRole이 admin이면 admin전용 room에 참여하고 userRole이 user면 user전용 room에 참여하게 된다. 소속된 room에 따라 전달되는 이벤트 명과 데이터가 달라진다. 간단하게 랜덤 함수로 roleId를 지정했기 때문에 브라우저를 여러 번 새로 고침하면 참여하는 room이 달라지는 것을 확인할 수 있다.

 

1-2. leave()

서버에서만 작동하며 소켓을 특정 room에서 제거하는 메서드이다.

// server
socket.leave('adminRoom') // 소켓을 adminRoom에서 제거

leave()를 사용하여 room에서 제거하면 더 이상 해당 room에 전달되는 메시지가 broadcast 되지 않는다. 참여했던 room에서 제거하는 것 뿐이지 소켓 연결 자체를 끊는 것은 아니기 때문에 해당 소켓을 target으로 발생하는 on(), emit() 등의 이벤트는 정상 작동한다.

 

2. of()

클라이언트에서 소켓 연결을 할 때 namespace를 지정하면 서버 측에서 namespace별 이벤트를 등록하는 메서드다.

 

2-1. client namespace

// client
useEffect(() => {
    const roleId = Math.floor(Math.random() * 2)
    console.log('roleId: ', roleId)

    let socket

    if(roleId == 0) {
        socket = io('<http://localhost:3000/admin>')
    } else {
        socket = io('<http://localhost:3000/user>')
    }

    return () => {
        socket.removeAllListeners()
    }
}, [])

namespace를 지정하려면 소켓 서버 주소 뒤에 namespace 경로를 붙여서 연결하면 된다. 위와 같이 할 경우 /admin과 /user namespace가 생성되게 된다. 기존 방식대로 io(’http://localhost:3000’)로 소켓 서버 연결을 하면 namespace는 /로 지정된다. 즉 기본 namespace는 /이며 다른 namespace를 지정하여 연결을 할 수 있다. /가 아닌 다른 namespace가 지정되면 server에서도 이에 적합하게 코드를 변경해야 한다.

 

2-1. server namespace

// server
io.of('/admin').on('connection', (socket) => {
    console.log('admin connect')
}) // namespace가 /admin인 경우

io.of('/user').on('connection', (socket) => {
    console.log('user connect')
}) // namespace가 /user인 경우

• io.on(’connection’): 기본 namespace /의 connection 이벤트다. namespace가 지정되지 않으면 자동으로 namespace가 /로 설정된다.

namespace가 지정되면 of()를 사용하여 namespace를 지정하여 연결된 클라이언트를 처리한다. of() connection 이벤트의 콜백 함수 안에서 room을 지정하고 emit(), on()을 사용하여 소켓 이벤트를 처리할 수 있다.

 

---

참고 사이트:

https://socket.io/docs/v4/server-api/

Server API | Socket.IO

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Math.random() - JavaScript | MDN

 

https://phsun102.tistory.com/203

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