[React] WebSocket - 1

Jinga·2023년 6월 30일
0

React

목록 보기
17/28
post-thumbnail

WebSocket 웹 소켓

웹 소켓이란?

웹 소켓(WebSocket)은 실시간 양방향 통신을 가능하게 하는 통신 프로토콜이다. 웹 소켓은 HTTP 프로토콜 위에서 동작하며, 웹 페이지와 서버 간에 실시간으로 데이터를 주고받을 수 있도록 설계되었다.

웹 소켓의 필요성

  • 전통적인 HTTP 통신 방식은 클라이언트가 서버에 요청을 보내고, 서버가 응답을 반환하는 단방향 통신 방식이었다. 이러한 통신 방식은 웹 페이지가 사용자와 상호작용하는 정적인 콘텐츠를 제공하는데는 적합했으나, 실시간으로 데이터를 주고받아야 하는 서비스(예: 채팅, 주식 거래, 온라인 게임 등)에는 적합하지 않았다.
  • 이를 해결하기 위해 AJAX, Comet, Long Polling 등 여러 기술들이 도입되었지만, 이러한 기술들은 본질적으로 HTTP의 단방향 통신 방식에 의존하고 있어 여러 제약 사항들이 있었다.
  • 웹 소켓은 이러한 문제를 해결하기 위해 도입된 기술로, 클라이언트와 서버 간에 영구적인 연결을 만들어 두고, 양방향으로 실시간 데이터를 전송할 수 있게 해준다.

웹 소켓 동작 방식

  • 핸드쉐이크: 웹 소켓 연결은 HTTP를 통해 초기화된다. 클라이언트는 HTTP 요청을 통해 서버에 웹 소켓 연결을 요청하며, 이를 '핸드쉐이크'라고 부른다. 이 요청에는 Upgrade: websocket 헤더가 포함되어, HTTP 프로토콜을 웹 소켓 프로토콜로 업그레이드하겠다는 의미를 가진다.
  • 연결 생성: 서버가 웹 소켓 연결 요청을 수락하면, 연결이 생성되고 양방향 통신이 가능해진다. 이후 클라이언트와 서버는 상호 독립적으로 데이터를 주고받을 수 있다.
  • 데이터 전송: 웹 소켓 연결이 활성화되면, 클라이언트와 서버는 서로에게 메시지를 전송할 수 있다. 웹 소켓 프로토콜은 데이터를 '프레임'으로 나누어 전송하며, 이 프레임들은 서버나 클라이언트에 도착할 때 재조립된다.
  • 연결 종료: 클라이언트나 서버 어느 한쪽이 연결을 종료하면, 웹 소켓 연결은 닫힌다.

웹 소켓의 장점

  • 실시간 양방향 통신: 웹 소켓은 서버와 클라이언트 간에 데이터를 실시간으로 양방향으로 전송할 수 있다.
  • 저 레이턴시: 영구적인 연결을 사용하므로, 데이터 전송에 필요한 시간이 짧다.
  • 효율적: 한 번의 핸드쉐이크로 영구적인 연결을 수립하므로, 불필요한 오버헤드가 적다.

웹 소켓의 단점

  • 보안 이슈: 영구적인 연결을 사용하므로, 잘못 구현될 경우 보안 취약점이 될 수 있다.
  • 스케일링 문제: 대량의 동시 연결을 처리하는데 있어 추가적인 고려사항들이 있다.

웹 소켓 사용 사례

  • 채팅 애플리케이션: 사용자들이 실시간으로 메시지를 주고받을 수 있게 해준다.
  • 온라인 게임: 플레이어들이 실시간으로 상호작용할 수 있도록 해준다.
  • 실시간 알림: 웹사이트 사용자에게 실시간으로 알림이나 업데이트를 전송한다.
  • 주식 거래: 실시간으로 주식 가격을 업데이트하고, 거래를 처리한다.
    웹 소켓은 실시간 통신 기능이 필요한 다양한 애플리케이션에서 광범위하게 사용되고 있다.

다음 글에서는 react에서 WebSocket를 어떻게 활용하는지에 대해 알아볼 예정이다.

profile
다크모드가 보기 좋아요

0개의 댓글

관련 채용 정보