Node.js 기초 <10. 웹소켓(WebSocket)과 실시간 데이터 처리>

노드 Node.js

10. 웹소켓(WebSocket)과 실시간 데이터 처리 

 

안녕하세요! 태마입니다.

Node.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

노드 Node.js

포스팅 시작하겠습니다 :)

 

---

 

1. 주제 간단 정리

 

1. 웹소켓(WebSocket)이란?

웹소켓(WebSocket)은 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있는 프로토콜입니다.
기존 HTTP 요청과 달리, 한 번 연결되면 양방향 통신이 가능합니다.

📌 웹소켓의 특징
✔ 양방향(Bidirectional) 통신 → 서버와 클라이언트가 동시에 데이터 전송 가능
✔ 실시간 데이터 처리 → 채팅, 게임, 주식 데이터 등에 활용
✔ 낮은 오버헤드 → HTTP 요청 대비 네트워크 비용 절감

---

 

2. HTTP와 WebSocket 비교

✅ 기존 HTTP 방식

특징설명

요청-응답 방식	클라이언트가 요청해야 서버가 응답 가능
연결 지속성 없음	요청이 끝나면 연결이 종료됨
실시간 처리 어려움	주기적으로 요청(Polling)해야 함

✅ WebSocket 방식

특징설명

양방향 통신	서버와 클라이언트가 동시에 데이터 전송 가능
연결 유지	한 번 연결되면 지속적인 데이터 전송 가능
낮은 네트워크 비용	HTTP 요청 반복 없이 데이터 주고받기 가능

📌 웹소켓을 사용하면 채팅, 실시간 알림, 게임 등 다양한 실시간 기능 구현 가능!

✅ 여기까지 웹소켓의 기본 개념과 기존 HTTP 방식과의 차이점을 배웠습니다!
👉 "그렇다면, Node.js에서 웹소켓을 어떻게 구현할까?"
✅ 2부에서 Node.js의 WebSocket 활용 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. WebSocket을 활용한 실시간 서버 구축

✅ 웹소켓 패키지 설치 (ws 모듈 사용)

$ npm install ws

✅ 기본적인 WebSocket 서버 구현

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 3000 });

wss.on("connection", (ws) => {
  console.log("클라이언트가 연결되었습니다.");

  ws.on("message", (message) => {
    console.log("클라이언트 메시지:", message);
    ws.send(`서버 응답: ${message}`);
  });

  ws.on("close", () => {
    console.log("클라이언트 연결 종료");
  });
});

console.log("WebSocket 서버 실행 중 (포트 3000)");

📌 웹소켓 서버가 3000번 포트에서 실행되며, 클라이언트와 실시간 데이터 교환 가능!

✅ 웹소켓 클라이언트 연결 (JavaScript 브라우저 코드)

const ws = new WebSocket("ws://localhost:3000");

ws.onopen = () => {
  console.log("서버와 연결됨!");
  ws.send("안녕하세요, 서버!");
};

ws.onmessage = (event) => {
  console.log("서버 응답:", event.data);
};

📌 클라이언트에서 서버와 연결하고 메시지를 주고받을 수 있음!

---

 

2. 실시간 채팅 서버 구현 (WebSocket + Express)

✅ 1) Express와 WebSocket 서버 통합

const express = require("express");
const http = require("http");
const WebSocket = require("ws");

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    console.log(`클라이언트 메시지: ${message}`);

    // 모든 클라이언트에게 메시지 전송 (브로드캐스트)
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

server.listen(3000, () => {
  console.log("웹소켓 채팅 서버 실행 중 (포트 3000)");
});

📌 모든 연결된 클라이언트에게 메시지를 전송하는 실시간 채팅 서버 구현!

✅ 2) 클라이언트에서 채팅 메시지 전송

const ws = new WebSocket("ws://localhost:3000");

ws.onopen = () => {
  console.log("서버와 연결됨!");
  ws.send("안녕하세요, 채팅방입니다!");
};

ws.onmessage = (event) => {
  console.log("채팅 메시지:", event.data);
};

📌 브라우저에서 실행하면 메시지가 서버로 전송되고, 다른 클라이언트에게 전달됨!

---

 

3. 실시간 알림 서비스 구현

✅ 서버에서 특정 이벤트 발생 시 클라이언트에 알림 전송

setInterval(() => {
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send("🔥 새로운 알림이 도착했습니다!");
    }
  });
}, 5000);

📌 5초마다 연결된 모든 클라이언트에게 알림을 전송하는 기능 추가!

✅ 클라이언트에서 알림 수신 처리

ws.onmessage = (event) => {
  console.log("📢 알림 메시지:", event.data);
};

📌 클라이언트가 실시간으로 서버의 알림을 수신할 수 있음!

---

 

4. WebSocket과 Socket.io 비교

✅ Socket.io란?
Socket.io는 WebSocket을 기반으로 실시간 기능을 쉽게 구현할 수 있는 라이브러리입니다.
웹소켓이 지원되지 않는 환경에서도 폴링(Polling) 방식으로 자동 대체해 동작합니다.

✅ WebSocket vs Socket.io 비교

구분WebSocketSocket.io

기반 기술	표준 WebSocket 프로토콜	WebSocket + 폴링(Polling)
브라우저 지원	최신 브라우저 지원	구형 브라우저까지 지원
기능	기본 메시지 송수신	룸(Room), 자동 재연결, 브로드캐스트 지원
복잡도	직접 구현 필요	편리한 API 제공

📌 실시간 기능이 필요한 경우, Socket.io를 사용하면 더 편리함!

---

✅ 여기까지 WebSocket을 활용한 실시간 데이터 처리 방법을 배웠습니다!
👉 "그렇다면, Node.js에서 JWT(JSON Web Token) 인증을 구현하려면?"
✅ 다음 회차에서 JWT를 활용한 인증 시스템 구축 방법을 배워봅시다!