정의/설명
WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 간에 연속적이고 완전한 양방향 연결 스트림을 생성하는 기술입니다. WebSocket 연결은 HTTP 프로토콜을 사용하여 이루어집니다. WebSocket을 사용하면 단일 HTTP 연결을 통해 양방향 메시지를 자유롭게 교환할 수 있습니다.
먼저 http 서버가 생성되고 websocket 서버가 연결됩니다. 그런 다음 websocket 연결 요청이 들어오면 https 프로토콜을 websocket으로 업데이트하여 들어오는 요청을 받습니다. 정상적인 연결 설정에서는 서버와 클라이언트 간에 WebSocket 연결(TCP/IP 기반)이 설정되고 HTTP 연결은 일정 시간이 지나면 자동으로 종료됩니다.
기본적으로 WebSocket API는 간단하게 구성되어 있고 아주 기본적인 기능만 제공하기 때문에 대부분의 경우 SockJS나 Socket.IO와 같은 오픈소스 라이브러리를 많이 사용하고 메시지 형식도 STOMP와 같은 프로토콜을 사용한다.
일반적인 WebSocket 클라이언트는 사용자의 브라우저이지만 프로토콜이 플랫폼에 종속되지는 않습니다.
간단한 예
WebSocket 프로토콜을 사용하여 통신하려면 (WebSocket)(https://developer.mozilla.org/en-US/WebSockets/WebSockets_reference/WebSocket>) 객체를 생성해야 합니다. 새로운 WebSocket을 호출할 수 있으며 이때 ws라는 특수 프로토콜이 사용됩니다.
let socket = new WebSocket("*ws*://javascript.info");
소켓이 정상적으로 생성되면 다음 4가지 이벤트가 발생합니다.
- 열려 있는 – 정상적으로 연결이 된 경우 발생
- 소식 – 데이터 수신 시 발생
- 실수 – 오류 발생 시 발생
- 닫다 – 연결이 끊어졌을 때 발생
웹소켓 핸드셰이크
new WebSocket(url)을 호출하여 소켓을 생성하면 즉시 연결이 시작됩니다.
연결을 유지하는 동안 브라우저는 서버에 “WebSockets를 지원합니까?”(헤더 사용)를 요청합니다. 서버가 “예”로 응답하면 서버와 브라우저 간의 통신은 HTTP 대신 WebSocket 프로토콜을 통해 이루어집니다.
- • 원본 – 클라이언트 원본(이 예에서는 https://javascript.info). WebSocket 개체는 기본적으로 원본 간 요청을 지원합니다.
- 연결: 업그레이드 – 클라이언트 측에서 프로토콜을 변경하고 싶다는 신호를 보냈음을 나타냅니다.
- 업그레이드: websocket – 클라이언트 측에서 요청한 프로토콜이 websocket임을 의미합니다.
- Sec-WebSocket-Key – 서버가 WebSocket 프로토콜을 지원하는지 확인하는 데 사용되는 보안상의 이유로 브라우저에서 생성된 키입니다.
- Sec-WebSocket-Version – WebSocket 프로토콜의 버전을 나타냅니다. 예제에서 버전은 13입니다.
서버는 클라이언트가 보낸 WebSocket 통신 요청을 처음 수신하고 이에 동의하면 상태 코드 101의 응답을 클라이언트로 보냅니다.
서버는 Sec-WebSocket-Key 값을 인코딩 및 해시하고 미리 정의된 GUID를 추가한 다음 Sec-WebSocket-Accept로 다시 보냅니다. 브라우저는 이 값을 사용하여 서버가 실제 WebSocket 프로토콜을 지원하는지 확인할 수 있습니다.
이 핸드셰이크 후 데이터 전송은 HTTP 프로토콜이 아닌 WebSocket 프로토콜을 사용하여 시작됩니다. 방송 시작 후 어떤 일이 벌어지는지 자세히 살펴보도록 하겠습니다.
추가 정보
**ws 외에도 wss://라는 프로토콜도 있습니다.**
두 프로토콜 간의 관계는 HTTP와 HTTPS 간의 관계와 유사합니다. wss://는 TSL(Transport Layer Security)이라는 보안 계층을 거치기 때문에 데이터는 송신측에서 암호화되고 수신측에서 복호화됩니다. 따라서 데이터가 포함된 패킷은 암호화된 상태로 프록시 서버를 통과하므로 프록시 서버에서는 패킷 내부를 볼 수 없습니다.
WebSocket 핸드셰이크는 흉내낼 수 없습니다.
바닐라 JavaScript에서 헤더 설정은 기본적으로 차단되므로 XMLHttpRequest 또는 가져오기를 사용하여 위의 예와 유사한 헤더로 HTTP 요청을 할 수 없습니다.
참조 정의/설명
WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 간에 연속적이고 완전한 양방향 연결 스트림을 생성하는 기술입니다. WebSocket 연결은 HTTP 프로토콜을 사용하여 이루어집니다. WebSocket을 사용하면 단일 HTTP 연결을 통해 양방향 메시지를 자유롭게 교환할 수 있습니다.
먼저 http 서버가 생성되고 websocket 서버가 연결됩니다. 그런 다음 websocket 연결 요청이 들어오면 https 프로토콜을 websocket으로 업데이트하여 들어오는 요청을 받습니다. 정상적인 연결 설정에서는 서버와 클라이언트 간에 WebSocket 연결(TCP/IP 기반)이 설정되고 HTTP 연결은 일정 시간이 지나면 자동으로 종료됩니다.
기본적으로 WebSocket API는 간단하게 구성되어 있고 아주 기본적인 기능만 제공하기 때문에 대부분의 경우 SockJS나 Socket.IO와 같은 오픈소스 라이브러리를 많이 사용하고 메시지 형식도 STOMP와 같은 프로토콜을 사용한다.
일반적인 WebSocket 클라이언트는 사용자의 브라우저이지만 프로토콜이 플랫폼에 종속되지는 않습니다.
간단한 예
WebSocket 프로토콜을 사용하여 통신하려면 (WebSocket)(https://developer.mozilla.org/en-US/WebSockets/WebSockets_reference/WebSocket>) 객체를 생성해야 합니다. 새로운 WebSocket을 호출할 수 있으며 이때 ws라는 특수 프로토콜이 사용됩니다.
let socket = new WebSocket("*ws*://javascript.info");
소켓이 정상적으로 생성되면 다음 4가지 이벤트가 발생합니다.
- 열려 있는 – 정상적으로 연결이 된 경우 발생
- 소식 – 데이터 수신 시 발생
- 실수 – 오류 발생 시 발생
- 닫다 – 연결이 끊어졌을 때 발생
웹소켓 핸드셰이크
new WebSocket(url)을 호출하여 소켓을 생성하면 즉시 연결이 시작됩니다.
연결을 유지하는 동안 브라우저는 서버에 “WebSockets를 지원합니까?”(헤더 사용)를 요청합니다. 서버가 “예”로 응답하면 서버와 브라우저 간의 통신은 HTTP 대신 WebSocket 프로토콜을 통해 이루어집니다.
- • 원본 – 클라이언트 원본(이 예에서는 https://javascript.info). WebSocket 개체는 기본적으로 원본 간 요청을 지원합니다.
- 연결: 업그레이드 – 클라이언트 측에서 프로토콜을 변경하고 싶다는 신호를 보냈음을 나타냅니다.
- 업그레이드: websocket – 클라이언트 측에서 요청한 프로토콜이 websocket임을 의미합니다.
- Sec-WebSocket-Key – 서버가 WebSocket 프로토콜을 지원하는지 확인하는 데 사용되는 보안상의 이유로 브라우저에서 생성된 키입니다.
- Sec-WebSocket-Version – WebSocket 프로토콜의 버전을 나타냅니다. 예제에서 버전은 13입니다.
서버는 클라이언트가 보낸 WebSocket 통신 요청을 처음 수신하고 이에 동의하면 상태 코드 101의 응답을 클라이언트로 보냅니다.
서버는 Sec-WebSocket-Key 값을 인코딩 및 해시하고 미리 정의된 GUID를 추가한 다음 Sec-WebSocket-Accept로 다시 보냅니다. 브라우저는 이 값을 사용하여 서버가 실제 WebSocket 프로토콜을 지원하는지 확인할 수 있습니다.
이 핸드셰이크 후 데이터 전송은 HTTP 프로토콜이 아닌 WebSocket 프로토콜을 사용하여 시작됩니다. 방송 시작 후 어떤 일이 벌어지는지 자세히 살펴보도록 하겠습니다.
추가 정보
**ws 외에도 wss://라는 프로토콜도 있습니다.**
두 프로토콜 간의 관계는 HTTP와 HTTPS 간의 관계와 유사합니다. wss://는 TSL(Transport Layer Security)이라는 보안 계층을 거치기 때문에 데이터는 송신측에서 암호화되고 수신측에서 복호화됩니다. 따라서 데이터가 포함된 패킷은 암호화된 상태로 프록시 서버를 통과하므로 프록시 서버에서는 패킷 내부를 볼 수 없습니다.
WebSocket 핸드셰이크는 흉내낼 수 없습니다.
바닐라 JavaScript에서 헤더 설정은 기본적으로 차단되므로 XMLHttpRequest 또는 가져오기를 사용하여 위의 예와 유사한 헤더로 HTTP 요청을 할 수 없습니다.
참조
https://developer.mozilla.org/en/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
WebSockets – Web API를 사용하여 클라이언트 애플리케이션 작성 | MDN
WebSocket은 클라이언트와 서버 간에 영구적이고 완전한 양방향 연결 스트림을 생성하는 ws 프로토콜 기반 기술입니다. 일반적인 websocket 클라이언트는 사용자의 브라우저이지만
developer.mozilla.org
https://blog.logrocket.com/websocket-tutorial-real-time-node-react/
WebSockets 자습서: Node 및 React를 사용하여 실시간으로 전환하는 방법 – LogRocket Blog
클라이언트와 서버 간의 양방향 통신 메커니즘을 제공하는 Node.js 및 React에서 WebSocket 프로토콜을 구현합니다.
blog.logrocket.com