UI Kit을 사용하여 텍스트 채팅 구현

UI 구성

먼저 씬의 전체 모습을 보여드리겠습니다.

화면 상단에 메시지 리스트, 하단에 텍스트 입력 필드와 전송 버튼을 배치했습니다.

컨텍스트

Context 배치에 대해 설명합니다.

A는 GS2-Chat의 룸 컨텍스트입니다.

B는 GS2-Chat의 메시지 리스트 컨텍스트입니다.

C는 GS2-Chat의 메시지 컨텍스트입니다.

구현 해설

메시지 목록 조회

룸 컨텍스트에는 사전에 GS2-Chat에서 생성해 둔 룸의 정보를 설정합니다.

메시지 리스트 컨텍스트에는 2개의 컴포넌트를 붙여 두었습니다.

Gs2ChatMessageListFetcher는 룸 컨텍스트에서 지정된 룸 내 메시지 목록을 조회합니다.

Gs2ChatMessageList는 Fetcher가 조회한 데이터를 기반으로 GameObject를 생성합니다. Maximum Items는 리스트 내 요소를 생성하는 최대 개수입니다.

시작 시 Maximum Items 개수만큼 Prefab으로 지정한 GameObject를 복제하여 인스턴스화합니다. 리스트 아이템의 증감에 맞춰 다시 인스턴스화하는 것은 비용이 높기 때문에, 사전에 모든 GameObject를 인스턴스화하고 불필요한 것은 숨깁니다.

Prefab에는 메시지 컨텍스트를 가진 GameObject를 지정할 수 있으며, 표시할 때는 반드시 Fetcher가 조회한 메시지 중 하나가 설정됩니다.

메시지 표시

메시지 컨텍스트에는 3개의 컴포넌트를 붙였습니다.

Gs2ChatMessageContext에는 Message를 지정하지 않았습니다. 이는 Gs2ChatMessageList에 의해 값이 설정될 것을 전제로 하기 때문입니다.

Gs2ChatMessageFetcher는 Gs2ChatMessageContext에 지정된 메시지의 정보를 조회하여 보관합니다.

Gs2ChatMessageEnabler는 Gs2ChatMessageFetcher가 값 조회를 완료하면 Text 노드를 활성화하도록 설정되어 있습니다.

Text에는 Gs2ChatMessageLabel을 지정하여, Message의 metadata 내용을 텍스트에 반영하도록 설정했습니다.

메시지 게시

메시지를 게시하려면 GS2-Chat의 Post API를 호출해야 합니다.

UI Kit에는 Post를 실행하기 위한 Prefab인 Gs2ChatMessagePostAction이 준비되어 있습니다. 이 Prefab은 활성화되면 API가 호출되므로, 초기 상태에서는 비활성화해 둡니다.

게시하는 메시지에는 2개의 파라미터를 설정할 수 있습니다.

Category에는 임의의 숫자를 지정할 수 있으며, “0"은 텍스트 메시지, “1"은 스티커 와 같이 분류하여 Metadata를 읽어들이는 방법을 결정하는 정보로 사용할 수 있습니다. Metadata는 메시지의 본문입니다.

이번 샘플에서는 Category는 0만 사용하고, Metadata에는 원시 문자열을 지정하기로 합니다.

성공 시에는 OnPostComplete가 호출되어, 자기 자신의 GameObject를 비활성화하고 InputField의 입력 내용을 빈 값으로 초기화합니다.

InputField의 OnValueChanged로 입력 필드 값의 변경을 처리하여, Gs2ChatMessagePostAction의 Metadata에 값을 설정합니다.

전송 버튼의 OnClick 이벤트에서 Gs2ChatMessagePostAction Prefab을 활성화합니다.

동작 확인

(사전에 동작 확인을 했기 때문에 3건의 메시지가 존재합니다) ddd를 입력하고 전송 버튼을 누릅니다.

메시지 리스트에 ddd가 추가되고, InputField가 초기화됩니다.

마치며

UI Kit의 선언형 프로그래밍의 재미가 전달되었을까요?

메시지 전송 처리를 한 후 메시지 목록을 다시 가져오는 처리를 굳이 작성하지 않아도 컴포넌트로서 “메시지 목록을 표시한다”, “메시지의 metadata 내용을 텍스트에 반영한다"는 설정만으로 동작을 제어할 수 있습니다.