Node.js Socket.IO 사용 방법

Socket.IO는 공식 홈페이지 설명을 빌려와 말씀드리자면,

브라우저와 서버 간의 실시간, 양방향, 그리고 이벤트 기반 통신을 가능하게 해주는 라이브러리 입니다.

Socket 통신을 위한 모듈이라고 생각하시면 되겠습니다.

그럼 Socket.IO 사용 방법에 대해 알려드리도록 하겠습니다.

Socket.IO 모듈 설치

npm install socket.io

npm을 통해 Socket.IO 모듈을 설치합니다.

Server-Side Code (Node.js)

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

var 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}" 받았습니다.`);
  });
});

서버측 Node.js 코드입니다.

express 모듈을 사용하여 서버를 실행합니다.

그리고 socket.io 객체를 만들어 on 함수에 'connection' 이벤트를 받습니다.

여기서 socket.io 사용에서 가장 중요한 함수 두가지를 먼저 알려드리겠습니다.

socket.on('이벤트 명', Callback Function) : 해당 이벤트를 받고 콜백함수를 실행합니다.
socket.emit('이벤트 명', Data) : 이벤트 명을 지정하고 데이터를 보냅니다.

그리고, Custom Event 명이 아닌 기본으로 존재하는 Event 명의 의미를 알려드리겠습니다.

connection : Client 와 연결되었을 때 발생
disconnection : Client 와 연결해제되었을 때 발생

위 사항을 이해하신 뒤, 다시 위 코드를 보시면,

port 3000으로 서버를 실행하면 "listening on *:3000" 라는 문자열을 출력하여 3000 포트에서 socket 연결을 기다립니다.

그리고, socket 객체인 io 변수에 Client와의 연결 이벤트인 'connection'을 이벤트를 받는 on 함수로 받고,

연결이 되면 socket 객체를 받아 "{Socket ID} Connected" 라는 문자열을 출력하고,

Client에게 emit 함수로 'msg' 라는 이벤트 이름으로 데이터를 잘 받았다는 메세지를 Client에게 전달합니다.

그리고, on 함수로 'msg' 라는 이벤트를 Client에게 받게되면 해당 Socket ID와 msg 이벤트로 받은 데이터를 출력하고,

다시 Client에게 emit 함수로 'msg' 라는 이벤트 이름으로 데이터를 잘 받았다는 메세지를 Client에게 다시 전달하는 코드라는 것을 알 수 있습니다.

위 코드를 실행시키면 위 사진과 같이 "listening on *:3000" 이라는 문자열이 출력되고 socket 연결을 할 수 있는 상태로 대기합니다.

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>

Client측 코드입니다.

먼저 socket.io cdn을 사용합니다.

<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>

그리고 socket.io 를 사용해 socket 연결을 합니다.

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

io.connect('{연결 URL:포트}');

위 코드로 서버측과 연결합니다.

그리고, socket 객체의 on 함수를 통해 'msg' 라는 이벤트를 받으면 해당 이벤트로 전달된 데이터를 출력합니다.

다음으로, socket 객체의 emit 함수를 통해 'msg' 라는 이름의 이벤트로 input 안에 작성한 문자열을 Server로 보냅니다.

이제 위 결과를 보여드리도록 하겠습니다.

먼저 터미널에서 서버측 Node.js 코드를 실행 시키고, 클라이언트측과 연결이 되면, 연결되었다는 문자열을 클라이언트 측으로 전송합니다.

그럼 클라이언트 측에서는 서버측에서 받은 "연결이 완료되었습니다." 라는 데이터를 화면에 출력합니다.

그리고, 클라이언트 측에서 input에 값을 입력하여 보낼 문자열을 화면에 먼저 출력한 뒤 서버측으로 데이터를 전송하면,

서버측에서 해당 문자열 데이터를 받고, 잘 받았다는 결과를 다시 클라이언트측으로 전송합니다.

클라이언트 측에서는 다시 서버측에서 받은 데이터를 화면에 출력합니다.

이로써 Socket.IO의 기본적인 설명을 마치도록 하겠습니다.

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

감사합니다.

저작자표시

'Developer > Node.js' 카테고리의 다른 글

Linux Node.js, npm 설치 방법 (nvm) (4)	2021.04.14
Node.js Base64 Encoding, Decoding 방법 (3)	2021.03.24
Node.js Socket.IO CORS allow all (7)	2021.03.23
npm Upgrade 방법 (2)	2021.02.22
Node.js Upgrade 방법 (4)	2021.02.20

나를 위한 것만은 아닌 기록

Node.js Socket.IO 사용 방법