또 다른 소켓 sockjs

지난번에 socket.io를 통해 간단히 실습하고 우수수강생 프로젝트에 적용예정이였습니다.
그런데 소통을 해보니 socket.io는 실직적으로 node 환경일때 사용하고, 스프링이랑 통신할때는, sockjs와 stompjs 를 통해 통신을 한다는 것을 알게 되었는데 적용하는 방법이 생각보다 쉽지가 않았습니다.

sockjs 선언 방법

설치 라이브러리

npm i @stomp/stompjs

적용 코드

import { Client } from '@stomp/stompjs';

let ws = new Client({
  brokerURL: 'wss://url.co.kr',
  debug: (str) => {
    console.log(str);
  },
  reconnectDelay: 3000,
  heartbeatIncoming: 1000,
  heartbeatOutgoing: 1000,
});

먼저 클라이언트를 임포트 후에 생성자함수 new를 사용하여 선언 합니다.
안에 내용은 객체로 stompjs 클라이언트 헤더에 옵션을 적용해주는 것입니다.

1. brokerURL : 서버쪽 소켓 url 입니다. ws 는 http, wss는 https 라는 설명이지만 해당 부분에서 오랜 문제였던 것이 서버쪽에서 https로만 셋팅이 되어있으면 wss로는 통신이 되지 않아서 통신 url이 양쪽다 ws 또는 wss로 되어있어야 했습니다.

2. debug: 실제로 통신하는 내용을 볼수 있는 디버그 함수 입니다. 셋팅이 완료 후에는 깔끔한 콘솔을 위해 사용하지 않아도 통신에 문제가 없었습니다.

3. reconnectDelay: 재연결 시도 딜레이 시간입니다. 소켓연결이 끊어졌을때 재연결을 시도할 시간 설정입니다. 0으로 하면 사용하지 않을수도 있습니다.

4. heartbeatIncoming: 서버측과 통신이 살아있는지 확인하는 옵션입니다. 해당 옵션은 수신(서버측에서 오는 신호가 있는지 체크 합니다.)

5. heartbeatOutgoing: 서버측과 통신이 살아있는지 확인하는 옵션입니다. 해당 옵션은 발신(서버측으로 신호가 가고 있는지 체크 합니다.)

일단 해당 코드를 선언하고 동작시키면 연결 여부에 대해서는 debug 함수를 통해 확인 할수 있습니다.

서버측으로 오는 데이터 수신 방법

//생성한 stompjs 클라이언트를 임포트 해줍니다. 
//이유는 렌더링 마다 클라이언트를 생성하게 되었을때 수신되는 중복된 메세지가 많아서 별도로 분리했습니다.
import { ws } from './chat/Chathook';

ws.onConnect = (frame) => {
    ws.subscribe('/topic/lobby', (data) => {
      const res = JSON.parse(data.body);
    
      console.log(res);
     
    })
}

useEffect(() => {
	ws.activate();
},[]);

1. onConnect : 해당 옵션은 소켓연결이 성공할때 동작할 함수입니다.
2. subscribe : 구독 ( 구독을 하면 해당 '/topic/lobby'로 들어오는 소켓 데이터를 다 수집하게 됩니다.)
   해당 데이터는 파라미터 안에 body 속에 담겨서 오게 되어있습니다. body속 데이터는 서버측 설정에 따라 여러가지가 담길 수 있습니다.
3. activate : 해당 함수는 소켓을 활성화 하는 명령어입니다. 최초 렌더링시 한번만 실행해주면 됩니다. 여러번 동작해도 에러는 발생하지 않았지만, 불필요한 렌더를 줄였습니다.

서버측으로 데이터 송신 방법

if (ws.connected) {
  ws.publish({
    destination: '/pub/lobby',
    body: JSON.stringify({ name: data.name, message: data.message }),
  });
}

1. connected : 소켓 연결이 되었는지 boolean 타입으로 반환됩니다.
   해당 옵션을 쓴 이유는 소켓 연결전에 publish 옵션을 사용하면 에러가 발생합니다.
2. publish : 데이터 송신 명령어 입니다.
   이전 버전에서는 send 명령어를 통해서 가능했지만 현재 최신버전 stompjs 에서는 client에서 send명령어는 없습니다.
   사용 방법은 destination: 서버에 보낼 주소 body는 javascirpt 객체 타입으로는 전송되지 않아 json.stringify를 통해 변환해서 데이터를 전송 해주어야 합니다.