HTTP/ Ajax / WebSocket 의 등장 (feat. Active X)
우선 알고 가야 할 개념
요청 값에 대한 서버로 부터 HTML 문서를 응답을 받는다 = 웹 페이지를 이동한다
HTTP의 일반적인 통신
사용자는 서버로부터 새로운 정보를 받아보기 위해 반드시, 새로운 URL을 요청을 꼭 해야 만 한다.
즉, 브라우저가 웹서버에게 요청을 하면 응답 값으로 HTML을 받고 새로운 페이지로 이동해야만 한다.
이 방식은 매우 비효율적이고 시각적으로도 매우 구리다 (feat. 이때 Active X가 등장함)
1. Ajax 의 등장 (Asynchronous Javascript And Xml)
HTTP를 좀 더 효율적으로 사용하기 위해 구글에서 Ajax라는 기술을 등장 시켰다.
이름 그대로 비동기적인으로 자바스크립트로 DOM을 읽고 쓰며 XMLHttpReqeust 객체를 통해 서버와 데이터를 주고 받는다.
DOM 이란? Dom(Document Object Model), Virtual DOM
Ajax는 새로운 HTML을 서버로부터 받는 것이 아니다.
즉, Client는 새로운 페이지로 이동할 필요 없이 동일 웹 페이지 내에서 DOM을 변경 한다.
동작원리
1. 사용자의 이벤트로부터 Javascript는 어떠한 Data 가 쓰여진 DOM을 읽는다.
2. 그리고 XMLHttpRequest 객체를 통해 웹 서버에 Data 를 전송한다.
3. 그럼 웹서버는 요청을 처리하고 XML, Text 혹은 JSON 형태로 XMLHttpRequest 객체에 전송한다
4. 그러면 Javascript가 해당 응답 정보를 DOM에 쓴다
5. 그렇게 결과 페이지가 만들어진다.
6. 결론적으로, Ajax를 쓰면 동일한 페이지의 일부를 수정할 수 있다(페이지 내부 변화만 일어남)
( 전체 페이지 갱신이 아닌, 부분 페이지 갱신만 하여 효율적임 )
한계점
1. Ajax의 한계는 HTTP의 한계와 같다.
무조건 Client의 요청이 있어야 한다는 것이다. (Polling 방식)
반대로 말하면 서버는 먼저 Client에게 요청을 할 수 없다.
예시) 스마트폰 어플리케이션들의 PUSH 알람이 불가 능하다 (서버가 먼저 요청 불가능)
한계 해결
HTML 5의 WebSocket(웹소켓)이 이 모든 문제를 해결했다
2. WebSocket(웹소켓)
양방향 통신을 할 수 있도록 지원하는 약속이다
Client가 굳이 새로고침 하지 않아도 양방향 소통이 가능하다.
a. 특징
1. http:// 가 아닌 ws:// 와 같은 Wen Socket Structure를 사용한다.
2. Websocket Handshake를 해야함. (TCP의 3-Way-Handshake 와 헷갈리지 말 것)
b. 동작원리
HTTP로 WebSocket Handshake 과정 후 ws 프로토콜을 이용
c. WebSocket Handshake (연결)
1. Client -> Server
Client 가 Server에게 Upgrade 를 전송
GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
- Upgrade : 프로토콜을 WS로 전환하기 위해 사용하는 헤더
반드시 websocket이라는 값을 가진다. - Connection : 네트워크 접속을 유지 여부, 반드시 Upgrade 값을 가져야함
- Sec-WebSocket-Key : 키 값
2. Server -> Client
Server 가 Client에게 101 응답코드 전송(프로토코 전환을 서버가 승인한 코드)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
- Sec-WebSocket-Accept :
Sec-WebSocket-Key에 Unique 키를 더해서 sha-1 해싱 후 base64 인코딩한 결과 값,
웹 소켓이 연결 되었음을 알림
d. Data Transfer (데이터 주고받기)
Client와 Server 간 '메시지'라는 개념으로 데이터를 주고 받음
지속적인 Heartbeat, ping을 통해 Health Check 진행
e. Close Handshake (연결 끝내기)
서버가 커넥션을 종료한다는 프레임을 보내고, 클라이언트가 Close 프레임을 전송하여 소켓 종료가 가능