230824 sendbird React UIKit 커스텀 메시지 보내고 받기

230824 sendbird React UIKit 커스텀 메시지 보내고 받기

UIKit을 사용하는 채팅방 내에서 일반 텍스트 메시지가 아닌 다른 메시지를 띄우기 위해서 커스텀 메시지를 이용할 수 있다.

 

커스텀 메시지 렌더링하기

props로 받은 message 객체에서 일반 메시지는 customType을 가지지 않는다.

커스텀 메시지는 보낼 때 커스텀 타입을 지정할 수 있고, 렌더링할 때 그 타입에 따라 다르게 렌더링시켜 줄 수 있다.

<Channel
    channelUrl={currentChannelUrl}
    renderMessage={(props) => {
        if (!props.message.customType) return null;
        if (props.message.customType === 'request') {
            const message = props.message as ClientUserMessage;
            const { nickname } = message.sender;
            return <div style={{ 
                padding: '20px', 
                borderRadius: '20px', 
                backgroundColor: '#ffc1b0' 
            }}>
            {nickname}님으로 부터 튜터링 요청을 받았습니다.
            </div>;
        }
    }}
/>

 

 

커스텀 메시지 보내기

useSendbirdStateContext()를 사용하여 Store를 스토어를 가져오고

sendBirdSelectors를 통해서 원하는 메서드를 가져올 수 있다.

sendMessage()를 호출하여 메시지를 보낼 수 있고,

메시지를 보내기 위해서는 메시지를 보낼 채널 객체가 필요하다.

채널 url을 가지고 있으면 getGroupChannel(url)을 통해 채널 객체를 가져올 수 있다.

type HeaderType = { 
  channelUrl: string; 
  userId: string; 
  onClose: (() => void) | null 
}


const CustomChannelHeader = ({ channelUrl, userId, onClose }: HeaderType) => {
  const globalStore = useSendbirdStateContext();
  // const sdkInstance = sendBirdSelectors.getSdk(globalStore);
  const sendMessage = sendBirdSelectors.getSendUserMessage(globalStore);
  const getGroupChannel = sendBirdSelectors.getGetGroupChannel(globalStore);

  const handleSendMessage = async () => {
    const confirm = window.confirm('매칭 요청을 보낼까요?');
    if (!confirm) return;
    const channelToSend = await getGroupChannel(channelUrl);
    const params = {
      message: '매칭 요청입니다.',
      customType: 'request',
      data: userId,
    };
    sendMessage(channelToSend, params)
      .onPending((pendingMessage) => {
        alert('Message sent: pending');
      })
      .onSucceeded((message) => {
        alert('Message sent: success');
      })
      .onFailed((error) => {
        alert(error);
      });
  };
  return (
    <div style={{ padding: '10px', display: 'flex', justifyContent: 'space-between' }}>
      {typeof onClose === 'function' && <button onClick={() => onClose()}>뒤로 가기</button>}
      <button onClick={() => handleSendMessage()} style={{ border: '1px solid black' }}>
        요청 보내기
      </button>
    </div>
  );
};