TIL ( WebSocket )

 

💡WebSocket이란?

 

 

웹소켓

 

- 웹소켓(WebSocket)은 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있게하는 프로토콜이다. 이때, 데이터는 '패킷(packet)' 형태로 전달된다.

- HTTP와의 차이점으로 웹소켓은 양방향통신이고 HTTP는 요청을 보내어 받고 응답을 보내는 단방향 프로토콜이다.

 

 

커넥션 만들기 

 

- 웹소켓은 브라우저 자체에서 web Socet Api를 지원하기 때문에 패키지 설치 없이 new 웹소켓만 호출하여 사용하면 된다. 

- 웹소켓 커넥션을 만들기위해 new WebSocket 을 호출하며, 이때 ws라는 특수 프로토콜을 사용한다.

let socket = new WebSocket("ws://javascript.info");

 

※  ws와 wss

 - ws와 wss:// 의 관계는 HTTP와 HTTPS의 관계와 비슷하다. 주로 wss://가 ws보다 보안성과 신뢰성이 높아  주로 사용한다.

 - ws:// 사용시 데이터를 전송하면 암호화 되지 않은 상태로 전송되어 데이터가 그대로 노출되는 문제가 있다.

 - wss://는 TSL( Transport Layer Security)이라는 보안 계층을 통과하여 전송되기 때문에 송신하는 쪽에서 데이터가 암호화되어 나가고, 복호화는 수신자 측에서 이루어진다. 따라서 데이터가 암호화되어 전송되기 때문에 패킷 내부를 볼 수 없게 된다.

 

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

   • open : 커넥션이 제대로 만들어졌을 때 발생

   • message : 데이터를 수신하였을 때 발생

   • error : 에러가 생겼을 때 발생

   • close : 커넥션이 종료되었을 때 발생

 

- 커넥션이 만들어진 상태에서 데이터를 보내고 싶은 경우 socket.send(data)를 사용한다.

 

- 예시

     let socket = new WebSocket("wss://example.com/socket");

        // 연결 성공
        socket.onopen = function(event) {
            console.log("WebSocket 연결이 열렸습니다.");
            document.getElementById("messages").innerHTML += "<p>연결되었습니다.</p>";
        };

        // 메시지를 수신
        socket.onmessage = function(event) {
            console.log("메시지를 수신했습니다:", event.data);
            document.getElementById("messages").innerHTML += "<p>서버로부터 메시지: " + event.data + "</p>";
        };

        // 오류가 발생
        socket.onerror = function(event) {
            console.error("WebSocket 오류가 발생했습니다:", event);
        };

        // 연결 닫힘
        socket.onclose = function(event) {
            console.log("WebSocket 연결이 닫혔습니다.");
            document.getElementById("messages").innerHTML += "<p>연결이 종료되었습니다.</p>";
        };

        // 메시지 전송
        document.getElementById("sendButton").onclick = function() {
            let message = document.getElementById("inputMessage").value;
            socket.send(message);
            console.log("메시지를 보냈습니다:", message);
            document.getElementById("messages").innerHTML += "<p>보낸 메시지: " + message + "</p>";
        };

 

웹소켓 한계

 

1. HTML5 이후 나온 기술이라 HTML5이전의 기술로 구현된 서비스에서는 웹 소켓을 사용할 수 없다.

2. 웹소켓은 한번 연결되면 에러또는 직접 연결을 끊지 않는 이상 지속적인 연결을 유지하기 때문에 웹소켓 연결이 많아지면 관리하는 서버의 부하가 증가할 수 있다.

3. 연결이 끊어진 경우 그 이유에 대해 정확히 파악하기 어렵다.

 

 

 

 

 

** 참고 **

웹 소켓 (Web Socket)이란? (velog.io)

웹소켓 (javascript.info)