[Sendbird를 활용한 웹 채팅] 10. 채팅 페이지2 - scrollToBottom, 관리자 공지, Push 알림

1. scrollToBottom 문제

🔒 문제

scrollToBottom 호출이 제대로 이루어지지 않는 문제 발생.

채팅방에 들어왔을 때, 파일 이미지의 로딩이 느린 경우 가장 밑으로 내려가지 않는다.

 

🔑 해결

가로 세로 길이를 지정하고, object-fit: contain 옵션을 설정하니 잘 된다.

const FileItem = styled.img`
  width: 200px;
  height: 160px;
  object-fit: contain;
`;

이미지의 하단이 보이지 않는 문제 -> 해결

 

2. 관리자 공지

관리자 공지 상단에 띄우기

 

Components/MessageItem.js 

{message.messageType === "admin" ? (
    <AdminWrap>
      <Admin>
        <AdminLeft>
          <AdminIcon />
          <AdminText>
            {isMore ? adminMsg : `${adminMsg.substring(0, 15)}...`}
          </AdminText>
        </AdminLeft>
        <AdminDisplay isMore={isMore} onClick={onClickAdmin} />
      </Admin>
    </AdminWrap>
  ) : (
...
)}

Components/MessageList.js 

<MessageItem
  key={message.messageId}
  message={message}
  prevSender={idx !== 0 && messageList[idx]._sender.nickname}
  prevMessage={idx !== 0 && messageList[idx].createdAt}
/>

 

미리 보기                                                                           전체 보기

관리자 공지

 

3. 웹 Push 알림

Web API 인 Notification()을 이용해 푸시 알림을 구현했다.

 

참고 )

• https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification
• https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-notification-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0

 

 utils/utils.js

export const UseNotification = (title, body) => {
  if (!("Notification" in window)) {
    return;
  }

  const options = { body };

  let Noti;
  if (Notification.permission !== "granted") {
    Notification.requestPermission().then((permission) => {
      if (permission === "granted") {
        Noti = new Notification(title, options);
      } else {
        return;
      }
    });
  } else {
    Noti = new Notification(title, options);
  }
  return Noti;
};

 

Pages/GroupChat.js -> 메세지 수신 알림 이벤트에 알림 설정하기

  sb.onMessageReceivedHandler({
    handler: (channel, message) => {
      const list = groupChatList.filter((chat) => chat.url !== channel.url);
      setGroupChatList([channel, ...list]);

      //push 알림
      const sender = message._sender.nickname;
      const curUser = window.localStorage.getItem("nickname");

      if (sender === curUser) {
        return;
      }

      const pushNotification = UseNotification(
        message._sender.nickname,
        message.message
      );

      pushNotification.onclick = (e) => {
        window.open(
          `/chatting/${channel.url}/${false}`,
          channel.url,
          `repace=true`
        );
      };
    },

 

결과

웹 Push 알림