[HTTP, 웹소켓] feat. AJAX

순서
1. HTTP & AJAX
2. HTTP vs AJAX
3. 웹소켓

✅ HTTP(Hyper Text Transfer Protocol)

- 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약

 

➤ 특징1 : 클라이언트 서버 구조

- 클라이언트가 서버에 요청을 보내면, 서버가 요청에 대한 응답을 보내는 클라이언트-서버 구조

 

➤ 특징2 : 무상태 프로토콜

- 서버가 클라이언트의 상태를 보존하지 않아서 요청과 응답이 독립적

- 장점 : 응답이 독립적이기 때문에 서버를 바꾸기 쉬워서 서버 확장성이 좋음

- 단점 : 로그인 등 상태를 유지해야하는 서비스에는 클라이언트가 전송해야하는 데이터가 많아짐(쿠키, 세션, 토큰 등)

 

➤ 특징3 : 비연결성

-서버가 응답을 하고 나면 TCP/IP 연결을 끊음

- 장점 : 트래픽이 많지 않은 경우 최소한의 자원으로 효율적인 서버 유지 가능

- 단점 : 트래픽이 많은 경우 매번 TCP/IP 연결을 새로 맺어야하므로 비효율적

 

✅ AJAX(Asynchronous JavaScript and XML)

- HTTP를 기반으로 자바스크립트와 데이터 객체를 이용하여 비동기적으로 정보를 교환하는 방법

- 클라이언트는 필요한 데이터만 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 가능

- 장점 : 웹 페이지 속도 향상, 서버에서 데이터만 전송하면 되므로 코딩 양 감소, 다양한 UI 사용 가능

- 단점 : 히스토리 관리 X, 보안 문제 O, 다른 도메인과 통신 불가능

---

➤ HTTP vs AJAX

	HTTP	AJAX
서버에 요청하는 주체	웹 브라우저	데이터 객체(XMLHttpRequest 객체 등)
내용 갱신 방법	다시 요청을 보내서 새로운 페이지로 전체 갱신	서버와 데이터 주고받으며 *DOM만 갱신
페이지 변경 방법	항상 새로운 페이지로 이동	동일 페이지 내에서 변경 가능

** DOM(Document Object Model) = 문서(페이지) 객체 모델

HTTP 설명 그림

AJAX 설명 그림

---

✅ 웹소켓

- AJAX도 여전히 HTTP로 서버와 통신하기 때문에, 요청을 보내야 응답을 받을 수 있다는

  HTTP의 한계를 완전히 벗어나진 못 함

- HTML5에 이르러 기존의 단점을 극복하고,

  순수 웹 환경에서 실시간 양방향 통신이 가능하게 만든 스펙의 명칭이 바로 웹 소켓

- 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 HTML5 표준 기술

 

➤ 특징

- 웹소켓 API를 통해 서버로 메시지를 보내고, 요청 없이 응답을 자유롭게 받아올 수 있음

- 접속 확립에는 HTTP를 사용하지만 그 후의 통신은 웹소켓 독자의 프로토콜로 이루어짐

- 송신과 수신이 독립적이지 않아서 하나의 커넥션으로 데이터를 송수신 가능

- URL이 http://www.naver.com 형식이 아닌 ws://www.naver.com 형식

 

➤ 웹소켓 사용 예시

- 페이스북 등의 SNS

- LOL 등의 여러 사용자가 동시에 하는 게임

- 화상 채팅 앱

- 위치 기반 앱

등등