> For the complete documentation index, see [llms.txt](/llms.txt)

# Chat(GS2 UIKit for Unity) 샘플

GS2 UIKit for Unity 를 사용한 GS2-Chat 기능 구현 샘플 소개



텍스트 채팅 기능을 구현합니다.

## 리포지토리

https://github.com/gs2io/gs2-uikit-for-unity-sample/tree/main/Chat

## GS2-Deploy 템플릿

https://github.com/gs2io/gs2-uikit-for-unity-sample/blob/main/Chat/initialize_chat_template.yaml

## 프로젝트 내용

![img.png](img.png)

프로젝트를 열면 위와 같은 화면이 됩니다.

![img_12.png](img_12.png)

실행하면 텍스트 입력란과 전송 버튼이 화면 하단에 표시되는 화면만 그려집니다.

![img_13.png](img_13.png)

"test" 라고 입력하고 전송해 봅니다.

![img_14.png](img_14.png)

그러면 게시한 일시와 메시지가 표시됩니다.

![img_15.png](img_15.png)

한 번 더, 이번에는 "test2" 라고 입력하고 전송해 봅니다.

![img_16.png](img_16.png)

목록에도 게시된 메시지가 반영됩니다.

## 프로젝트 해설

![img_1.png](img_1.png)

씬의 계층 구조에 주목해 주세요.

### Canvas/ChatWindow

![img_2.png](img_2.png)

**Gs2ChatRoomContext**

이 GameObject 이하의 노드에서 다룰 채팅룸을 지정합니다.

![img_4.png](img_4.png)
![img_3.png](img_3.png)

이 샘플에서는 chat-0001 이라는 네임스페이스의, room-0001 이라는 이름의 룸을 지정하고 있습니다.

### Canvas/ChatWindow/Messages/.../Content

![img_5.png](img_5.png)

**Gs2ChatMessageListFetcher**

RoomContext 에서 지정된 룸의 메시지 목록을 취득합니다.

**Gs2ChatMessageList**

Gs2ChatMessageListFetcher 로 취득한 메시지를 지정된 프리팹에 할당하여 생성합니다.
Maximum Items 에는 프리팹을 생성할 최대 개수를 지정합니다.

![img_6.png](img_6.png)

이번에는 자식 노드에 있는 Message 를 프리팹으로 지정하고 있습니다.
프리팹으로 지정된 GameObject 가 씬 내에 존재하는 경우, 해당 GameObject 는 비활성화되고, 그 외에 Maximum Items 로 지정된 수만큼 GameObject 가 생성됩니다.

### Canvas/ChatWindow/Messages/.../Content/Message

![img_7.png](img_7.png)

**Gs2ChatMessageContext**

이 GameObject 이하의 노드에서 다룰 메시지를 지정합니다.
컨텍스트의 내용은 Gs2ChatMessageList 에 의해 할당됩니다.

**Gs2ChatMessageFetcher**

MessageContext 에서 지정된 메시지를 취득합니다.

### Canvas/ChatWindow/Messages/.../Content/Message/Text

![img_8.png](img_8.png)

**Gs2ChatMessageLabel**

Gs2ChatMessageFetcher 로 취득한 메시지의 내용을 출력합니다.
이번에는 「{메시지 게시 시간}:{메시지 게시 분} {메시지 페이로드}」
로 정형하도록 Format 에 지정하고 있습니다.

정형된 값은 OnUpdate(String) 으로 콜백되어, Text 컴포넌트에 값이 반영됩니다.

### Canvas/ChatWindow/Input/Send/Gs2ChatMessagePostAction

**Gs2ChatMessagePostAction**

메시지를 게시하는 처리를 실행하는 프리팹입니다.

![img_10.png](img_10.png)

이 컨텍스트 메뉴에서 추가할 수 있습니다.

![img_9.png](img_9.png)

게시할 메시지의 내용을 Category 와 Metadata 에 지정하여, 프리팹을 활성화합니다.

![img_11.png](img_11.png)

그렇기 때문에 이 프리팹은 기본적으로 비활성화되어 있으며, 메시지의 전송 버튼을 클릭했을 때 활성화되도록 설정되어 있습니다.

**OnPostComplete(EzMessage)**

에는 메시지 전송이 정상적으로 완료되었을 때의 콜백을 지정할 수 있습니다.
여기서는 자기 자신을 비활성화하고, 채팅 메시지의 텍스트 입력란을 초기화하는 처리가 설정되어 있습니다.

### Process/Gs2AutoLogin

로그인 처리를 실행하는 프리팹이 설정되어 있습니다.

[Account 샘플]() 에서 설명하고 있으므로, 그쪽을 참조해 주세요.

## 도전해 봅시다

로그인 처리가 완료될 때까지 "메시지 전송 버튼" 을 비활성화하려면 어떻게 하면 될까요?
로그인 처리가 끝났는지 여부로 분기하는 방법은 [Account 샘플]() 에서 설명하고 있습니다. 어떻게 하면 가능할지 생각해 보세요.