웹소켓(WebSock) 개념 공부

1. 개념
2. 특징
3. 동작
4. 구현

---

1. 개념

실시간 양방향 통신을 위한 프로토콜

기존 HTTP 프로토콜의 단방향 통신(클라이언트의 요청, 서버의 응답 후 연결 종료)의 한계 개선

 

실시간 통신, 업데이트가 필요한 경우를 위해 설계된 프로토콜

클라이언트, 서버가 한 번 연결되면 이후 지속적으로 데이터 통신 가능하여 실시간 데이터 전송 및 업데이트 가능

 

HTML5부터 표준으로 채택 되어 거의 모든 웹 브라우저에서 지원 됨

---

2. 특징

실시간 통신 가능

클라이언트와 서버 간의 통신에서 실시간 데이터 전송 및 업데이트가 가능

채팅, 게임 등 실시간 요구사항을 반영해줘야하는 콘텐츠에 유용

사용자에게 실시간 알림을 보내는 경우에도 유용

 

연결 상태 유지

클라이언트와 서버가 한 번 연결되면, 연결 상태 유지

데이터는 웹소켓 프레임에 담아 전송

 

높은 효율성

지속적으로 통신을 해야하는 경우, 매 통신마다 연결 및 해제를 반복하는 것은 비효율적

한 번의 연결로 지속적 통신이 가능하여 HTTP보다 효율적

클라이언트, 서버 간의 헤어 정보가 적어 적은 데이터 양으로 통신 가능

 

포트 공유

HTTP와 동일한 포트 공유 가능

추가적인 포트 개방 없이 사용할 수 있어 편리함

---

3. 동작

이벤트 기반 동작

이벤트 기반으로 동작하는 방식

클라이언트에서 이벤트 발생 시 서버에서 해당 이벤트 처리 가능하며,

서버에서 이벤트 발생 시 클라이언트에서 해당 이벤트 처리 가능

 

동작 과정

1. 클라이언트 -> 서버 웹소켓 연결 요청 (HTTP 프로토콜로 웹소켓 핸드쉐이크)

2. 서버의 웹소켓 요청 수신, 연결 설정

3. 연결 설정 후 클라이언트, 서버 양방향 데이터 통신 가능 (웹 소켓 프레임 사용)

4. 실시간 데이터 전송 가능, 데이터를 받은 쪽은 실시간 처리

---

4. 구현

웹소켓 기반 실시간 통신 라이브러리, Socket.IO를 이용해 클라이언트, 서버의 예시 코드로 간략하게 정리

 

클라이언트

socket.io-client 라이브러리 사용하여 연결 설정

서버와 연결, 메세지 송수신 가능

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000');

function App() {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState([]);

  useEffect(() => {
    // 메세지 수신
    socket.on('message', (data) => {
      setChat((prevChat) => [...prevChat, data]);
    });
  }, []);

  const sendMessage = () => {
    socket.emit('message', message);
    setMessage('');
  };

  return (
    <div>
      <h1>채팅</h1>
      <div>
        {chat.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>전송</button>
    </div>
  );
}

export default App;

 

서버

서버 사이드 플랫폼에서 Socket.IO 사용하여 실시간 통신 구현

웹 소켓 지원 라이브러리 예시

• Node.js : Socket.IO
• Python : Flask-SocketIO,
• Django : Channels

클라이언트와 연결, 메세지 송수신 가능

// Node.js 예시코드

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

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

io.on('connection', (socket) => {
  console.log('클라이언트 연결');

  // 메세지 수신
  socket.on('message', (data) => {
    console.log('메시지 수신:', data);
    // 메세지 전달
    io.emit('message', data);
  });
});

const port = 5000;
server.listen(port, () => {
  console.log(`서버 포트 : ${port}`);
});