Node.js 심화 socket -2-

__________

 

— 실제로 웹 소켓은 js 에서 어떻게 구현하는 가 —

 

 

 

https://datatracker.ietf.org/doc/html/rfc6455

 

=> 위 명세서에서 정의된 프로토콜인 웹소켓을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있어.

 

=> ex)

웹 소켓 커넥션을 만들려면 new WebSocket을 호출 하면 된다. ws라는 프로토콜을 사용.

 

——

let socket = new WebSocket("ws://localhost");

——

=> ws말고 wss://라는 프로토콜도 있는데, 두 프로토콜의 관계는 HTTP와 HTTPS의 관계와 유사

 

 

소켓이 정상적으로 생성되면 네 개의 이벤트를 사용할 수 있어.

• open - 커넥션이 이루어 졌을 때 이벤트 발생
• message - 데이터를 수신하였을 때 이벤트 발생
• error - 에러가 생겼을 때 이벤트 발생
• close - 커넥션이 종료되었을 때 발생

 

 

 

 

폴더 : kimminsoo -> sparta -> node_js -> learning -> fourth_step_socket -> first_web_socket

파일 : index.html

 

Web socket 에서 기본적으로 사용할 수 있는 네 개의 이벤트를 다뤄 봐.

 

——

<script>

        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]`);

        };

    </script>

——

 

 

 

 

1.

코드를 동작 시키면 open → message → close 순으로 이벤트 발생

 

— 웹소켓 핸드셰이크

——

let socket = new WebSocket(url);

——

=> new WebSocket 함수를 호출하여 소켓을 생성하면 즉시 연결이 시작

 

 

 

2.

데이터 전송

웹소켓 통신은 프레임 이라고 불리는 데이터 조각을 사용.

프레임은 서버와 클라이언트 양측 모두에게 보낼 수 있는데, 보통 2가지 형태로 보내.

- 텍스트 프레임 - 텍스트 데이터가 담긴 프레임

- 이진 데이터 프레임

 

——

socket.send(body)

——

=> send 를 호출할때 body에는 문자열이나 이진 데이터만 들어갈 수 있다. 따로 무언가 세팅을 해줘야 할 필요는 없다.

 

 

 

3.

커넥션 닫기

연결 주체 중 한쪽에서 커넥션 닫기를 원할 경우는 커넥션 종료 프레임을 전송 한다.

——

socket.close([code], [reason]);

——

=> 

code - 커넥션을 닫을 때 사용하는 특수 코드

reason - 커넥션을 닫는 사유

 

——

// 닫기를 요청한 주체:

socket.close(1000, "Work complete");

 

// 다른 주체:

socket.onclose = event => {

  // event.code === 1000

  // event.reason === "작업 완료"

};

——

=> 

https://www.rfc-editor.org/rfc/rfc6455#section-7.4.1

코드 목록 확인.

 

 

4.

커넥션 상태

 

커넥션 상태를 알고 싶다면 socket.readyState 의 값을 확인하면 된다.

0 → 연결중

1 → 연결이 성립되고 통신중

2 → 커넥션 종료중

3 → 커넥션이 종료됨