[NodeJS] Socket.IO란?

1. Socket.IO 란?

Socket.IO는 실시간 양방향 통신을 위한 JavaScript 라이브러리로, 클라이언트와 서버 간의 실시간 데이터 전송을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다, 주로 웹 애플리케이션에 사용되며, 채팅 애플리케이션, 게임, 실시간 알림 시스템 등 다양한 곳에서 활용합니다.

2. Socket.IO 특징

특징
- 실시간 통신: 클라이언트와 서버간의 데이터 송수신을 지원
- 폴백 지원: 웹 소켓이 지원되지 않는 환경에서도 작동할 수 있는 HTTP 롱 폴링 등 다양한 폴백을 제공
- 이벤트 기반: 이벤트를 통해 클라이언트와 서버 간의 상호작용을 쉽게 처리
- 방 및 네임스페이스: 특정 클라이언트 그룹과의 통신을 관리할 수 있는 방 및 네임스페이스 기능을 제공
- 다양한 플랫폼 지원: Node.js 서버와 웹 클라이언트뿐만 아니라 모바일 플랫폼에서도 사용할 수 있음
- 간단한 API: 사용하기 쉬운 API를 제공하여 빠르게 기능을 구현

3. 설치 방법

Socket.IO는 Node.js 환경에서 동작하므로 Node.js 공식 웹사이트에서 Node.js를 설치합니다.

npm install socket.io

클라이언트 측에서도 Socket.IO를 사용할 수 있도록 다음과 같이 설치합니다.

npm install socket.io-client

4. 서버 코드 작성

프로젝트 디렉토리에 server.js를 생성하고 아래와 같은 코드를 작성합니다.

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "../index.html"); // 클라이언트 HTML 파일 제공
});

io.on("connection", (socket) => {
  console.log("사용자가 연결되었습니다.");

  socket.on("chat message", (msg) => {
    io.emit("chat message", msg); // 모든 클라이언트에 메시지 전송
  });

  socket.on("disconnect", () => {
    console.log("사용자가 연결을 끊었습니다.");
  });
});

server.listen(3000, () => {
  console.log("서버가 http://localhost:3000 에서 실행 중입니다.");
});

index.html 파일을 생성하고 아래 코드를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Socket.IO Chat</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
        const socket = io(); // io 객체 사용

        // 서버로부터 저장된 메시지를 수신
        socket.on("load messages", (messages) => {
          messages.forEach((msg) => {
            const item = document.createElement("li");
            item.textContent = msg; // 메시지 목록에 추가
            document.getElementById("messages").appendChild(item);
          });
        });

        // 서버로부터 메시지를 수신
        socket.on("chat message", (msg) => {
          const item = document.createElement("li");
          item.textContent = msg; // 메시지 목록에 추가
          document.getElementById("messages").appendChild(item);
        });

        // 메시지 전송 함수
        document.querySelector("form").onsubmit = function () {
          const message = document.getElementById("message").value;
          socket.emit("chat message", message); // 메시지 전송
          document.getElementById("message").value = ""; // 입력 필드 초기화
          return false; // 폼 제출 방지
        };
      });
    </script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form autocomplete="off">
      <input id="message" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

5. 서버 실행

서버 코드를 server.js로 저장하고, 클라이언트 코드를 index.html로 같은 디렉토리에 저장 후 아래 터미널에서 다음 명령어로 서버를 실행합니다.

node server.js

GitHub - Koras02/socket.io-chat-nodejs

Contribute to Koras02/socket.io-chat-nodejs development by creating an account on GitHub.

github.com

LIST

'Back-End > Node.js' 카테고리의 다른 글

[NodeJS] Go와 Nodejs 연결하기 (0)	2025.03.07
[NodeJS] Node.js를 활용한 애니메이션 API 만들기 (1)	2025.03.03
[NodeJS] 9장(완) 추가 학습하기 (0)	2025.03.03
[NodeJs] 8장 Docker(도커)를 사용한 배포 (0)	2025.03.02
[NodeJS] 7장 에러처리 (0)	2025.02.27