22.11.29

커피 내리는 그냥 사람·2022년 11월 30일

TIL

항해99

목록 보기

70/108

최종 팀 프로젝트 26일차

1. 오늘 한 일

스크럼 회의 + 디자이너 회의
stomp를 통한 웹소켓 (실시간 채팅 구현 완료)

1. 스크럼 회의

스크럼회의(14:00)
- FE : stomp 활용한 코드 구현 중(백엔드와 맞춰봐야 함) + 가격책정 리팩토링(50% ⇒ 익일은 CSS 리펙토링) + 코드 인스턴스화
- BE : 웹소켓 맞춰보기 + 쿼리문 최적화, CI/CD + 판매상태, url api 바꾸기로 한 것 merge 전, 가격조사 오늘 중으로 끝낼 예정
- 협조사항 : 19:30 디자이너 회의(실시간 채팅 디자인 + 알림창 기능)
디자이너 전체회의(20:00)
- 마케팅 자료 만들어진 것 pt
- 디자인 추가 사항
  - 채팅창(실시간 알람은 다음에, 텍스트 위주 ⇒ 익일까지 만들기) + 판매중, 판매완료(완료는 아예 안 보임) ⇒ 버튼식으로 올린 사람만 조정할 수 있게(e.g 수정페이지 안에서)
- 기타 협의 사항 : 추가 작업분 피그마로 공유, 익일 추가 회의 예정

2. stomp를 통한 웹소켓 (실시간 채팅 구현 완료)

실시간 채팅 기능 구현 완료(채팅 기능 확인 : 사파리 * 크롬 다른 아이디로 1개의 채팅방 임의 설정 후 실행)
구현 스크린샷(핑퐁식으로 주고 받아지는 것 잘 되는지 확인)

좌 사피리 우 크롬
이후 작업 : 입력 후 input창 비워지는 것까지 확인(input에 value값 준 뒤 useState 값 "")
주요 코드

(chatting.jsx : 채팅 주요 로직)
const sock = new SockJS("http://3.38.228.74:8080/ws/chat");
  const ws = webstomp.over(sock);
  const dispatch = useDispatch();
  
  const listReducer = useSelector((state) => state.chatting.chatList);
  console.log(listReducer);
  // let postId = Number(id) : 임의값이라 일단 주석처리

  useEffect(() => {
    dispatch(__getinitialChatList({
      postId:10,
      roomId:1
    }));
    // 임의의 유저와 룸넘버

    return () => {
      onbeforeunloda()
      
    };
  
  }, []);
  
  useEffect(() => {
  
  
    wsConnectSubscribe()
    
    
    // return () => {
    //   console.log("???????")
    //   onbeforeunloda()
      
    // };
 
  }, [listReducer.id]);
  
  const [chatBody, setChatBody] = useState("");

  const content = {
    sender: "보내는이",
    message:chatBody
    // 임의의 센더와 useState값의 챗바디
    };

  let headers = { 
    Access_Token: localStorage.getItem('Access_Token')
  };
// 토큰값이 있어야 채팅이 가능하게 함

  function wsConnectSubscribe() {
    try {
      ws.connect(
        headers,(frame) => {
          ws.subscribe(
            `/sub/1`,
            // 데스티네이션
            (response) => {
              console.log("어떻게 나오는지",response)
              let data = JSON.parse(response.body)
              dispatch(chatList(data))
// 값이 어떻게 넘어오는지 보는 로직
            }
            );
        },
      );
    } catch (error) {
    }

  }
  

  function waitForConnection(ws, callback) {
    setTimeout(
        function () {
            // 연결되었을 때 콜백함수 실행
            
            if (ws.ws.readyState === 1) {
                callback();

                // 연결이 안 되었으면 재호출
            } else {
                waitForConnection(ws, callback);
            }
        },
        1 // 밀리초 간격으로 실행
    );
}
//stomp 메시지 에러 waitForConnection함수로 해결


const onbeforeunloda = () =>{

  try {
    ws.disconnect(
      ()=>{
        ws.unsubscribe("sub-0");
        clearTimeout(
          waitForConnection
          )
      },
    
    {Access_Token: localStorage.getItem('Access_Token')}
)
    }catch (e){
      console.log("연결구독해체 에러",e)
  }
}

  const inputHandler = (e) =>{
  setChatBody(e.target.value)
}
  // 연결 해제 시 로직

  //onSubmitHandler
const onSubmitHandler = (event) =>{
  //event.preventDefault()
  // if (chatBody=== "" || chatBody === " ") {
  //   return alert("내용을 입력해주세요.");
  //   }
    waitForConnection(ws,function() {   
  ws.send(
    `/pub/1`,
    JSON.stringify(content),
            {
              Access_Token: localStorage.getItem("Access_Token")
            },
          )})
  setChatBody("")
}
const appKeyPress = (e) => {
  
  if (e.key === 'Enter') {
    onSubmitHandler()
    setChatBody("")
  }
}
//enter시 메시지 보냄
const scrollRef= useRef();

useEffect(() => {
  if (scrollRef) {
    scrollRef.current.scrollIntoView({
      behavior: "smooth",
      block: "end",
      inline: "nearest",
    });
  }
}, [listReducer]);