당신은 주제를 찾고 있습니까 “웹 소켓 통신 – 오늘의 테크용어 : 웹소켓이 뭐냐면“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 코딩애플 이(가) 작성한 기사에는 조회수 45,242회 및 좋아요 1,310개 개의 좋아요가 있습니다.
웹 소켓 통신 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 오늘의 테크용어 : 웹소켓이 뭐냐면 – 웹 소켓 통신 주제에 대한 세부정보를 참조하세요
이걸로 메타버스 만들든가 하셈
친절한 코딩강의 https://codingapple.com
구독자용 10%할인 코드 YT123
웹 소켓 통신 주제에 대한 자세한 내용은 여기를 참조하세요.
웹 소켓 통신 (Web Socket) – Joker
웹 소켓(Web Socket)은 두 프로그램간의 메시지를 교환하기 위한 통신방법 중 하나입니다. 웹 소켓은 W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나 …
Source: caileb.tistory.com
Date Published: 9/2/2021
View: 385
[네트워크, Network]3. WebSocket, 웹 소켓에 대해서 – velog
웹 소켓은 단순한 API로 구성되어 있어, 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능하도록 하는 …
Source: velog.io
Date Published: 12/17/2021
View: 5004
Http통신 vs Socket통신 (WebSocket) – 데엔잘하고싶은데엔
Http통신 vs Socket통신 (WebSocket) · Client의 요청이 있을때만, 서버가 응답해서 정보를 전송하고, 곧바로 연결을 끊는 방식 · 즉, Client가 요청을 …
Source: pearlluck.tistory.com
Date Published: 10/18/2021
View: 1104
웹소켓 – 모던 JavaScript 튜토리얼
이에 서버가 ‘네’라는 응답을 하면 서버-브라우저간 통신은 HTTP가 아닌 웹소켓 프로토콜을 사용해 진행됩니다. 이번엔 new WebSocket(“wss://javascript.
Source: ko.javascript.info
Date Published: 3/15/2022
View: 3058
웹소켓 – 위키백과, 우리 모두의 백과사전
웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 …
Source: ko.wikipedia.org
Date Published: 6/4/2022
View: 5838
[WEB] 웹 소켓 (Socket) 정리 (역사부터 차근차근)
웹소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성합니다. Websocket API를 …
Source: inpa.tistory.com
Date Published: 5/19/2022
View: 433
HTTP 통신과 Socket 통신의 차이점 – Kotlin World
HTTP란 HyperText Transfer Protocol의 약자로 HTML 파일을 전송하는 프로토콜이라는 의미를 가진다. 웹브라우저에서 통신이 일어나며, 초기에는 HTML …
Source: kotlinworld.com
Date Published: 11/16/2022
View: 3879
WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, … WebSocket 프로토콜을 사용하여 통신하기 위해서는 WebSocket 객체를 생성해야 …
Source: developer.mozilla.org
Date Published: 5/9/2022
View: 8881
웹 소켓(WebSocket) 개념 이해 – 유아마루
웹 소켓은 TCP 연결에 완전한 이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜입니다. 웹 소켓 프로토콜은 2011 IETF에 의해 RFC 6455에서 표준화 …
Source: urmaru.com
Date Published: 4/24/2021
View: 8703
websocket, socket.io를 이용한 양방향 통신
websocket이란 웹 서버와 웹 브라우저간 실시간 양방향 통신환경을 제공해주는 실시간 통신 기술입니다. 위의 Polling 방식(요청-응답방식)과 다르게 …
Source: www.secmem.org
Date Published: 2/10/2021
View: 7547
주제와 관련된 이미지 웹 소켓 통신
주제와 관련된 더 많은 사진을 참조하십시오 오늘의 테크용어 : 웹소켓이 뭐냐면. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 웹 소켓 통신
- Author: 코딩애플
- Views: 조회수 45,242회
- Likes: 좋아요 1,310개
- Date Published: 2022. 1. 21.
- Video Url link: https://www.youtube.com/watch?v=yXPCg5eupGM
웹 소켓 통신 (Web Socket)
웹 소켓 통신
(Web Socket)
웹 소켓(Web Socket)은 두 프로그램간의 메시지를 교환하기 위한 통신방법 중 하나입니다. 웹 소켓은 W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나이기 때문에, 현재 인터넷을 사용하는 환경에서 특히 많이 사용되고 있습니다. 예를 들면, 크롬(Chrome)이나 엣지(Edge) 등의 웹 브라우저 같은 경우에 웹 소켓 프로토콜을 지원하고 있기 때문에, 웹 브라우저를 통해서 웹 소켓을 사용하려고 한다면, javascript를 사용해서 어렵지 않게 개발할 수 있습니다.
웹 소켓 특징 2가지
1. 양방향 통신(Full-Duplex)
양방향 통신이란 데이터 송수신을 동시에 처리할 수 있는 통신방법을 말하는 것입니다. 웹 소켓은 클라이언트(client)와 서버(server)가 서로에게 원할 때 데이터를 주고 받을 수 있으니 양방향이라고 말할 수 있는 것이죠.
※ 참고로, 양방향 통신이 아닌 단방향 통신은 한쪽으로만 송신이 가능한 방법을 말하는 것입니다.
2. 실시간 네트워킹(Real Time-Networking)
웹 환경(ex, 웹 브라우저)에서 채팅(chatting), 주식(stock), 비디오(video) 데이터 등의 데이터들은 연속된 데이터를 화면에 빠르게 보여주어야 하거나, 여러 단말기(ex, PC, 스마트폰)에 빠르게 데이터를 교환하는 실시간처리가 필요한 부분들이 있습니다. 예를 들어, 요즘 가상화폐들의 변하는 가격들을 웹 사이트에서 실시간으로 볼 수 있는데 이런 서비스를 구현할 때 사용될 수 있는 것이죠.
※ 웹 소켓 특징 중 하나가 실시간 네트워킹인 이유는 웹 소켓이 아닌 다른 비슷한 기술들로는 웹 브라우저 위에서 실시간으로 통신하기가 웹 소켓에 비해 상대적으로 어렵기 때문입니다.
웹 소켓 이전의 비슷한 기술
Polling Long Polling Streaming XML Http Request Ajax (Asynchronous Javascript + XML)
사실, 웹 소켓이 등장하기 이전에, 웹 소켓의 기능과 동일하게 만들 수 있는 기술들이 있었습니다. 만약에, 웹 소켓의 이해가 부족하거나 웹 소켓을 이용해서 개발하기가 부담스러운 환경이라면, 기존의 기술들인 위 목록에 나와있는 것들 중에서 하나를 골라서 개발을 해도 웹 소켓의 기능을 비슷하게 구현가능 할 것입니다. 본 포스팅에서는 웹 소켓이 가지는 “양방향 통신”과 “실시간 통신”이라는 두가지 특징을 가지고 이전의 다른 기술들보다 조금 더 쉽게 구현할 수 있다는 것만 알아두겠습니다.
※ XML Http Request이나 Ajax의 경우,클라이언트가 서버에게 원할 때 데이터를 보내서 요청하는 것이 목적이기 때문에, 그 반대가 어렵습니다. 서버가 클라이언트에게 원할 때 데이터를 보내는 것은 어렵다는 것이죠.
웹 소켓 동작방법
웹 소켓 Handshaking 메시지 교환
Web Client 는 handshake 요청 메시지를 Web Server 에게 보낸다 . Web Server 는 handshake 응답 메시지를 Web Client에게 보낸다. Web Client 는 data payload frames 를 Web Server 에게 보낸다 . Web Server 는 data payload frames 를 Web Client 에게 보낸다 . Web Client 는 close frame 을 Web Server 에게 보낸다 . Web Server 는 close frame 을 Web Client 에게 보낸다 .
웹 소켓 프로토콜 특징
최초 접속에서만 http 프로토콜 위에서 handshaking 을 하기 때문에 http header 를 사용한다 .
프로토콜 위에서 을 하기 때문에 를 사용한다 websocket 을 위한 별도의 포트는 없으며 , 기존 포트 (http-80, https-443) 를 사용한다 .
을 위한 별도의 포트는 없으며 기존 포트 를 사용한다 websocket 프로토콜의 ws 는 http 기반으로 운영되고 , wss 는 https 기반으로 운영된다 .
프로토콜의 는 기반으로 운영되고 는 기반으로 운영된다 메시지 (Upgrade:Websocket, Connection:Upgrade)
메시지에 포함될 수있는 교환 가능한 메시지는 텍스트 (text) 와 바이너리 (binary) 이다 .
웹 소켓 개발
웹 소켓 동작에 대한 이해를 돕기 위해, 실제로 웹 소켓을 사용해서 개발해야하는 경우, 개발환경에 따라 어떻게 사용될 수 있는지를 코드 일부를 추가해봤습니다. 우선 위 그림을 보면, 3개의 클라이언트와 한 개의 서버가 그려져 있습니다. 클라이언트 중 둘(=A와 B)은 javascript 코드를 사용해서 구현된 웹 애플리케이션(Web Application) 형태로 웹브라우저 위에서 동작되고, 다른 하나(=C)는 java 코드를 사용해서 구현된 안드로이드 애플리케이션(Android Appliacation) 형태로 동작되고 있다고 생각해보겠습니다. 이 3개의 클라이언트 애플리케이션는 웹 서버인 D와 웹 소켓을 사용해서 통신이 가능합니다.
웹 클라이언트인 A, B, C는 모두 서버 D와 통신하기 위해 “ws://joker.com/say”로 접속요청을 하고 있는 것을 볼 수 있습니다. 클라이언트는 서버에서 웹소켓을 위해 열어둔 해당 주소로 메시지를 보낼 수 있습니다. 반대로,서버가 접속된 클라이언트의 웹 소켓을 통해 메시지를 보낼 수 있죠. 이렇게 서로 웹 소켓이 연결되어 있다면 이를 통해 서로에게 원할 때 메시지를 보낼 수 있는 양방향 통신을 할 수 있게 되는 것입니다.
1. 클라이언트 코드
클라이언트로 사용할 수 있는 코드 몇 가지를 소개하겠습니다. 웹 소켓은 웹 기반의 기술이다보니 크롬(chrome), 엣지(edge) 등의 유명한 브라우저들은 개발자들이 쉽게 사용할 수 있도록 이미 javascript로 제공해주고 있습니다. 먼저, WebSocket API는 거의 대부분 브라우저들이 제공해주고 있습니다. 하지만,가끔 WebSocket API를 제공하지 않는 브라우저들이 있습니다. 그렇다고 사용자들한테 WebSocket이 있는 브라우저로 가서 사용하라고 할 수는 없겠죠. 그래서 웹 브라우저가 WebSocket을 제공해주지 않는다고 하더라도 앞에서 말한 HTTP Streaming이나 HTTP Long Polling 등의 기술들을 통해 WebSocket과 동일하게 동작하도록 시켜주는 SockJS라는 라이브러리가 있습니다. WebSocket API나 SockJS 모두 인터페이스는 거의 동일하기 때문에 큰 차이없이 사용할 수 있을 것입니다.
웹 브라우저가 아닌 다른 플랫폼인 안드로이드에서도 웹 소켓을 사용할 수 있습니다. WebSocketClient라는 라이브러리를 사용하면 웹 소켓 기능을 어렵지 않게 구현할 수 있습니다. 현재(2019년 10월), java나 android에서 웹 소켓을 위해 기본으로 제공해준는 API가 없기 때문에 직접 구현하거나 어느정도 안정되어 사용할 수 있는 WebSocketClient 라이브러리를 사용하면 됩니다.
코드 : javascript
// 거의 모든 브라우저에서 지원 { var uri = “ws://joker.com/say”; var ws = new WebSocket(uri); ws.onopen = function() { .. } }
코드 : javascript (SockJS)
// SockJS Client 사용 { var uri = ” ws://joker.com/say”; var sock = new SockJS(uri); sock.onopen = function() { .. }; }
코드 : Java (in Android)
import org.java_websocket.client.WebSocketClient; { Uri uri = new URI(“ws://joker.com/say”); WebSocketClient ws = new WebSocketClient(uri) { public void onOpen(..) { .. } } }
2. 서버 코드
서버는 스프링(springframework)을 사용하는 경우를 예로 들었습니다. 스프링에서는 웹 소켓에 대한 API를 제공해주고 있기 때문에, 스프링 개발 가이드 등의 많은 곳들에서 관련된 예제들을 살펴볼 수 있을 것입니다. 참고로,아래 registerWebSocketHandlers() 내용 중 “(2)”번 라인의 경우 웹 브라우저에서 WebSocket API를 제공하지 않을 경우, SockJS 라이브러리에 정의된 대로 동작하도록 추가시킨 것입니다. 따라서, “(2)”번 라인의 경우 현재 사용되고 있지만 만약에 모든 브라우저가 기본으로 제공된다면 제거를 해도 상관없을 것입니다.
코드 : Java (using Spring Framework)
// import org.springframework.web.socket.WebSocketHandler; @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { private final WebSocketHandlerwsHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new wsHandler(), “/say”).setAllowedOrigins(“*”); // (1) registry.addHandler(new wsHandler(), “/say”).setAllowedOrigins(“*”).withSockJS(); // (2) } }
웹 소켓 보안 고려사항
1. Non browser clients
웹 소켓은 클라이언트를 웹 브라우저를 사용해서 운영될 경우, header의 origin정보를 확인함으로써, 악성 javascript를 걸러낼 수 있습니다. 이 말은 웹 브라우저에서 기존에 사용하고 있던 동일 근원 정책(Same-Origin Policy)을 통해 악성 리소스(resource)로부터 보호할 수 있다는 것입니다.
※ Same-Origin Policy는 웹 브라우저의 페이지에 보여지기 위해 필요한 이미지(ex, jpg, png)나 javascript나 css등을 포함하는 모든 리소스(resource)들은 동일한 사이트로부터 가지고 와야한다는 정책으로 웹 브라우저에서 보안을 위해 만들어둔 기술을 말하는 것입니다.
웹 소켓은 클라이언트를 웹 브라우저가 아닌 다른 곳에서(ex, android, ios, windows) 운영될 경우, 악성 resource(ex, 악성 javascript)로부터 보호를 할 수 없으므로, 클라이언트와 서버는 이를 고려해서 사용해야 합니다. 웹 소켓은 웹 브라우저 위의 웹 페이지를 통해 사용되는 환경에서 운영되는 프로토콜로 만들어진 것이기 때문에, 웹 브라우저가 아닌 다른 클라이언트에서는 Same-Origin Policy와 같은 정책들을 전혀 사용할 수 없는 것이죠.
2. Origin considerations
앞에 1번 고려사항에서 언급했듯이, 웹 소켓은 origin 모델을 사용해서 악성 javascript로부터 보호하고 있습니다. 웹 브라우저에서 Same-Origin Policy을 통해 보호을 하고 있듯이, 웹 서버에서도 origin을 확인해야 하는 로직이 추가되어야 합니다.따라서, 서버에서 모르는 origin으로부터 요청이 들어온다면 “HTTP 403 Forbidden” 에러 상태 코드로 응답을 해서 통신을 못하도록 막아야 합니다.
3. WebSocket Client Authentication
웹 소켓 프로토콜은 핸드셰이킹(handshaking) 단계에서 서버가 클라이언트를 인증하는 특별한 방법을 제시하지 않고 있습니다. 따라서, 클라이언트 인증이 필요한 경우 HTTP 인증이나 TLS 인증 등을 사용해야 합니다.
※ 참고로, TLS 인증의 경우 핸드셰이킹 과정에서 클라이언트와 서버는 서로에게 자신의 인증서(Ceritificate)를 전달하고 이를 검증함으로써, 인증을 할 수 있습니다.
참고
Javascript WebSocket API 설명
https://developer.mozilla.org/ko/docs/Web/API/WebSocket
SockJS API 라이브러리
https://mvnrepository.com/artifact/org.webjars/sockjs-client/0.3.4
WebSocket 프로토콜 RFC 6455
https://tools.ietf.org/html/rfc6455
Http통신 vs Socket통신 (WebSocket)
728×90
네트워크를 통해 서버로 데이터를 가져오기 위한 통신방법 http통신, socket통신
1.Http 통신
Client의 요청이 있을때만, 서버가 응답해서 정보를 전송하고, 곧바로 연결을 끊는 방식
즉, Client가 요청을 보내고 server가 응답하는 단방향통신 (연결상태유지x : stateless)
실시간이 아니라 필요한경우에만 server로접근하는 콘텐츠위주의 데이터를 사용할때 용이
예를 들어 블로그에 들어오는 상황
웹브라우저(Client)가 웹서버로 글에 대한 내용을 보내달라고 요청을 해서,
서버가 전달해주고, 바로 연결종료하는 http통신방식
2.Socket 통신
Client와 Server가 특정port을 통해 연결을 성립하고 있어서, 실시간으로 양방향 통신을 하는 방식
Client가 Server한테만 요청을 보내는 http와 달리
Server 역시 Client한테 요청을 보낼 수 있는 양방향통신 (연결상태유지 : stateful)
계쏙 연결을 유지하는 연결지향형 통신이라 실시간통신이 필요한 경우에 자주사용
예를들어 실시간 스트리밍중계나, 실시간채팅
Client가 서버한테 동영상을 요청하고, 동영상이 종료되는 순간까지 통신을 해야하기 때문에 소켓통신방식
웹소켓방식
웹에서 사용하는 socket통신방식
프로토콜은 ws(websocket), wss(websocket secure) 사용
포트는 HTTP(80), HTTPS(443)과 동일한 포트사용
클라이언트와 서버가 지속적으로 TCP라인을 통해 지속적으로 연결된 양방향 통신
[http통신과 socket통신 차이]mangkyu.tistory.com/48 [WebSocket] victorydntmd.tistory.com/250반응형
RFC 6455 명세서에 정의된 프로토콜인 웹소켓(WebSocket) 을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있습니다. 이때 데이터는 ‘패킷(packet)’ 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이뤄집니다.
이런 특징 때문에 웹소켓은 온라인 게임이나 주식 트레이딩 시스템같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 아주 적합합니다.
웹소켓 커넥션을 만들려면 new WebSocket 을 호출하면 되는데, 이때 ws 라는 특수 프로토콜을 사용합니다.
let socket = new WebSocket(“ws://javascript.info”);
ws 말고 wss:// 라는 프로토콜도 있는데, 두 프로토콜의 관계는 HTTP와 HTTPS의 관계와 유사합니다.
항상 wss:// 를 사용합시다. wss:// 는 보안 이외에도 신뢰성(reliability) 측면에서 ws 보다 좀 더 신뢰할만한 프로토콜입니다. ws:// 를 사용해 데이터를 전송하면 데이터가 암호화되어있지 않은 채로 전송되기 때문에 데이터가 그대로 노출됩니다. 그런데 아주 오래된 프락시 서버는 웹소켓이 무엇인지 몰라서 ‘이상한’ 헤더가 붙은 요청이 들어왔다고 판단하고 연결을 끊어버립니다. 반면 wss:// 는 TSL(전송 계층 보안(Transport Layer Security))이라는 보안 계층을 통과해 전달되므로 송신자 측에서 데이터가 암호화되고, 복호화는 수신자 측에서 이뤄지게 됩니다. 따라서 데이터가 담긴 패킷이 암호화된 상태로 프락시 서버를 통과하므로 프락시 서버는 패킷 내부를 볼 수 없게 됩니다.
소켓이 정상적으로 만들어지면 아래 네 개의 이벤트를 사용할 수 있게 됩니다.
open – 커넥션이 제대로 만들어졌을 때 발생함
– 커넥션이 제대로 만들어졌을 때 발생함 message – 데이터를 수신하였을 때 발생함
– 데이터를 수신하였을 때 발생함 error – 에러가 생겼을 때 발생함
– 에러가 생겼을 때 발생함 close – 커넥션이 종료되었을 때 발생함
커넥션이 만들어진 상태에서 무언가를 보내고 싶으면 socket.send(data) 를 사용하면 됩니다.
예시를 살펴봅시다.
let socket = new WebSocket(“wss://javascript.info/article/websocket/demo/hello”); socket.onopen = function(e) { alert(“[open] 커넥션이 만들어졌습니다.”); alert(“데이터를 서버에 전송해봅시다.”); socket.send(“My name is Bora”); }; socket.onmessage = function(event) { alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`); }; socket.onclose = function(event) { if (event.wasClean) { alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`); } else { // 예시: 프로세스가 죽거나 네트워크에 장애가 있는 경우 // event.code가 1006이 됩니다. alert(‘[close] 커넥션이 죽었습니다.’); } }; socket.onerror = function(error) { alert(`[error] ${error.message}`); };
위 예시는 데모 목적을 위해 만들어놓은 간이 Node.js 서버(server.js)에서 돌아갑니다. 서버는 ‘Hello from server, Bora’라는 메시지가 담긴 응답을 클라이언트에 보내고, 5초 후 커넥션을 종료시킵니다.
서버 쪽 코드가 동작하면서 open → message → close 순의 이벤트를 볼 수 있었던 것이죠.
이제 여러분은 웹소켓 통신이 어떻게 이뤄지는지를 알게 되셨습니다. 생각보다 꽤 간단하죠?
지금부턴 실무 수준에서 웹소켓을 활용할 수 있도록 웹소켓에 대해 좀 더 자세히 알아봅시다.
new WebSocket(url) 을 호출해 소켓을 생성하면 즉시 연결이 시작됩니다.
커넥션이 유지되는 동안, 브라우저는 (헤더를 사용해) 서버에 ‘웹소켓을 지원하나요?’라고 물어봅니다. 이에 서버가 ‘네’라는 응답을 하면 서버-브라우저간 통신은 HTTP가 아닌 웹소켓 프로토콜을 사용해 진행됩니다.
이번엔 new WebSocket(“wss://javascript.info/chat”) 을 호출해 최초 요청을 전송했다고 가정하고, 이때의 요청 헤더를 살펴봅시다.
GET /chat Host: javascript.info Origin: https://javascript.info Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q== Sec-WebSocket-Version: 13
Origin – 클라이언트 오리진(예시에선 https://javascript.info )을 나타냅니다. 서버는 Origin 헤더를 보고 어떤 웹사이트와 소켓통신을 할지 결정하기 때문에 Origin 헤더는 웹소켓 통신에 중요한 역할을 합니다. 참고로 웹소켓 객체는 기본적으로 크로스 오리진(cross-origin) 요청을 지원합니다. 웹소켓 통신만을 위한 전용 헤더나 제약도 없습니다. 오래된 서버는 웹소켓 통신을 지원하지 못하기 때문에 웹소켓 통신은 호환성 문제도 없습니다.
– 클라이언트 오리진(예시에선 )을 나타냅니다. 서버는 헤더를 보고 어떤 웹사이트와 소켓통신을 할지 결정하기 때문에 Origin 헤더는 웹소켓 통신에 중요한 역할을 합니다. 참고로 웹소켓 객체는 기본적으로 크로스 오리진(cross-origin) 요청을 지원합니다. 웹소켓 통신만을 위한 전용 헤더나 제약도 없습니다. 오래된 서버는 웹소켓 통신을 지원하지 못하기 때문에 웹소켓 통신은 호환성 문제도 없습니다. Connection: Upgrade – 클라이언트 측에서 프로토콜을 바꾸고 싶다는 신호를 보냈다는 것을 나타냅니다.
– 클라이언트 측에서 프로토콜을 바꾸고 싶다는 신호를 보냈다는 것을 나타냅니다. Upgrade: websocket – 클라이언트측에서 요청한 프로토콜은 ‘websocket’이라는걸 의미합니다.
– 클라이언트측에서 요청한 프로토콜은 ‘websocket’이라는걸 의미합니다. Sec-WebSocket-Key – 보안을 위해 브라우저에서 생성한 키를 나타냅니다.
– 보안을 위해 브라우저에서 생성한 키를 나타냅니다. Sec-WebSocket-Version – 웹소켓 프로토콜 버전이 명시됩니다. 예시에서 버전은 13입니다.
웹소켓 핸드셰이크는 모방이 불가능합니다. 바닐라 자바스크립트로 헤더를 설정하는 건 기본적으로 막혀있기 때문에 XMLHttpRequest 나 fetch 로 위 예시와 유사한 헤더를 가진 HTTP 요청을 만들 수 없습니다.
서버는 클라이언트 측에서 보낸 웹소켓 통신 요청을 최초로 받고 이에 동의하면, 상태 코드 101이 담긴 응답을 클라이언트에 전송합니다.
101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=
여기서 Sec-WebSocket-Accept 는 Sec-WebSocket-Key 와 밀접한 관계가 있습니다. 브라우저는 특별한 알고리즘을 사용해 서버에서 생성한 Sec-WebSocket-Accept 값을 받아, 이 응답이 자신이 보낸 요청에 대응하는 응답인지를 확인합니다.
이렇게 핸드셰이크가 끝나면 HTTP 프로토콜이 아닌 웹소켓 프로토콜을 사용해 데이터가 전송되기 시작합니다. 전홍이 시작된 후에 어떤일이 일어나는지는 조금 후에 자세히 살펴보겠습니다.
웹소켓 통신은 Sec-WebSocket-Extensions 와 Sec-WebSocket-Protocol 헤더를 지원합니다. 두 헤더는 각각 웹소켓 프로토콜 기능을 확장(extension)할 때와 서브 프로토콜(subprotocal)을 사용해 데이터를 전송할 때 사용합니다.
각 헤더에 대한 예시를 살펴봅시다.
Sec-WebSocket-Extensions: deflate-frame – 이 헤더는 브라우저에서 데이터 압축(deflate)을 지원한다는 것을 의미합니다. Sec-WebSocket-Extensions 은 브라우저에 의해 자동 생성되는데, 그 값엔 데이터 전송과 관련된 무언가나 웹소켓 프로토콜 기능 확장과 관련된 무언가가 여러 개 나열됩니다.
Sec-WebSocket-Protocol: soap, wamp – 이렇게 헤더가 설정되면 평범한 데이터가 아닌 SOAP나 WAMP(The WebSocket Application Messaging Protocol) 프로토콜을 준수하는 데이터를 전송하겠다는 것을 의미합니다. 웹소켓에서 지원하는 서브프로토콜 목록은 IANA 카탈로그에서 확인할 수 있습니다. 개발자는 이 헤더를 보고 앞으로 사용하게 될 데이터 포맷을 확인할 수 있습니다. 두 헤더는 new WebSocket 의 두 번째 매개변수에 값을 넣어서 설정할 수 있습니다. 서브 프로토콜로 SOAP나 WAMP를 사용하고 싶다고 가정해 봅시다. 두 번째 매개변수에 다음과 같이 배열을 넣으면 됩니다. let socket = new WebSocket(“wss://javascript.info/chat”, [“soap”, “wamp”]);
이때 서버는 지원 가능한 익스텐션과 프로토콜을 응답 헤더에 담아 클라이언트에 전달해야 합니다.
예시를 살펴봅시다. 요청 헤더는 다음과 같습니다.
GET /chat Host: javascript.info Upgrade: websocket Connection: Upgrade Origin: https://javascript.info Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q== Sec-WebSocket-Version: 13 Sec-WebSocket-Extensions: deflate-frame Sec-WebSocket-Protocol: soap, wamp
이때 서버가 다음과 같은 응답을 했다고 해봅시다.
101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g= Sec-WebSocket-Extensions: deflate-frame Sec-WebSocket-Protocol: soap
이 경우, 우리는 서버에선 ‘deflate-frame’이라는 익스텐션과 요청 프로토콜 중 SOAP라는 서브 프로토콜만 지원한다는 사실을 알 수 있습니다.
웹소켓 통신은 ‘프레임(frame)’이라 불리는 데이터 조각을 사용해 이뤄집니다. 프레임은 서버와 클라이언트 양측 모두에서 보낼 수 있는데 프레임 내 담긴 데이터 종류에 따라 다음과 같이 분류할 수 있습니다.
텍스트 프레임(text frame) – 텍스트 데이터가 담긴 프레임
이진 데이터 프레임(binary data frame) – 이진 데이터가 담긴 프레임
핑 또는 퐁 프레임(ping/pong frame) – 커넥션이 유지되고 있는지 확인할 때 사용하는 프레임으로 서버나 브라우저에서 자동 생성해서 보내는 프레임
이 외에도 ‘커넥션 종료 프레임(connection close frame) 등 다양한 프레임이 있음
브라우저 환경에서 개발자는 텍스트나 이진 프레임만 다루게 됩니다.
이유는 WebSocket .send() 메서드는 텍스트나 바이너리 데이터만 보낼 수 있기 때문입니다.
socket.send(body) 를 호출할 때, body 엔 문자열이나 Blob , ArrayBuffer 등의 이진 데이터만 들어갈 수 있습니다. 데이터 종류에 따라 특별히 무언가 세팅을 해줘야 할 필요는 없고, 텍스트나 바이너리 타입의 데이터를 넣어주면 알아서 데이터가 전송됩니다.
한편, 데이터를 받을 때, 텍스트 데이터는 항상 문자열 형태로 옵니다. 이진 데이터를 받을 때엔 Blob 이나 ArrayBuffer 포맷 둘 중 하나를 고를 수 있습니다.
socket.binaryType 프로퍼티를 사용하면 Blob 이나 ArrayBuffer 포맷 둘 중 하나를 고를 수 있는데, 프로퍼티 기본값은 “blob” 이라서 이진 데이터는 기본적으로 Blob 객체 형태로 전송받게 됩니다.
Blob은 고차원(high-level)의 이진 객체인데, 나
등의 태그와 바로 통합할 수 있어서 기본값으로 아주 적절합니다. 하지만 이진 데이터를 처리하는 과정에 개별 데이터 바이트에 접근해야 하는 경우엔 프로퍼티 값을 “arraybuffer” 로 바꿀 수도 있습니다.
socket.binaryType = “arraybuffer”; socket.onmessage = (event) => { // event.data는 (텍스트인 경우) 문자열이거나 (이진 데이터인 경우) arraybuffer 입니다. };
Imagine, our app is generating a lot of data to send. But the user has a slow network connection, maybe on a mobile internet, outside of a city.
We can call socket.send(data) again and again. But the data will be buffered (stored) in memory and sent out only as fast as network speed allows.
The socket.bufferedAmount property stores how many bytes are buffered at this moment, waiting to be sent over the network.
We can examine it to see whether the socket is actually available for transmission.
// every 100ms examine the socket and send more data // only if all the existing data was sent out setInterval(() => { if (socket.bufferedAmount == 0) { socket.send(moreData()); } }, 100);
Normally, when a party wants to close the connection (both browser and server have equal rights), they send a “connection close frame” with a numeric code and a textual reason.
The method for that is:
socket.close([code], [reason]);
code is a special WebSocket closing code (optional)
is a special WebSocket closing code (optional) reason is a string that describes the reason of closing (optional)
Then the other party in close event handler gets the code and the reason, e.g.:
// closing party: socket.close(1000, “Work complete”); // the other party socket.onclose = event => { // event.code === 1000 // event.reason === “Work complete” // event.wasClean === true (clean close) };
Most common code values:
1000 – the default, normal closure (used if no code supplied),
– the default, normal closure (used if no supplied), 1006 – no way to such code manually, indicates that the connection was lost (no close frame).
There are other codes like:
1001 – the party is going away, e.g. server is shutting down, or a browser leaves the page,
– the party is going away, e.g. server is shutting down, or a browser leaves the page, 1009 – the message is too big to process,
– the message is too big to process, 1011 – unexpected error on server,
– unexpected error on server, …and so on.
The full list can be found in RFC6455, §7.4.1.
WebSocket codes are somewhat like HTTP codes, but different. In particular, any codes less than 1000 are reserved, there’ll be an error if we try to set such a code.
// in case connection is broken socket.onclose = event => { // event.code === 1006 // event.reason === “” // event.wasClean === false (no closing frame) };
To get connection state, additionally there’s socket.readyState property with values:
0 – “CONNECTING”: the connection has not yet been established,
– “CONNECTING”: the connection has not yet been established, 1 – “OPEN”: communicating,
– “OPEN”: communicating, 2 – “CLOSING”: the connection is closing,
– “CLOSING”: the connection is closing, 3 – “CLOSED”: the connection is closed.
Let’s review a chat example using browser WebSocket API and Node.js WebSocket module https://github.com/websockets/ws. We’ll pay the main attention to the client side, but the server is also simple.
HTML: we need a