티스토리 뷰

IT 한스푼

Node.js Socket.io 사용법 및 예제 코드

예술하는 개발자 최씨 2023. 4. 12. 17:21
반응형

Node.js Socket.io 사용법 및 예제 코드

Node.js를 이용해 웹 어플리케이션을 개발할 때 실시간 통신이 필요한 경우가 있습니다. 이런 경우에 Node.js에서는 Socket.io를 사용하여 손쉽게 실시간 통신을 구현할 수 있습니다. 이번 글에서는 Node.js와 Socket.io를 이용한 실시간 통신 구현 방법에 대해 알아보도록 하겠습니다.

1. Socket.io란?
Socket.io는 Node.js를 이용해 웹 어플리케이션에서 실시간 통신을 구현하기 위한 라이브러리입니다. Socket.io는 웹소켓(WebSocket)을 기반으로 동작하며, 웹소켓이 지원되지 않는 브라우저에서는 폴링(Polling) 방식을 사용하여 실시간 통신을 구현합니다.


2. Socket.io 설치
Socket.io를 사용하기 위해서는 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치가 완료되었다면, 다음 명령어를 실행하여 Socket.io를 설치합니다.

npm install socket.io

 

3. Socket.io 서버 구현하기
Socket.io를 이용해 서버를 구현하려면, 다음과 같은 코드를 작성합니다. 

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

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

위 코드에서는 먼저 express 모듈을 사용하여 애플리케이션을 생성하고, http 모듈을 사용하여 서버를 생성합니다. 그리고 Socket.io 모듈을 이용하여 서버와 클라이언트 간의 실시간 통신을 구현할 수 있는 객체를 생성합니다.

io.on('connection', ...) 구문은 클라이언트가 서버와 연결되면 실행됩니다. 이 구문에서는 클라이언트와 연결되었을 때 수행할 코드를 작성합니다. 위 예제 코드에서는 클라이언트가 연결되면 'a user connected' 메시지를 출력합니다.

socket.on('disconnect', ...) 구문은 클라이언트와 연결이 끊겼을 때 실행됩니다. 이 구문에서는 클라이언트와 연결이 끊겼을 때 수행할 코드를 작성합니다. 위 예제 코드에서는 클라이언트와 연결이 끊겼을 때 'user disconnected' 메시지를 출력합니다.

마지막으로,http.listen(...) 구문에서는 서버를 실행하는 포트를 지정합니다. 위 예제 코드에서는 포트 번호 3000을 사용합니다.


4. Socket.io 클라이언트 구현하기
Socket.io를 이용해 클라이언트를 구현하려면, 다음과 같은 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Example</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('connect', () => {
      console.log('connected to server');
    });

    socket.on('disconnect', () => {
      console.log('disconnected from server');
    });
  </script>
</head>
<body>
  <h1>Socket.io Example</h1>
</body>
</html>

위 코드에서는 먼저 Socket.io 클라이언트 라이브러리를 가져옵니다. 그리고 Socket.io를 이용하여 서버와 클라이언트 간의 실시간 통신을 구현할 수 있는 객체를 생성합니다.

socket.on('connect', ...) 구문은 클라이언트가 서버와 연결되면 실행됩니다. 이 구문에서는 클라이언트와 연결되었을 때 수행할 코드를 작성합니다. 위 예제 코드에서는 클라이언트가 연결되면 'connected to server' 메시지를 출력합니다.

socket.on('disconnect', ...) 구문은 클라이언트와 연결이 끊겼을 때 실행됩니다. 이 구문에서는 클라이언트와 연결이 끊겼을 때 수행할 코드를 작성합니다. 위 예제 코드에서는 클라이언트와 연결이 끊겼을 때 'disconnected from server' 메시지를 출력합니다.

마지막으로, HTML 파일에서는 Socket.io 클라이언트 라이브러리를 가져온 뒤, 생성한 Socket.io 객체를 이용하여 서버와 클라이언트 간의 실시간 통신을 구현합니다.


5. Socket.io를 이용한 메시지 전송 예제
Socket.io를 이용하여 서버와 클라이언트 간에 메시지를 전송하는 예제 코드를 작성해보겠습니다.

// 서버 코드
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

// 클라이언트 코드
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

socket.on('chat message', (msg) => {
  const li = document.createElement('li');
  li.textContent = msg;
  messages.appendChild(li);
});

위 예제 코드에서는 클라이언트에서 입력한 메시지를 서버로 전송하고, 서버에서는 전송받은 메시지를 모든 클라이언트에게 브로드캐스트합니다. 이렇게 하면 모든 클라이언트가 메시지를 받아 볼 수 있습니다.

클라이언트에서는 form 요소에 이벤트 리스너를 등록하여 폼이 제출되면 입력된 메시지를 서버로 전송합니다. 서버에서는 io.emit('chat message', msg) 구문을 이용하여 모든 클라이언트에게 메시지를 전송합니다.

클라이언트에서는 socket.on('chat message', ...) 구문을 이용하여 서버로부터 메시지를 수신합니다. 메시지를 수신하면, messages 요소에 새로운 li 요소를 추가하여 메시지를 화면에 출력합니다.


6. 결론
Socket.io는 Node.js 기반의 웹 어플리케이션에서 실시간 통신을 구현하는 데 사용되는 라이브러리입니다. 이 라이브러리는 이벤트 기반의 통신 방식을 사용하며, WebSocket과 같은 실시간 양방향 통신 프로토콜을 사용하여 데이터를 주고받습니다. Socket.io를 이용하면 Node.js 기반의 웹 어플리케이션에서 간단하게 실시간 통신 기능을 구현할 수 있습니다.

반응형
저작자표시

'IT 한스푼' 카테고리의 다른 글

Node.js 서버에서 Firebase Cloud Messaging(FCM)을 이용한 푸시 알림 보내는 방법  (0) 2023.04.18
Node.js 서비스 배포 PM2 사용하여 server 성능 향상(멀티스레드)  (0) 2023.04.17
Node.js에서 Cron 작업 예약하기: node-cron 사용법  (0) 2023.04.05
MySQL을 이용한 위도 경도 거리 계산 방법과 구현 방법  (0) 2023.04.04
Node.js의 비동기 처리 방식과 콜백 지옥 탈출하기  (0) 2023.03.30
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함