[Web] Socket, WebSocket (소켓과 웹소켓)

프로젝트를 진행하면서 소켓을 정말 많이 사용하게 되었었다. 시간이 꽤 지났지만 다시 한번 학습해보면서 복기도 하고 나름대로 정리도 해보려고 포스트를 작성하기 시작했다!

🌏 Socket

• 프로그램이 네트워크에서 데이터를 주고받을 수 있도록 네트워크 환경에 연결할 수 있게 만들어진 연결부
• 데이터를 주고 받을 수 있는 구조체로 소켓을 통해 데이터 통로가 만들어진다.
• 서버 소켓, 클라이언트 소켓으로 구분된다. (요청을 하는 쪽이 클라이언트, 받는 쪽이 서버)
• TCP/IP, UDP/IP 유형이 존재하나 일반적으로 TCP/IP 프로토콜을 이용함.
• 소켓은 클라이언트와 서버가 데이터 패킷을 교환할 수 있도록 하는 IP 주소와 포트 번호라고 하는 통신용 끝점(End-Point)을 만들어 작동

📒 동작방식

(출처 - https://on1ystar.github.io/socket%20programming/2021/03/16/socket-1/)

✓ Server

1. socket(): 소켓 생성(TCP는 stream)
   • 새로운 client의 요청을 대기하기 위함
2. bind(): 사용할 IP address와 Port number 등록
   • 포트 번호가 다른 소켓의 포트 번호와 중복되지는 않을까?
   • 운영체제에서는 소켓들이 중복된 포트 번호를 사용하지 않도록, 내부적으로 포트 번호와 소켓 연결 정보를 관리한다.
3. listen(): 연결 되지 않은 소켓을 요청 수신 대기 모드로 전환(Block 상태)
4. accept(): client의 요청dmf 수락 → 통신을 위한 새로운 소켓 생성(실질적인 소켓 연결)

✓ Client

1. socket(): 마찬가지로 소켓 생성(TCP는 stream)
2. connect(): Client에서 Server와 연결하기 위해 소켓과 목적지 IP address, Port number 지정 (Block 상태)

✓ Server-Client

• send(), recv(): Client는 처음에 생성한 소켓으로, Server는 새로 반환(생성)된 소켓으로 client와 server간에 데이터 송수신
• close(): 소켓을 닫음

 

🌏 WebSocket

소켓은 두 컴퓨터 간의 통신을 설정하기 위한 기본 메커니즘을 제공하는 반면 웹 소켓은 소켓 위에 구축되어 웹 클라이언트와 서버 간의 실시간 전이중 통신을 위한 상위 수준 프로토콜을 제공하는 것이 차이점이다. (웹 소켓은 HTTP 레이어에서 동작, 소켓은 TCP/IP) 

 

웹소켓은 HTTP로 실시간 통신을 하는 것이 어려웠기 때문에 해결책으로 나온 기술이다.

HTTP 실시간 통신의 어려운 이유
1. 비연결성으로 인한 단방향 통신
2. 비연결성으로 인한 매번 연결 맺고 끊는 과정의 비용
3. request-response 의 구조
4. 헤더의 비중이 너무 큼

 

📒 동작방식

먼저 소켓 연결을 하기 위해 핸드쉐이킹이 필요하다 이때 HTTP 또는 HTTPS 프로토콜을 통해 이루어진다.

클라이언트의 요청 헤더

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13

 

• Method: 반드시 GET 요청으로 보내야 함.
• Host: 웹소켓 서버의 주소
• Upgrade: 현재 프로토콜에서 다른 프로토콜로 업그레이드, 변경하기 위함(webSocket 프로토콜로 변환)
• Connection: Upgrade 필드가 명시되어있다면, Connection 필드도 명시해줘야 함.
• Sec-WebSocket-Key: 길이가 16 바이트인 임의의 값으로 클라이언트와 서버가 신원을 인증하는데 사용

이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있다. (User-Agent, Referer, Cookie 등) 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있지만 웹소켓과 관련이 없을 경우 무시한다.

 

서버의 응답 헤더

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

 

101 Switching Protocols으로 응답이 오면 웹소켓이 연결되었다는 의미이다.

클라이언트가 보낸 헤더가 잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "400 Bad Request (en-US)" 응답을 보내 즉시 소켓을 종료시킨다.

 

이런 과정을 통해서 프로토콜이 ws, wss(WebSocket)으로 변환되면 frame을 사용하여 데이터를 교환할 수 있다.

Frame

WebSocket의 데이터 교환에서 사용되는 가장 작은 단위의 데이터로 헤더와 페이로드로 구성되어 있다.

Frame Header

헤더는 일반적으로 길이가 2바이트이지만 대용량 페이로드의 경우 최대 14바이트까지 가능하다.

 

1. 첫 번째 바이트에 포함되는 정보

• FIN: 이것이 메시지의 마지막 조각인지 여부를 나타냅니다.
• RSV1, RSV2, RSV3: 확장에 사용할 수 있는 예약된 비트
• Opcode: 페이로드 유형 지정(예: 텍스트, 바이너리, 핑 등)

2. 두 번째 바이트 포함되는 정보(페이로드에 관함)

• Mask: 페이로드 마스킹 여부 표시
• 페이로드 길이: 페이로드의 길이 지정

Frame Payload

페이로드에는 WebSocket 연결을 통해 전송되는 실제 데이터가 포함된다. 페이로드가 마스킹된 경우(헤더의 마스크 플래그로 표시됨) 헤더에도 포함된 마스킹 키와 XOR 처리된다.

 

페이로드의 길이는 헤더에 지정된 페이로드 길이에 따라 가변 길이일 수 있다.

만약 페이로드 길이가 125바이트 이하이면 프레임에 직접 저장되지만 페이로드 길이가 125바이트보다 크면 페이로드 길이 필드는 126 또는 127로 설정되고 페이로드의 실제 길이는 헤더 뒤에 오는 별도의 필드에 저장된다.

 

Frame 종류 

Continuation Frames
Text Frames	UTF-8로 인코딩된 텍스트 데이터를 전송하기 위해 사용
Binary Frames	바이너리 데이터를 전송하기 위해 사용
Close Frames	연결을 닫아야 한다는 신호를 보내는 데 사용
Ping Frames	연결이 여전히 활성 상태인지 테스트하는 데 사용
Pong Frames	Ping 프레임에 응답하고 연결이 여전히 활성 상태임을 나타내는 데 사용

 

🌏 node에서 웹소켓 사용하기

오래된 브라우저의 경우 지원하지 않는 경우 존재하기 때문에 Cross-platform WebSocket API인 Socket.io를 사용한다.

on('메소드명', 콜백함수(data){})	소켓 연결된 상대편(브라우저 / 서버)에서 메소드명을 매개변수로 갖는 emit 호출하면 이후 콜백함수가 동작한다. emit 메소드의 매개변수를 data로 받아와 적절한 동작을 수행한다.
on('connection', function(socket))	소켓 연결을 위해 필수적으로 수행되어야 하는 함수.jQuery에서 $().ready()와 같은 느낌으로 사용하면 된다.function의 매개변수로 소켓 객체를 사용할 수 있다.
emit('메소드명', data)	소켓 연결된 상대편(브라우저 / 서버)에서 메소드명을 갖는 on 함수를 호출 한다. 이때 on 함수에 필요한 데이터를 data로 함께 전송한다.
join("공간명")	'공간명'을 키로 해 소켓들을 관리할 수 있게 해주는 메소드.

 

Client

import { Socket } from 'socket.io-client';

const socket = Socket.connect();

// 소켓이 연결이 됨
socket.on('connect', () => console.log('socket connect!'))

// 서버로부터 받은 데이터 출력
socket.on('이벤트이름', data => console.log(data));

// 서버로 전송
socket.emit('이벤트이름', {데이터});

 

Server

const httpServer = http.createServer(app);
const io = new Server(httpServer);

// 소켓 연결됨
io.on('connection', socket => {
	// 클라이언트에게 데이터를 받고 출력
    socket.on('이벤트이름', data => console.log(data));

    // 모든 클라이언트에게 메시지를 전송
    socket.broadcast.emit('이벤트이름', {보낼 데이터});

    // 특정 클라이언트에게 전송
    socket.to(id).emit('이벤트이름', {보낼 데이터})
});

 

추가적인 메서드도 있고 이미 등록되어 있는 이벤트들도 있는데 자세한건 공식문서에서 참고하면 좋을 것 같다!

https://socket.io/docs/v4/

Introduction | Socket.IO

 

잘못된 내용이 있다면 편하게 말씀부탁드립니다!!!

 

📚 참고

https://www.youtube.com/watch?v=MPQHvwPxDUw 

https://poiemaweb.com/nodejs-socketio

Node.js(Express)와 Socket.io | PoiemaWeb

https://on1ystar.github.io/socket%20programming/2021/03/16/socket-1/

소켓 프로그래밍 - 소켓의 의미/특징/종류 · on1ystar