Socket IO

Socket IO 🙀

Socket?

• 소켓 → 프로토콜, ip주소, 포트넘버로 정의.

• 떨어져 있는 두 호스트를 연결해주는 도구로써 인터페이스 역할.

• 데이터를 주고 받을 수 있는 구조체로 소켓을 통해 데이터 통로가 만들어 진다.

• 소켓의 역할에 따라 클라이언트 소켓, 서버소켓으로 구분된다.

Socket IO : Websocket을 기반으로 실시간 웹 애플리케이션을 위한 JavaScript 라이브러리이다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 해주는 Node.js의 모듈이다.

❗ 웹 애플리케이션 : 장치의 운영 체제(OS)에서 로컬로 실행되는 컴퓨터 기반 소프트웨어 프로그램과 달리 웹 서버에서 실행되는 응용 프로그램 소프트웨어

❗ Websocket : 데이터가 누락되지 않게하는 tcp기반의 양방향통신을 제공하는 컴퓨터 프로토콜

---

사용 이유

Http 통신은 단방향 방식이고 연결이 유지가 안되기 때문에 매번 업데이트 유/무를 확인하기위해서 서버에 요청을 불러와야 한다.그리고 요청을 할때 마다 전체 데이터를 불러오게 되어있다. 그렇기 때문에 서버에 많은 부하가 생기게 됩니다

하지만 웹소켓은 양방향 통신을 지원하게 되어있고 또 서버와의 연결이 유지가 된 상태에서 데이터가 오갈수있게 해주기 때문에 실시간 데이터 전송이 가능해지게 된다. 이럴 때 Websocket을 이용한다.

(요약하자면 서버와 클라이언트가 연결되있는 상태를 만들어 주기 위해서 사용)

---

WebSocket vs socket.io

사실 애초에 둘은 다른 개념이다.

웹소켓은 양방향 소통을 위한 프로토콜이다. 프로토콜은 쉽게 말하자면 서로 다른 컴퓨터끼리 소통하기 위한 약속이다.

반면에, socket.io는 양방햔 통신을 하기위해 웹소켓 기술을 활용하는 라이브러리이다. 어찌보면 자바스크립트와 jQuery의 관계와 비슷하다고 할 수 있다.

그렇기 때문에 socket.io가 같은 기능을 구현하더라도 약간 느리지만, 많은 편의성을 제공한다. 또한 Java, C++, Python 등 여러 언어들의 라이브러리 또한 지원됩니다.

WebSocket

• HTML5 웹 표준 기술
• 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함
• 이벤트를 단순히 듣고, 보내는 것만 가능함

Socket.io

• 표준 기술이 아니며, 라이브러리임
• 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함
• 방 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅이 가능함

서버에서 연결된 소켓(사용자)들을 세밀하게 관리해야하는 서비스인 경우에는 Broadcasting 기능이 있는 socket.io을 쓰는게 유지보수 측면에서 훨씬 이점이 많다.

반면 가상화폐 거래소같이 데이터 전송이 많은 경우에는 빠르고 비용이 적은 표준 WebSocket을 이용하는게 바람직하다.

실제로 업비트나 바이낸스 소켓 API를 사용해보면 정말 엄청나게 많은 데이터가 들어온다.

---

구현하기

Back

const realTimeChat = io => {
  io.on('connection', socket => {
    socket.on('joinRoom', ({ username, room }) => {
      const user = userJoin(socket.id, username, room);
      insertUesrInfo(user);
      socket.join(user.room);
      socket.emit('message', formatMessage(botName, `${user.username}님 환영합니다. 😀`));
      socket.broadcast
        .to(user.room)
        .emit('message', formatMessage(botName, `${user.username}님이 참가하셨습니다.`));
      io.to(user.room).emit('roomUsers', {
        room: user.room,
        users: getRoomUsers(user.room),
      });
    });

    socket.on('chatMessage', msg => {
      const user = getCurrentUser(socket.id);
      insertMsg(msg, user);
      io.to(user.room).emit('message', formatMessage(user.username, msg));
    });

    socket.on('disconnect', () => {
      const user = userLeave(socket.id);
      if (user) {
        io.to(user.room).emit(
          'message',
          formatMessage(botName, `${user.username}님이 나가셨습니다.`)
        );
        io.to(user.room).emit('roomUsers', {
          room: user.room,
          users: getRoomUsers(user.room),
        });
      }
      user && deleteUserInfo(user);
    });
  });
};

export default realTimeChat;

Front

    <script>
      const chatForm = document.getElementById('chat-form');
      const chatMessages = document.querySelector('.chat-messages');
      const roomName = document.getElementById('room-name');
      const userList = document.getElementById('users');

      const { username, room } = Qs.parse(location.search, {
        ignoreQueryPrefix: true,
      });

      var socket = io.connect('https://www2.wecode.buzzntrend.com');

      socket.emit('joinRoom', { username, room });

      socket.on('roomUsers', ({ room, users }) => {
        roomName.innerText = room;
        userList.innerHTML = '';
        users.forEach((user) => {
          const li = document.createElement('li');
          li.innerText = user.username;
          userList.appendChild(li);
        });
      });

      socket.on('message', (message) => {
        outputMessage(message);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      });

      chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
        let msg = e.target.elements.msg.value;
        msg = msg.trim();
        if (!msg) {
          return false;
        }
        socket.emit('chatMessage', msg);
        e.target.elements.msg.value = '';
        e.target.elements.msg.focus();
      });

      function outputMessage(message) {
        const div = document.createElement('div');
        div.classList.add('message');
        const p = document.createElement('p');
        p.classList.add('meta');
        p.innerText = message.username;
        p.innerHTML += `<span>${message.time}</span>`;
        div.appendChild(p);
        const para = document.createElement('p');
        para.classList.add('text');
        para.innerText = message.text;
        div.appendChild(para);
        document.querySelector('.chat-messages').appendChild(div);
      }
    </script>

실제 구현영상

각각 생성된 방안의 모든 대화내용들은 Mongo DB에 저장되도록 구현하였다.

역시 동적인걸 하니깐 너무 재밌다..

---

참고

위의 코드대로 한다면 로드밸런싱에 의해 서버가 여러개 생성될시

유저들끼리 채팅이 불가능할 것이다.

ex. 나도 A방에 들어가고 다른사람도 A방에 들어갔는데 소통이안됌

그럴때 필요한것이 socket.io-redis이다.

redis adapter는 대충 아래그림과 같이 동작한다.

기본적으로 redis의 pub/sub기능을 활용한 것인데 간단히 말하자면

채널을 구독한 subscribe에게 모든 메세지를 전송 하는것이다.

redis를 통해 실험을 해봤는데

A를 구독한 터미널에는 A의 메세지만 B를 구독한 터미널에는 B의 메세지만 나오는것을 볼 수 있다.

이제 이것을 내가만든 socket.io서버에 활용해보자.

정말 간단하다

const redisAdapter = require("socket.io-redis");

io.adapter(redisAdapter({ host: "localhost", port: 6379 }));

이것만 선언해주면 알아서 to(“방이름”).emit에 redis의 pub/sub기능이 부착된다.

(말그대로 어뎁터다..정말 편리함)

*****************************중요사항*****************************

‘만약 redis가 죽어버리면’라는 가정의 예외처리를 해주지 않는다면 server 또한 죽어버리게된다.

io.of('/').adapter.on('error', error => {
    console.log('redisAdapter: ', error);
  });

위와같이 redis가 죽었을때의 예외처리를 해줘서 server는 꺼트리지 않도록하자

(물론 이렇게 됐을땐 redis가 살아날때까지 현재의 서버에 있는 클라이언트끼리만 채팅이 가능하다)

참고사항의 socket.io-redis, 에러처리 모두 구문법이다.

현재는 @socket.io/redis-adapter라는 이름으로 바뀌었다.

내가 구문법을 쓴 이유는 사용하기에도 편하고 직관적이기 때문이다.

https://www.opensourceagenda.com/projects/socketio-redis/versions

https://socket.io/docs/v4/redis-adapter/

asdasdasdasds asdasdasd