[Vue] WebSocket 적용기

WebSocket ?

• 서버와 클라이언트(브라우저) 사이의 연결을 유지한채로 데이터를 교환
• 흔히 사용하는 HTTP를 이용한 서버와 클라이언트 간의 통신은 요청-응답, 요청-응답 이 반복되면서 통신이 이루어지기 때문에 연결을 지속해서 유지하지 않는다는 점이 웹소켓과의 큰 차이점으로 볼 수 있다.

연결을 유지한채로 통신이 이루어지는 웹소켓의 특징을 이용해 보통 실시간으로 데이터를 주고 받고 해야하는 다양한 곳에 많이 쓰인다. (채팅, 거래가 이루어지는 가격 변동창..)

나는 회사에서 개발중인 백오피스에 블록체인 블록이 실시간으로 쌓이는 모습들을 보여주기 위해 웹소켓을 사용하였다!

개발 환경

Vue (version 2) + TypeSctipt

웹소켓 라이브러리 설치

npm install @prazedotid/vue-native-websocket

라이브러리 적용

import VueWebSock from '@prazedotid/vue-native-websocket'

Vue.use(VueWebSock, 'wss://ws.주소.com', {
  reconnection: true, // 자동으로 다시 연결할 것인지 여부 (boolean)
  reconnectionAttempts: 5, // 포기하기 전에 재연결 시도 횟수 (number)
  reconnectionDelay: 3000, // 새로운 연결을 시도하기 전에 대기하는 시간 (number)
  format: 'json', // JSON 메시지 전달 활성화
});

웹소켓을 적용하기 위해 main.ts 파일에 위와 같이 작성해주었다.

웹소켓을 이용해 데이터 받아오기

mounted() {
    const webSocket = new WebSocket('wss://ws.주소.com');

    webSocket.onopen = () => {
      console.log('WebSocket open');

      webSocket.send('여기에 웹소켓 서버에 전달할 값을 넣기!');
    };

    webSocket.onmessage = (message) => {
      console.log(message):
      
      // 데이터 가져오기
    };
}

웹소켓을 이용해 데이터를 받아오기 위해서는 우선, new WebSocket을 통해 웹소켓을 만들어준다.
생성한 웹소켓의 onopen 메서드는 해당 웹소켓과 클라이언트 사이의 연결이 시작되었음을 나타내고, 이 때 웹소켓 서버에 내가 전달하고 싶은 값을 send 메서드를 통해 전달해준다.
원하는 메시지를 전달하면 onmessage 메서드가 호출되며, 해당 함수 내에서 비로소 우리가 원하는 실시간 데이터를 받아올 수 있게 된다.

웹소켓은 다양한 분야에서 활용되는 만큼 어떻게 적용할 수 있는지 기본적인 개념들을 알고 있으면 좋을 것 같다!!