웹소켓에 대해 알아보고 구현해보자

gaeng2y
3 min readMay 29, 2023

--

안녕하시무려니까… 갱입니다…🫡

감금 블로그단 2회차에 작성된 포스팅입니다…

WebSocket

웹소켓이란 무엇인가에 대해서는 위키백과에서 찾아보자.
웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다.

웹소켓 이전에는 코멧 채널을 사용하여 수행이 가능했지만 코멧 채널을 구현하는게 비용이 너무 컸으며 TCP 핸드셰이크와 HTTP 헤더 부하로 인해 작은 메세지에는 비효율적이였다.

웹소켓 프로토콜은 웹의 보안 문제를 타협하지 않고 이 문제를 해결하는 것을 목적으로 했다.

웹소켓 프로토콜 사양은 http/https의 스킴으로 시작되지 않고 ws, wss 스킴으로 시작된다.

Protocol handshake

웹소켓을 연결하기 위해 클라이언트는 웹소켓 핸드셰이크를 보내며, 서버에서는 응답을 아래의 예시와 같이 반환한다.

1. 클라이언트에서 HTTP 통신을 이용하여 서버에 소켓 통신이 가능한지 요청을 보냄.
이 때 헤더에 소켓을 사용하기 위한 Upgrade, Connection, WebSocket에 관한 정보를 함께 전송한다.

클라이언트 요청:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

2. 서버에서 웹소켓 통신이 가능하다면 101 상태의 응답을 보내며,
이 때 서버에서는 클라이언트에서 받은 `Sec-WebSocket-Key` 키 값에 문자를 더한 뒤
암호화하여 `Sec-WebSocket-Accept`로 클라이언트에 응답한다.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
// 258EAFA5-E914–47DA-95CA-C5AB0DC85B11을 추가하고
// 새 값의 SHA-1을 가져온 다음 base64로 인코딩
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

3. 이후에는 `ws` 혹은 `wss` 프로토콜을 이용해 전이중 통신을 진행한다.

웹소켓을 사용한 연결을 나타낸 그림(출처: 위키백과)

WebSocket Swift Example

웹소켓 서버는 해당 예제를 통해 만들었습니다.

아래의 레포지토리를 통해 확인해주시면 될 것 같습니다.

간단히 설명하면

WebSocket을 싱글톤으로 만들어서 연결하며

ViewController에서는 텍스트필드와 버튼을 통해 메세지 전송, 웹소켓 연결 해제를 구현했습니다.

--

--