항해 44일차

Undong·2023년 5월 20일

항해구구

목록 보기

44/52

항해 44일차

오늘은 프로젝트를 진행하면서 공부한 웹소켓에 대해서 TIL를 써볼려고 한다.

그럼 웹소켓에 대해서 들어가보자!!

웹소켓이란??

웹소켓(WebSocket)은 TCP 연결에 완전한 이중 통신 채널을 제공하는 컴퓨터 프로토콜이다. (HTTP와 다름 - 둘다 OSI 7계층에 위치해 있고 4계층의 TCP에 의존함. 웹소켓은 HTTP 프로토콜과 호환이 된다.)

주의 - 서버와 클라이언트간의 웹소켓 연결은 HTTP 프로토콜을 통해 이루어지는데 연결이 정상적으로 이루어진다면 서버와 클라이언트 간에 웹소켓 연결(TCP/IP기반)이 이루어지고 일정 시간이 지나면 HTTP 연결은 자동으로 끊어짐.

특징

양방향 통신(Full-Duplex)

데이터 송수신을 동시에 처리할수 있다.
클라이언트와 서버가 서로 원할때 데이터를 주고 받는다.
실시간 네트워킹(Real Time-Networking)
웹 환경에서 연속된 데이터를 빠르게 노출한다.
여러 단말기에서 데이터를 빠르게 교환
ex) 채팅, 주식, 비디오 데이터

이 정도면 웹소켓에 대해서 충분히 설명한 것 같다.

웹소켓에서도 언어에 따라 사용하는 라이브러리가 다르다.

socket.io

인터넷 익스플로러 구버전의 사용자는 웹소켓으로 작성된 웹페이지를 볼 수 없다. 이를 해결하기위해 socket.io는 웹페이지가 열리는 브라우저가 웹소켓을 지원하면 일반 웹소켓 방식으로 동작하고 지원하지 않는 브라우저라면 http를 이용해 웹소켓을 흉내내는 방식으로 통신을 지원한다. socket.io는 node.js에 종속적이다.

sockjs

spring에서 위와 같은 브라우저 문제를 해결하기 위한 방법으로 sockjs를 해결책으로 제공한다. 서버 개발시 일반 웹소켓으로 통신할지 sockjs 호환으로 통신할지 결정할 수 있다. 클라이언트는 sockjs를 통해 서버랑 통신한다.

stomp

stomp는 단순 텍스트 지향 메시징 프로토콜이다. spring에 종속적이고, 구독방식으로 사용하고 있다. (가벼워서 많이 사용한다.)
stomp는 웹소켓 위에서 동작하는 프로토콜로써, 클라이언트와 서버가 전송할 메시지 유형, 형식, 내용들을 정의하는 매커니즘이다.

node를 이용할땐 socket.io를 주로 사용하고, spring을 사용할땐 stomp, sockjs를 주로 사용한다.

노드는 soket.io, 자바는 stomp, sockjs를 사용한다. 따라서 우리는 프로젝트를 진행하면서 stomp와 sockjs를 사용하였다.

웹소켓 참고 코드

import SockJs from "sockjs-client";
import StompJs from "stompjs";
//stomp와 sockjs 패키지로 깔고 임포트!!

const sock = new SockJs("http://서버주소");
//client 객체 생성 및 서버주소 입력

const stomp = StompJs.over(sock);
//stomp로 감싸기

const stompConnect = () => {
    try {
      stomp.debug = null;
      //웹소켓 연결시 stomp에서 자동으로 connect이 되었다는것을 
      //console에 보여주는데 그것을 감추기 위한 debug
      
      stomp.connect(token, () => {
        stomp.subscribe(
          `서버주소`,
          (data) => {
            const newMessage = JSON.parse(data.body);
            //데이터 파싱
          },
          token
        );
      });
    } catch (err) {
      
    }
  };

//웹소켓 connect-subscribe 부분

const stompDisConnect = () => {
    try {
      stomp.debug = null;
      stomp.disconnect(() => {
        stomp.unsubscribe("sub-0");
      }, token);
    } catch (err) {
      
    }
  };
//웹소켓 disconnect-unsubscribe 부분
// 웹소켓을 disconnect을 따로 해주지 않으면 계속 연결되어 있어서 사용하지 않을때는 꼭 연결을 끊어주어야한다. 

const SendMessage = () => {
    stomp.debug = null;
    const data = {
      type: "TALK",
      roomId: roomId,
      sender: sender_nick,
      message: message,
      createdAt: now,
    };
  //예시 - 데이터 보낼때 json형식을 맞추어 보낸다.
    stomp.send("/pub/chat/message", token, JSON.stringify(data));
  };
//웹소켓 데이터 전송 부분