Socket.io 사용하여 채팅 구현하기

메신저를 만들거나 채팅방을 만들 때 자주 사용하는 Socket을 설치 및 사용하는 글입니다.

// npm
$ npm i socket.io

// yarn
$ yarn add socket.io

이제 설치가 완료되었으니 사용법을 알아보도록 하겠습니다.

const express = require('express')
const app = express()

const io = require('socket.io')(app)

// 클라이언트와 연결되었을 때
io.on('connection', client => {
   client.on('event', data => {
       // 서버에서 받을 이벤트가 발생했을 때 처리
   })
   client.on('disconnect', () => {
       // 클라이언트의 연결이 끊겼을 때의 처리
   })
})

app.listen(3000)

연결해야하는 서버가 없다면 독자적으로 수행 가능합니다. 

const io = require('socket.io')()
io.on('connection', client => {   })
io.listen(3000)

 

사용방법

io.on('connection', client => {

   // 서버에서 받을 이벤트명을 입력
   client.on('requestEventName', data => { 
       
       // 데이터 처리
       // ...
       
       // 서버로 보낼 이벤트명을 입력
       client.emit('sendEventName', data)
   })
})

 

예시

클라이언트

<script src=”/socket.io/socket.io.js”></script>

...

<script>
$(() => {
   const socket = io()
   $('form').submit(() => {
      socket.emit('send', document.getElementById('msg').value)
      document.getElementById('msg').value = ''
      return false
   })
   
   socket.on('send', (msg) => {
      let node = document.createElement('li')
      let text = document.createTextNode(msg)
      node.appendChild(text)
      document.getElementById('msg').appendChild(node)
   })
})
</script>

 

서버

 

const express = require('express')
const app = express()
const io = require('socket.io')(app)
const socketList = []

app.use('/', (req, res) => {
   res.sendFile(__dirname + '/chat.html')
})

io.on('connection', socket => {
   socketList.push(socket)
   socket.on('send', data => {
      console.log(data)
      socketList.forEach((item) => {
         if(item != socket) {
            item.emit('send', data)
         }
      })
   })
   
   socket.on('disconnect', () => {
      socketList.splice(socketList.indexOf(socket), 1)
   })
})

app.listen(3000)

 

네임스페이스

Socket.io에는 네임스페이스도 존재하는데 쉽게 이해하자면 채팅방이라고 보면 됩니다. 서버에서는 of 메소드를 사용하여 네임스페이스를 변경합니다.

const chat = io.of('/chat')
chat.on('connection', socket => {
   // ...
})

클라이언트에서는 연결 시 주소를 바꿔줍니다. 주소 뒤에 네임스페이스를 붙여줍니다.

io.connect('address/chat', socket => {
   chatList.push(socket)
   socket.on('send', data => {
      // ...
   })
})

위와 같이 네임스페이스를 변경하고 네임스페이스별로 따로 이벤트를 연결하는 것이 가능합니다. 이렇게 하는 이유는 필요한 사람들에게만 메시지를 보내기 위함입니다. 

 

나를 제외한 전체

io를 사용하는 것이 아닌 socket 안에 broadcast 객체를 사용합니다.

socket.broadcast.emit('sendExceptMe', data)

 

특정인

특정 한 사람에게 개인 메시지를 보낼 때 사용합니다. to 메소드를 사용합니다.

io.to(socketId).emit('eventNameForOne', data)

 

특정 그룹

특정 그룹에게도 메시지를 보낼 수 있는데, 개인 또는 집단이 그 그룹에 먼저 들어가있는 상태에서 가능합니다. 네임스페이스보다는 작은 개념입니다.

// 그룹 참여
socket.join(roomId)

// 그룹 떠나기
socket.leave(roomId)

 

그룹의 목록과 조회

그룹안의 구성원과 소켓 정보를 확인하는 방법입니다.

io.adapter.rooms
io.of(namespace).adapter.rooms
socket.adapter.rooms

 

그 외 소스

아래의 리포지토리를 참고해서 개발하는 방법도 좋을거 같습니다!

https://github.com/DOZAKA/socket.io

DOZAKA/socket.io