현동

웹소켓 연결 문제

채팅 기능과 관련하여 웹소켓 연결이 잘 되지 않았다. 아래 첫번쨰 이미지에서 보이는 것처럼 처음 연결은 잘 된다. 하지만 이후에 새로고침을 하거나 뒤로가기 후 다시 채팅방에 입장하면 웹소켓이 다시 연결이 되지 않습니다. 가끔씩 새로고침을 하면 다시 연결되는 경우가 있긴 한데 거의 대부분 연결이 잘 되지 않았다. 하지만 연결이 되든, 되지 않든 메세지 전송과 관련된 기능은 동작을 했다. 처음 생각했던 원인은 disconnect , unsubscribe 와 관련해서 잘 동작하지 않는 것 같았다. 그래서 로그를 찍어 subscribe되는 id를 확인하고 그아이디를 연결 해제를 해주었지만 이전과 같이 Opening Web Socket… 만 로그에 뜨며 연결이 되지 않았다. disconnect가 실행 되는 것 확인했는데 연결이 안되어서 원인 파악이 어려웠다. 다음으로 생각했던 이유는

그래서 해결하기 위해 기존에는

• 기존 코드

    
const ChatRoom = () => {
		...
		const socket = new SockJS(`${process.env.REACT_APP_HOME_URL}/ws/chat`);
    client = Stomp.over(socket);
		...
}

위 코드 부분이 함수형내에 바로 정의가 되어있었는데, 아래의 코드처럼 웹소켓 연결을 하는 함수 안에서 정의를 해줬다. 그리고 useEffect 훅을 사용하고 useCallback 훅을 사용해서 메세지를 전송해주니 잘 동작하였다.

• 수정 코드

  const stompConnect = () => {
    const socket = new SockJS(`${process.env.REACT_APP_HOME_URL}/ws/chat`);
    client = Stomp.over(socket);
    client.connect({}, () => {
      client.subscribe(
        `/sub/${id}`,
        (response) => {
  ...
  };

  const stompDisconnect = async () => {
    try {
      ...
      await client.unsubscribe(id);
		}
			...
  };
	...
  useEffect(() => {
    const fetchData = async () => {
      await getChatLog(id);
      stompConnect();
    };
    return () => {
      stompDisconnect();
    };
  }, []);

• 포스터 CORS 문제

import domtoimage from "dom-to-image"
import saveAs from "file-saver"
**const makeImageHandler = () => {
		domtoimage.toBlob(document.querySelector(".poster")).then((blob) => {
		saveAs(blob, "card.jpg");
	});
};** 

이 코드는 makeImageHandler라는 함수를 정의를 해서 해당 함수를 호출하면 dom-to-image 라는 라이브러리를 사용하여 poster 클래스를 가진 요소를 이미지로 변환하고, 변환된 이미지를 file-saver 라이브러리의 saveAS() 함수를 사용해서 다운로드 할수 있게 한다.

하지만 백엔드 쪽에서 받아온 image URL을 사용하면 CORS에러가 발생한다. 그래서 첫 대안으로는 서버에 있는 URL을 사용하지 않기 위해 포스터를 작성할 때 Store에 저장을 해둔 이미지를 포스터에 넣고 위 코드를 실행하려고 했다. 그런데 서버에 올려진 기존 게시물을 포스터로 만들어야 하는 경우도 있기 때문에 CORS에러를 해결해야한다.