웹 서비스 개발 - 웹 소켓 - 3 - 웹 소켓 보안 — 웹 서비스 개발 – 웹 소켓 – 3 – 웹 소켓 보안

Table of Contents

웹 서비스 개발 – 웹 소켓 – 클라이언트와의 통신

안녕하세요, 여러분! 😊
이번 시간에는 웹 소켓 시리즈의 세 번째 이야기,
바로 **“클라이언트와의 통신”**에 대해 깊이 있게 다뤄보겠습니다!

이전 시간에는 웹 소켓 서버를 구축하는 방법을 알아봤죠?
오늘은 그 서버와 클라이언트가 실제로 어떻게 주고받고 소통하는지를
예시와 함께 속 시원하게! 친근하게! 이해해봅시다. 😄

1. 클라이언트-서버 간 통신 흐름이란?

웹 소켓을 통해 클라이언트(브라우저 등)와 서버는 하나의 통로를 만들고,
그 통로 안에서 자유롭게 데이터를 양방향으로 주고받는 구조입니다.

마치…

📞 전화선이 연결된 두 사람이, 언제든지 말을 주고받는 것과 같아요!

2. 클라이언트에서 웹 소켓 연결하기

자바스크립트에서는 아주 쉽게 웹 소켓을 사용할 수 있어요.

✅ 기본 연결 코드

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

socket.onopen = () => {
  console.log('서버와 연결됨 ✅');
};

socket.onmessage = (event) => {
  console.log('서버로부터 메시지 수신:', event.data);
};

socket.onerror = (error) => {
  console.error('에러 발생 ❌', error);
};

socket.onclose = () => {
  console.log('서버와의 연결 종료 🔚');
};

한 번만 써봐도 “어? 이거 생각보다 엄청 쉽네?” 하는 반응이 절로 나올 거예요 😄

3. 클라이언트에서 서버로 메시지 보내기

✅ `socket.send()`로 전송

socket.send("안녕하세요 서버님! 👋");

문자열, JSON, 바이너리 등 다양한 데이터 타입을 보낼 수 있어요.
보통은 JSON 문자열로 주고받는 게 가장 보편적입니다.

4. 서버에서 메시지 수신 및 응답 (Node.js 기준)

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

wss.on('connection', (ws) => {
  console.log('클라이언트 접속됨 ✅');

  ws.on('message', (msg) => {
    console.log('클라이언트로부터 수신:', msg);

    // 클라이언트에게 응답
    ws.send(`서버의 응답: ${msg} 잘 받았어요! 😎`);
  });

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

서버는 연결된 소켓을 통해 send()로 바로 응답할 수 있습니다.

5. JSON 형식으로 통신하기 (권장 방식)

✅ 클라이언트 코드

socket.send(JSON.stringify({
  type: 'chat',
  username: '홍길동',
  message: '안녕하세요!'
}));

✅ 서버 코드 (Node.js)

ws.on('message', (msg) => {
  const data = JSON.parse(msg);
  if (data.type === 'chat') {
    console.log(`[${data.username}] ${data.message}`);
  }
});

구조화된 데이터는 해석이 쉽고, 오류도 줄일 수 있어서 추천드려요!

6. 다수의 클라이언트와 통신하기 (브로드캐스트)

서버에서 여러 명에게 같은 메시지를 전송할 수 있어요.
이걸 브로드캐스트라고 합니다.

✅ 전체 브로드캐스트 예시

wss.clients.forEach((client) => {
  if (client.readyState === WebSocket.OPEN) {
    client.send('모든 사용자에게 전송되는 메시지 💌');
  }
});

채팅방 기능이나 공지사항 전송 등에서 아주 유용하게 사용돼요!

7. 클라이언트에서 수신 메시지를 UI에 출력하기

socket.onmessage = (event) => {
  const chatBox = document.getElementById('chatBox');
  chatBox.innerHTML += `<div>💬 ${event.data}</div>`;
};

HTML 예시:

<div id="chatBox"></div>

텍스트 기반일 수도 있고, JSON이면 파싱해서 이름과 메시지를 따로 출력할 수도 있죠!

8. 연결 끊김 처리 및 자동 재연결 로직

✅ 자동 재연결 코드 예시

function connectSocket() {
  let socket = new WebSocket('ws://localhost:3000');

  socket.onopen = () => console.log('연결 성공!');
  socket.onmessage = (e) => console.log('수신:', e.data);
  socket.onerror = (e) => console.log('에러:', e);
  socket.onclose = () => {
    console.log('연결 종료됨. 5초 후 재시도...');
    setTimeout(connectSocket, 5000); // 재연결 시도
  };
}

connectSocket();

이 기능은 불안정한 네트워크 환경이나 서버 리부팅 시 매우 중요해요.

9. 클라이언트와의 통신 시 주의사항 ✅

항목	설명
연결 상태 확인	항상 `readyState` 체크 후 메시지 전송
대량 브로드캐스트	`client.readyState === WebSocket.OPEN` 조건 필수
JSON 구조 통일	서버-클라이언트 간 데이터 형식 약속해두기
에러 처리	`onerror`, `onclose` 이벤트 핸들링 필수
보안 처리	민감 데이터는 암호화하거나 `wss://`로 보호
속도 제한	채팅 도배 방지를 위한 rate limit 구현 고려

마무리하며 😊

이제 웹 소켓을 통해 클라이언트와 자유롭게 실시간 통신할 수 있는 능력을 갖추셨어요!

단순한 연결부터
JSON 기반 메시지 통신,
브로드캐스트 처리,
자동 재접속까지!

실시간 웹 서비스의 꽃은 바로 이런 양방향 통신 능력이죠 💐

다음 시간에는 이 통신을 이용해서 실제 실시간 채팅방을 구현하는 방법을 함께 실습해볼게요!
지금까지 배운 걸 한 번에 정리해서 멋진 결과물 만들어봐요! 💻🔥

감사합니다~ 🙌