나의 독학은

9장, 10장 - 웹 소켓과 웹 콘텐츠에서 사용하는 기술 본문

학습/그림으로 배우는 Http & Network Basic

9장, 10장 - 웹 소켓과 웹 콘텐츠에서 사용하는 기술

안종혁 2023. 9. 15. 16:03

9.3 브라우저에서 양방향 통신을 하는 WebSocket

✅ WebSocket 프로토콜

- 핸드쉐이크로 최초 접속할 때는 HTTP 프로토콜을 이용, 그 후로는 WebSocket 프로토콜 이용

- 한 번 접속을 하면 서버와 클라이언트 어느 쪽에서도 송신이 가능하다.

 

✅ 특징

1. 서버 푸시 기능 → 서버는 클라이언트의 리퀘스트를 기다리지 않고 데이터 보냄

2. 통신량의 삭감 접속을 유지함으로써 접속하는데 필요한 오버헤드의 양과 헤더의 사이즈를 줄임

3. 실시간 네트워킹 → 채팅, 주식, 비디오 데이터 등 실시간 데이터가 필요한 곳에 사용

4. 핸드쉐이크/리퀘스트 및 리스폰스 → HTTP의 Upgrade 헤더 필드를 사용하여 핸드쉐이크를 실시함.

핸드쉐이크 리퀘스트 메시지 핸드쉐이크 리스폰스 메시지
내용 설명 내용 설명
GET /chat HTTP/1.1 반드시 GET 메서드 사용 HTTP/1.1 101 Switching Protocols 상태코드 101 : 연결 됨을 의미
Host: ~~ 서버의 주소 Upgrade: websocket  
Upgrade: websocket 웹 소켓으로 통신한다는 의미 Connection: Upgrade  
Connection: Upgrade Upgrade헤더 필드를 이용 Sec-WebSocket-Accept
   : s3pPLMBiTxaQ9ky==
Sec-WebSocket-Key에서 생성된 값이 저장
Sec-WebSocket-Key
   : dGhllHnhbnxZ2Qy==
Key를 이용하여 서버와 클라이언트간의 신원을 인증 Sec-WebSocket-Protocol
   : chat
 
Origin
   : ~~
클라이언트의 주소    
Sec-WebSocket-Protocol
   : chat, superchat
서브 프로토콜을 저장    
Sec-WebSocket-Version: 13  -    

이렇게 핸드쉐이크에 의해 WebSocket 커넥션이 되면 HTTP가 아닌 WebSocket만을 이용해 서버와 클라이언트가 통신한다.

10.3 웹 애플리케이션

✅ 웹 애플리케이션?

쇼핑 사이트, 인터넷 뱅킹, SNS등 웹 기능을 사용해서 제공되는 프로그램을 지칭하며 동적 컨텐츠이다.

*동적 컨텐츠 : 웹을 새로고침 할 때마다 보이는 컨텐츠가 바뀌는 것

 

✅ Java에서 보급된 서블릿

동적 컨텐츠를 생성하기 위한 Java기반의 프로그램

서블릿은 웹 서버의 컨테이너 속에서 동작하기 때문에 다량의 액세스에도 비교적 부하가 덜 걸림

*컨테이너 : 서블릿이 실행되는 환경으로 Apache Tomcat 와 같은 환경을 말한다.

10.4 데이터 송신에 이용되는 포맷이나 언어

- 데이터를 효율적으로 다룰 때 사용하는 언어들

 

✅ 범용적으로 사용하는 마크업 언어 XML

XML은 HTML과 같은 문서 기술 언어에서 파생된 것이지만 HTML과 달리 데이터를 구조화 하는데 용이하다.

 

ex) HTML로 작성된 문서

<html>
<head>
<title>T사 세미나 소개 </title>
</head>
<body>
<h1>T사 세미나 소개</h1>
...

ex) XML로 구조화된 문서

<세미나 번호="TR001" 이름="웹 애플리케이션 취약성 진단 강좌 ">
<장르></장르>
<개요> .... </개요>
...

 

✅ JavaScript에서 사용하는 JSON

JSON 데이터는 단순하고 가볍게 읽고, 문자열마저도 간단하게 읽을 수 있다.

 

 

 

그림으로 배우는 Http & Network Basic

출처

- 그림으로 배우는 Http & Network Basic

- 코일의 Web Socket