[Sendbird를 활용한 웹 채팅] 12. 채팅 페이지 라우팅의 변천사 & 그룹 채팅 메세지 읽음 동기화(electron)

1. 채팅 페이지 라우팅의 변천사

사실 현재 카테고리의 8번 포스팅에서 작성한 채팅 리스트 페이지에서 채팅 페이지로 넘어갈 때 window.open의 주소가 초기 라우팅 값이 아니었다.

 

초기

Pages/GroupChat.js & Pages/OpenChat.js

  const windowObj = window.open(
    "/chatting"
  );
  windowObj.location.state = {
    chat: channel,
    isOpen: false,
  };

처음에는 window.open("/chatting")으로 주소는 고정시키고 각 채팅 방의 url과 오픈채팅여부는 state로 넘겨주었었다. 하지만 state를 받은 컴포넌트에서 새로고침을 하면 state가 날라가는 문제가 발생했다. 따라서 localstorage로 state을 저장하고 값을 localstorage에서 불러와 사용하는 것으로 해결하였으나.. 멀티 채팅을 구현하는데서 두 번째 문제가 발생했다.

 

 

🔒 문제

• 채팅 리스트에서 1번 채팅 클릭 → 1번 채팅 정보 localstorage에 저장 → 1번 채팅 방 오픈
• 채팅 리스트에서 2번 채팅 클릭 → 2번 채팅 정보 localsotarge에 저장 → 2번 채팅 방 오픈
• 1번 채팅 방 탭으로 가서 새로 고침 → 2번 채팅 방으로 바뀜(localstorage에 2번 채팅 정보가 담겨있기 때문에)

 

🔒 문제 2

• 채팅 리스트에서 1번 채팅 클릭 → 1번 채팅 정보 localstorage에 저장 → 1번 채팅 방 오픈
• 채팅 리스트에서 2번 채팅 클릭 → 2번 채팅 정보 localsotarge에 저장 → 2번 채팅 방 오픈
• 2번 채팅 방에서 메세지 전송 → 정상 동작
• 1번 채팅 방에서 메세지 전송 → 채팅 방 UI에서 보이지 않음(서버 전달은 ok)
• localstorage에는 하나의 채팅 정보만 담겨있기 때문에 발생하는 문제

 

🔑 해결

• 채팅 방 각각이 유니크한 url을 갖도록 하고 params로 채팅 정보를 넘긴다.

 

현재

각각의 채팅 방은 고유한 주소를 가지고 새로운 탭으로 열린다.

Pages/GroupChat.js & Pages/OpenChat.js

window.open(`/chatting/${chat.url}/${true}`, chat.url, `repace=true`);

 

빌드 시 에러 발생

라우팅 변경 후 빌드했더니 다음과 같은 에러가 발생했다.

Uncaught SyntaxError: Unexpected token '<'

 

🔑 해결

public/index.html

head에 아래 코드를 추가하면 된다.

<base href="/" />

 

2. 그룹 채팅 메세지 읽음 동기화

🔒 문제

• 멀티 채팅(여러 개의 채팅방을 띄우고 각각에서 채팅 가능한 것)을 구현하면서 발생한 문제이다.
• 채팅 리스트에서 하나 클릭 시 채팅 방으로 넘어가는 순간 읽지 않은 메세지의 수가 사라져야 하는데 그대로 남아있다.
• history.push("/chtting")로 페이지 전환할 때(하나의 채팅방만 열 때)는 다시 돌아올 때 채팅 리스트 페이지가 새로 고침 되므로 자동으로 최신 값이 반영되었지만, window.open("/chatting")로 페이지를 전환하면서 채팅 리스트 페이지는 그대로 있기 때문에 발생한 문제이다.

  

  ㅁ이라는 메세지를 받고 채팅방에 들어가 읽었는데.. 채팅 리스트에서 1이 사라지지 않는 문제 발생

 

🔑 해결1

상위 브라우저(채팅 리스트 페이지) 강제 새로 고침

public/electron.js

win.webContents.on("did-create-window", (childWin, details) => {
  setTimeout(() => {
    win.webContents.reload();
  }, 1000);
});

 

🔑 해결 2

getGroupChannels 함수 호출해 새로 고침 느낌 내기

Pages/GroupChat.js

  const onClickBtn = useCallback(
    (chat) => {
      window.open(`/chatting/${chat.url}/${false}`, chat.url, `repace=true`);
      setTimeout(() => {
        getGroupChannels(true);
      }, 1500);
    },
    [getGroupChannels]
  );

-> 이를 통해 해결했으나 뭔가 찝찝하다. 더 좋은 방법을 찾아봐야겠다.