WebSocket

https://ko.javascript.info/websocket

https://pridiot.tistory.com/170

https://bellog.tistory.com/101

 

 

Web API로 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있는 고급 기술입니다.

이 때, 데이터는 '패킷(packet)' 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP요청 없이 양방향으로 이뤄집니다.

 

Web API란

웹 서버 또는 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스이다. HTTP서비스이고 다양한 클라이언트에서 접근이 가능하도록 설계되어 있다. Web 환경을 통해 제공되는 데이터 CURD 인터페이스를 제공한다.

 

예시

웹 소캣 커넥션을 만들려면 new WebSocket을 호출하면 되는데, 이때 ws라는 특수 프로토콜을 사용합니다.

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

 

항상 wss://를 사용합시다.

wss://는 보안 이외에도 신뢰성 측면에서 ws보다 더 신뢰할만한 프로토콜 입니다.

 

소캣이 정상적으로 만들어지면 아래 네 개의 이벤트를 사용할 수 있게 됩니다.

• 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.webClean) {
 		alert(`[close] 커넥션이 정상적으로 종료되었습니다(close=${event.code} reason=${event.reason})`);
    } else {
    // 예시: 프로세스가 죽거나 네트워크에 장애가 있는 경우
    // event.code가 1006이 됩니다.
    	alert('[close] 커넥션이 죽었습니다.
    }
}

socket.onerror = function (error) {
	alert(`[error] ${error.message}`);
}

WebSocket은 ajax에서 사용하는 xmlHttpRequest같은 web api에요. 
기본적으로 웹 브라우저에 내장된 함수로 Browser Object Model(BOM)이라고 할 수 있어요.
웹 소캣은 웹브라우저와 서버간의 패킷형태로 양방향 통신을 가능하게 해주는데요. 
ws.onMessage((evnet 에서 봤던 event는 브라우저에서 어떠한 이벤트를 던졌을 때
여기에서는 onMessage라는 메서드를 실행한거니까 이게 이벤트가 되겠죠.
이벤트가 발생하면 ((event) => {}) 이렇게 뒤에 이어서 함수가 실행되잖아요. 이 함수를 이벤트 핸들러라고 불러요.
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용할 수 있는데요.
이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달되서 들어가요.
그게 아까 물으셨던 event가 되는거죠. webSocket처럼 브라우저 내장 함수들은 저도 다 찍어보지 못했지만 보통 다 event를 전달해주기때문에 event 찍으면 나와요.