웹 소켓에 대해서 알아보이기 위해 기본적인 프로토콜인 http, https에 대해서 자세히 알아야한다.

HTTP/HTTPS

1. 개요

웹 브라우저 주소 입력란에 URL을 입력했을 때 어떻게 해서 웹 페이지가 보일까요??

브라우저 주소 입력란에 URL을 입력하면 브라우저는 서버에게 해당 주소에 대한 리소스(파일 등의 정보)를 요청(Request)하고 웹 서버는 응답(Reponse)을 통해 리소스를 전송합니다.

이때, HTTP 통신을 사용하게 됩니다. HTTP는 통신과 문서 전송을 위한 약속 및 규칙이라고 생각하면 됩니다.

2. HTTP란?

• HTTP(HyperText Transfer Protocol) : 하이퍼미디어 문서를 전송하기 위한 프로토콜입니다.

  Protocol(프로토콜) : 약속이라는 뜻으로, 데이터가 전송되는 방식을 결정하는 규약이면서, 송/수신자 사이의 합의를 통해 '데이터 포맷은 이렇게, 오류제어는 이렇게 해서 데이터를 주고받자'라는 규칙을 의미합니다.

• HTTP는 어플리케이션 계층(7계층)에서 작동하고 암호화 되지 않은 평문을 전송하는 프로토콜입니다.

• 단방향 통신 (클라이언트(요청) -> 서버(응답)) 입니다.

• 요청-응답 기반의 무상태(stateless) 프로토콜입니다.

• 매 요청마다 새로운 연결 수립하고 헤더 정보를 매 요청마다 전송해야 합니다.

• 웹에서 이루어지는 데이터 통신의 기초이면서, 주로 TCP/IP를 사용합니다.

• HTML, XML, Javascript, 오디오, 비디오, 이미지, PDF, Etc

• 요청 또는 상태 라인 / 해더(생략가능) / 빈줄(해더의 끝) / 바디(생략가능)

• HTTPS (HTTP Secure, HTTP에 보안을 강화한 버전이라고 생각하면 간단.)

3. 작동 방식

웹에서 브라우저는 사용자가 원하는 웹 페이즈를 보여주기 위한 중요한 도구입니다.사용자가 브라우저의 주소창에 URL을 입력하면, 이 URL은 DNS(Domain Name System)를 통해 웹 서버의 IP 주소로 변환됩니다. 이 과정에서 웹 클라이언트인 브라우저는 웹 서버와의 통신을 위해 HTTP 또는 HTTPS 프로토콜을 사용하여 요청을 보냅니다.

요청(Request)

요청은 클라이언트(브라우저)가 서버에 특정 자원이나 데이터를 요청하는 과정입니다. 요청은 다음과 같은 정보를 포함합니다:

• HTTP 메서드: 요청의 종류를 나타내며, 주로 GET과 POST 방식이 사용됩니다.
• GET: 서버에서 특정 자원을 요청할 때 사용됩니다. 예를 들어, 웹 페이지를 가져올 때 사용됩니다.
• POST: 서버에 데이터를 전송할 때 사용됩니다. 예를 들어, 사용자 정보나 댓글을 제출할 때 사용됩니다.
• URL: 요청하려는 자원의 위치를 나타내며, 서버는 이 URL을 통해 요청을 처리합니다.
  브라우저가 요청을 보내면, 서버는 요청을 수신하고 필요한 처리를 시작합니다.

응답(Response)

응답은 서버가 클라이언트의 요청에 대해 보내는 데이터입니다. 서버는 요청을 처리한 후, 다음과 같은 정보를 포함한 응답을 클라이언트에게 반환합니다:

• 상태 코드: 요청의 결과를 나타내는 숫자로, 예를 들어 200은 성공, 404는 페이지를 찾을 수 없음을 의미합니다.
• 헤더: 응답에 대한 메타 정보를 포함하며, 콘텐츠 유형, 서버 정보 등을 전달합니다.
• 본문: 요청한 자원의 실제 데이터가 포함됩니다. 예를 들어, HTML 문서, JSON 데이터 등이 여기에 해당합니다.

브라우저는 서버로부터 받은 응답을 해석하고, 사용자에게 웹 페이지를 표시합니다.

4. HTTPS

HTTPS는 HTTP의 보안 버전으로 웹에서 데이터를 안전하게 전송하기 위해 설계되었습니다. HTTP는 클라이언트와 서버 간의 데이터 전송을 위한 프로토콜이지만, 데이터가 암호화되지 않기 때문에 중간에서 제 3자가 데이터를 쉽게 가로챌 수 있다는 단점이 있습니다. 하지만, HTTPS는 SSL 또는 TLS 프로토콜을 사용하여 데이터를 암호화하기 때문에 보다 안전합니다.

SSL, TLS란?

SSL(Secure Sockets Layer)과 TLS(Transport Layer Security)는 인터넷에서 데이터의 안전한 전송을 위해 사용되는 프로토콜입니다. 두 프로토콜 모두 암호화와 데이터 무결성 및 인증을 제공하여 안전한 통신을 보장합니다.

SSL

넷스케이프에서 개발한 암호화 프로토콜로, 인터넷에서 데이터 전송의 보안을 제공하기 위해 설계되어 클라이언트와 서버 간의 안전한 연결을 설정하는데 사용합니다.

• 암호화: 데이터가 전송되는 동안 암호화되어 제3자가 내용을 가로채기 어렵게 만듭니다.
• 인증: 서버의 신원을 확인하여, 클라이언트가 신뢰할 수 있는 서버와 통신하고 있는지 확인합니다.
• 무결성: 전송된 데이터가 중간에서 변경되지 않았음을 보장합니다.

TLS

TLS는 SSL의 후속 프로토콜로, 보안을 강화하고 SSL의 취약점을 개선하여 설계되었습니다. 현재 인터넷에서 가장 널리 사용되는 보안 프로토콜입니다.

• 향상된 보안: TLS는 더 강력한 암호화 알고리즘을 사용하고, 다양한 보안 취약점을 개선하였습니다.
• 버전 호환성: TLS는 SSL과의 호환성을 유지하면서도 새로운 기능과 보안 프로토콜을 추가합니다.
• 다양한 암호화 방법: TLS는 다양한 암호화 방법을 지원하여, 사용자가 필요에 따라 선택할 수 있도록 합니다.

SSL과 TLS의 차이점

• 보안성: TLS는 SSL보다 더 강력한 보안 기능을 제공하며, 여러 보안 취약점을 해결합니다.
• 프로토콜 버전: SSL은 더 이상 사용되지 않으며, TLS가 현재의 표준 프로토콜입니다.
• 성능: TLS는 성능을 개선하기 위해 여러 최적화가 이루어졌습니다.

두 프로토콜은 안전한 데이터 전송을 위한 프로토콜로 HTTP를 보안적으로 강화하여 데이터 암호화, 무결성, 인증을 제공해주는 역할을 합니다!

WebSocket

소켓(Soket)

소켓은 네트워크상에서 동작하는 프로그램 간의 통신을 위한 종착점입니다. 1대1 통신의 경우, 양측 모두 소켓이 존재해야 통신이 가능하며, 현재 대부분의 통신은 인터넷 프로토콜(TCP, UDP)에 기반하고 있으므로, 대부분의 네트워크 소켓은 인터넷 소켓입니다.

웹 소켓(Web Soket)

웹소켓은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜로, 하나의 TCP 접속에 전이중 통신 채널을 제공합니다. 웹소켓은 HTTP 또는 HTTPS 위에서 동작하도록 설계되었으며, 초기 연결은 HTTP 핸드셰이크를 통해 이루어집니다. 이후에는 TCP 연결을 통해 데이터가 실시간으로 전송됩니다. 이로 인해 클라이언트와 서버는 서로에게 즉시 데이터를 전송할 수 있으며, 이는 실시간 애플리케이션(예: 채팅, 실시간 게임 등)에서 매우 유용한 기술입니다.

HTTP와는 달리, 웹소켓 연결은 한 번 열린 후 계속 유지되므로, 클라이언트(프론트엔드)와 서버(백엔드)에서 언제든지 데이터를 전송할 수 있습니다. 이러한 특성 덕분에 실시간으로 진행되는 통신에서 적극적으로 사용되고 있습니다.

장점

• 실시간 데이터 전송: 웹소켓은 클라이언트와 서버 간의 실시간 통신을 가능하게 하여, 사용자 경험을 향상시킵니다.
• 효율적인 리소스 사용: 지속적인 연결을 통해 불필요한 연결 수립을 줄이고, 서버와 클라이언트 간의 리소스 사용을 최적화합니다.
• 낮은 지연 시간: 데이터 전송 시 지연 시간이 적어, 빠른 반응이 필요한 애플리케이션에 적합합니다.

단점

• 복잡한 구현: 웹소켓을 구현하는 것은 일반적인 HTTP 요청/응답 방식보다 복잡할 수 있습니다.
• 브라우저 호환성: 대부분의 최신 브라우저에서 지원되지만, 구형 브라우저 즉 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없습니다.
• 서버 리소스 소모: 웹소켓은 한 번 연결되면 별도의 에러나 지시가 없는 한 지속적인 연결을 유지하므로, 많은 클라이언트가 동시에 연결될 경우 서버의 부하와 리소스 소모가 증가할 수 있습니다.

실습

웹 소켓(WebSocket) 통신을 위한 Node.js의 모듈인 ws 라이브러리를 사용하였습니다.

ws.on 메서드

• 정의: ws.on 메서드는 특정 이벤트에 대한 리스너를 설정하는 데 사용됩니다. 주로 다음과 같은 이벤트를 처리합니다:

open: 연결이 성공적으로 이루어졌을 때 발생합니다.
message: 서버로부터 메시지를 수신했을 때 발생합니다.
error: 연결 중 오류가 발생했을 때 발생합니다.
close: 연결이 종료되었을 때 발생합니다.

ws.send 메서드

• 정의: ws.send(data) 메서드는 서버로 데이터를 전송하는 데 사용됩니다. 이 메서드는 연결이 열린 상태에서만 호출할 수 있습니다.

WebSocket vs HTTP communication 이미지 출처 : https://velog.io/@sj_yun/Web-Socket%EC%9D%B4%EB%9E%80