[socket] StompJS로 리액트에서 채팅 구현하기

1. 라이브러리 설치

npm i @stomp/stompjs sockjs-client를 이용하여 라이브러리를 설치해준다.

원론적인 얘기는 일단 나중에 쓰기로 하고 구현하는데 초점을 두도록 한다.

2. 구현

우선 필요한 항목들(import)는 다음과 같다

import React, { useEffect, useRef, useState } from "react";
import * as StompJs from "@stomp/stompjs";

const client = useRef({})
const [chatMessages, setChatMessages] = useState<any>([]);
const [message, setMessage] = useState("");

이제 필요한 것들을 세팅해 두었으니 함수를 구현해보자

가. 소켓과 연결하기

const connect = () => {
    client.current = new StompJs.Client({
      brokerURL: "소켓 서버 주소", // 웹소켓 서버로 직접 접속

      // 헤더
      //   connectHeaders: {
      //     "auth-token": "spring-chat-auth-token",
      //   },
      debug: function (str) {
        console.log(str, "debug");
      },
      reconnectDelay: 5000,
      heartbeatIncoming: 4000,
      heartbeatOutgoing: 4000,
      onConnect: () => {
        // 구독하는 함수 후술
        subscribe();
      },
      onStompError: (frame) => {
        console.error(frame);
      },
    });

    client.current.activate();
  };

new StompJs.Client로 객체를 만들어 주고 위에서 만든 client 객체에 대입한다.

나. 구독하기

소켓에서 구독이란 채팅방에 입장하는 것을 말한다.

const subscribe = () => {
    client.current.subscribe(`구독 주소`, ({ body }: any) => {
      console.log(body, "body");
      setChatMessages((_chatMessages: any) => [
        ..._chatMessages,
        JSON.stringify(body),
      ]);
    });
  };

다. 메세지 보내기

const publish = (message: any) => {
    if (!client.current.connected) {
      return;
    }

    client.current.publish({
      destination: "메세지 보내는 주소",
      body: JSON.stringify({message: message}),
    });
    console.log(client, "client");
    setMessage("");
  };