240726 TIL_최종 프로젝트_ 실시간 채팅

실시간 채팅 => 데이터 베이스에 영구 저장 == 댓글 CR과 유사하게 흘러감

단, 내 로컬에서 보이는 채팅이 남의 채팅에 들어가야 하므로 real time 구독을 필수적으로 해야 한다.

이 와중에 내가 좀 고민했던 것

1. 웹 소켓이랑 rest가 그래서 뭔데?ㅠㅡㅠ

Send a message via websocket

supabase
  .channel('room1')
  .subscribe((status) => {
    if (status === 'SUBSCRIBED') {
      channel.send({
        type: 'broadcast',
        event: 'cursor-pos',
        payload: { x: Math.random(), y: Math.random() },
      })
    }
  })

Send a message via REST

supabase
  .channel('room1')
  .send({
    type: 'broadcast',
    event: 'cursor-pos',
    payload: { x: Math.random(), y: Math.random()
    },
  })

얘네 때문에 잠깐 3초 동안 굳었당.... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 뭔데 너희~!!!!!!!!!! insert로다가 예쁘게 저장했건만 왜 그러는데~~!!!!!!!!!

쉽게 말하면

rest api는 요청을 하지 않는 한 변하지 않는 데이터 / web socket은 자기 알아서 실시간 데이터 받아온다.
=> rest api에서 실시간으로 받으려면 무한 반복 요청을 활용해야 한다.

즉, 실상 실시간 채팅을 구현하려면 web socket이 더 알맞기는 하다. 알맞긴 한데~~~ 나는 DB에 저장할 생각이어서 web socket을 굳이 안 써도 될 것 같다.

아 맞다 실시간 채팅 하려면 일단 테이블에서 real time 설정해줘야 한다.
진짜 신기한 건... 수파베이스를 그래도 꽤 많이 썼는데 "Real time" 이라는 걸 신경도 써본 적 없었는데 발견하고 보니 진짜 대놓고 있었다는 거.... 모국어가 아니라서 그랬을까...?^^...

실시간 채팅의 단점. 된지 안 된지 진짜 모르겠음.

1-1) 진짜 이상하게 useEffect 써서 구독 해버렸더니 냅다 된다. 냅다. 진짜 이상하고 이상하고 이상하고 신비함.

1-2) 데브 모드에서도 된다. 왜.... 되는 거임?

1-3) 가끔 2개씩 감

1-4) 메세지 전송 중 상태를 구현할까 말까 고민 중 / 한 사람이 연속으로 보냈을 때 프로필 사진 1번만, 사진 한 번만 하게 가는 거 어떻게 할까 ...?

1-5) 최신 메세지는 최하단으로 정렬되게 하기.
수파베이스 order로 정리 완료

1-6) 스크롤

window.scrollTo({
  top: y,
  left: x,
  behavior: 'smooth'
});

일단 이걸로 해보려고 했찌만 1차 실패

  useEffect(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
  }, [queryClient]);

  useEffect(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
  }, [data]);

2차 3차 실패 더 알아보고 해야겠다.... ㅋㅋㅋㅋ

--
1. 유저 정보 가져왔다. 진짜 로직 별로라 공개하고 싶지도.... 않음,,,,^^....
2. 이미지 태그는 진짜 고난이다. 고난 그 자체. 최적화 때문에 w, h 값 주고서 다시 className에서 w, h 값 줘야 함 굿... ^^;;;

근데 되긴 해서 이게 왜 ... 되는지 등등 좀 더 알아보기로 함...^^