socket.io

김예찬·2021년 6월 7일

현재 진행 중인 토이 프로젝트에서 실시간 채팅을 구현하고 싶었습니다. 오늘 대부분의 시간을 잡아 먹었던 socket.io가 무엇인지 정리해둡니다😏

Socket.io

기본적으로 브라우저와 서버는 stateless 통신을 함으로 한번의 요청과 응답 후 연결이 끊어집니다. 이런 http 통신의 특성으로 실시간 상호작용는 웹 서비스를 만들기 위해선 웹소켓을 이용해야 합니다. Socket.io는 웹소켓을 쉽게 사용할 수 있게 해주는 모듈입니다. socket.io 공식 홈페이지를 통해 사용법을 익히실 수 있습니다.

Install

npm install --save socket.io
nmp install --save socket.io-client

Server Code

const app = require("express")();
const http = require("http").createServer(app);
const io = require('socket.io')(http);

let port = 3000;
http.listen(port, () => {
  console.log("listening on *:" + port);
});

io.on('connection', function (socket) {
  console.log(socket.id, 'Connected');

  socket.emit('msg', `${socket.id} 연결 되었습니다.`);
  
  socket.on('msg', function (data) {
    console.log(socket.id, data);
    
    socket.emit('msg', `Server : "${data}" 받았습니다.`);
  });
});

socket.io 모듈을 사용해서 소켓 객체를 만들어 준 뒤, on 함수에 'connection' 이벤트를 파라미터로 넣어줍니다.

Client-Side-Code

클라이언트 사이드 예시 입니다. 간소화 하기 위해 돔 조작은 제이쿼리를 사용했습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.io Test</title>

  <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }

    #chatContent {
      border: 1px solid #000;
      width: 100%;
      height: 200px;
      margin-bottom: 10px;
      overflow-y: auto;
    }

    #myChat {
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="chatContent">

  </div>
  <input id="myChat" type="text">

  <script>
    var socket = io.connect('http://localhost:3000');

    socket.on('msg', function (data) {
      $("#chatContent").append(`${data}<br>`);
    });

    $("#myChat").on("keyup", function () {
      if (window.event.keyCode == 13) {
        $("#chatContent").append(`Client : "${$(this).val()}" 보냅니다.<br>`);
        socket.emit('msg', $(this).val());
        $(this).val("");
      }
    });
  </script>
</body>

</html>

script를 통해 socket을 불러옵니다.

소켓 작동 원리

socket.on('이벤트 명', Callback Function) : 이벤트리스너와 비슷하게 작동합니다. 이벤트명으로 동작이 트리거되면 cb가 작동됩니다.
socket.emit('이벤트 명', Data) : 이벤트 명을 지정 후 데이터를 클라이언트로 보냅니다.
위의 예시를 정리하면 서버가 시작되면 connection 이벤트를 클라이언트 측에서 전해 올 때까지 기다립니다. 이벤트가 전해져 오면 socekt.id를 콘솔창에 출력 한 후, 클라이언트 측으로 ${socket.id} 연결 되었습니다.를 문자열로 데이터에 담아 msg 이벤트 이름으로 Client에게 전달합니다.
Client의 socket 객체의 on 함수를 통해 서버에서 보내온 msg 이벤트를 트리거 해 $("#chatContent")에 ${data}<br>를 붙이는 append() 함수 로직을 실시 합니다.

김예찬

프론트엔드

이전 포스트

DOM 다루기

다음 포스트