React Native의 CometChat 오프라인 지원

모바일 채팅 앱을 구축할 때 전화가 오프라인이거나 인터넷 연결이 좋지 않은 경우에도 앱을 계속 사용할 수 있기를 원합니다. Offline Chat Support은 실제로 CometChat SDK에 대한 가장 많이 투표된 기능 요청입니다. 불행하게도 아직은 없지만 다행스럽게도 직접 ​​구현할 수 있는 문서화되지 않은 기능이 있습니다.

기본적으로 필요한 것은 CometChat.BaseMessage를 JSON 문자열로 저장하고 이 문자열에서 다시 메시지를 복원하는 것입니다.

메시지의 원시 JSON을 반환하는 getRawMessage가 있습니다. 따라서 그룹당 메시지 배열을 일부 로컬 저장소에 저장하려면 다음을 수행합니다.

const setMessages = (groupId: string, messages: CometChat.BaseMessage[]) => {
    const rawMessages = messages.map(msg => msg.getRawMessage());
    const serialised = JSON.stringify(rawMessages);
    storage.set(groupId, serialised);
}

그리고 메시지를 다시 복원하기 위해 CometChatHelper를 사용할 수 있으며 rawMessage 데이터를 가져오고 processMessage의 인스턴스를 반환하는 메서드TextMessage | MediaMessage | CustomMessage | BaseMessage입니다. 따라서 저장소에서 메시지 배열을 다시 가져오려면 다음과 같이 해야 합니다.

const getMessages = (groupId: string) => {
    const serialisedMessages = storage.getString(groupId);
    if (serialisedMessages) {
      const rawMessages = JSON.parse(serialisedMessages) as string[];
      return Promise.all(
        rawMessages.map(rawMsg =>
          CometChat.CometChatHelper.processMessage(rawMsg),
        ),
      );
    }
},

다음은 react-native-mmkv을 사용하여 MessagesStorage를 구현한 것입니다.

import {MMKV} from 'react-native-mmkv';
import {CometChat} from '@cometchat-pro/react-native-chat';

const storage = new MMKV({
  id: 'mmkv-messages-storage',
});

export const MessagesStorage = {
  setMessages: (groupId: string, messages: CometChat.BaseMessage[]) => {
    const rawMessages = messages.map(msg => msg.getRawMessage());
    const serialised = JSON.stringify(rawMessages);
    storage.set(groupId, serialised);
  },

  getMessages: (groupId: string) => {
    const serialisedMessages = storage.getString(groupId);
    if (serialisedMessages) {
      const rawMessages = JSON.parse(serialisedMessages) as string[];
      return Promise.all(
        rawMessages.map(rawMsg =>
          CometChat.CometChatHelper.processMessage(rawMsg),
        ),
      );
    }
  },
};

이제 이전 채팅에서 캐시된 메시지 목록을 즉시 열어 채팅 화면을 열 수 있습니다.