<div id="readability-page-1" class="page"><div>
 <a href="/m/category/Dev/Android">Dev/Android</a><h3>Stream Chat 구현 - Android / 안드로이드</h3>
 </div><cite>healthyryu</cite>
 2022. 9. 29. 16:58
 <div>
 <figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-29 오후 3.30.02.png" data-origin-width="1340" data-origin-height="546">
 
 <img src="https://k.kakaocdn.net/dn/1bHDZ/btrNo9haqif/c7hDbP4k9CtEYlhkZcop60/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="587" height="239" data-filename="스크린샷 2022-09-29 오후 3.30.02.png" data-origin-width="1340" data-origin-height="546">
 
 
</figure>
기본적으로는 <a href="https://getstream.io/chat/sdk/android/" target="_blank" rel="noopener">공식 페이지</a>를 참고해서 구현하면 되며, 추가적으로는 Stream 에서 일하고 계신 한국인 현직자 <a href="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk" target="_blank" rel="noopener">skydoves 님 블로그</a>를 추가적으로 참고하면 도움이 크게 됩니다. 저는 제 기준으로 진행하면서 알았으면 좋았겠구나 싶은 부분을 기준으로 설명합니다.

⚠ Stream 에 계정이 있다는 전제하에 설명합니다.


모바일 채팅 구현에 앞서서 <a href="https://getstream.io/dashboard/" target="_blank" rel="noopener">Stream 대시보드</a>에 가서 채팅 앱(서버 역할)을 구성해야합니다.

<h3 data-ke-size="size23">1. Stream 대시보드에서 채팅에 사용할 서버 앱 구성</h3>
앱 생성 시 설정 환경이 PRODUCTION /&nbsp; DEVELOPMENT 2가지 형태가 있습니다.
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-29 오후 3.40.20.png" data-origin-width="1028" data-origin-height="1126">
 
 <img src="https://k.kakaocdn.net/dn/BEJXD/btrNnsveVLG/2m1IvCgJwcy2dnHuPsyKu0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="464" height="508" data-filename="스크린샷 2022-09-29 오후 3.40.20.png" data-origin-width="1028" data-origin-height="1126">
 
 
</figure>
앱 환경에 따라서 모바일에서 채팅을 구현할때 Token 필요 여부가 정해집니다. Development 환경으로 셋팅을 하면 Token 을 실제 생성하지 않아도 테스트를 할 수 있습니다. Production 환경 으로 앱을 셋팅하면 반드시 모바일에서 Stream 에 연결할때&nbsp;Token 이 있어야만 연결할 수 있습니다.

토큰 생성 방법은 아래 더 보기를 눌러보시면 확인이 가능합니다.

참고로, 저 같은 경우는 Development 환경에서 작업해 보고 Production 환경도 작업하기 위해서 vscode 로 python 설치 후 토큰 발급 받아서 테스트를 진행했습니다.
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-29 오후 3.33.51.png" data-origin-width="2729" data-origin-height="1452">
 
 <img src="https://k.kakaocdn.net/dn/bNvvGu/btrNkbgGx1I/FiMZKGfv5w5jdzuhouOoZK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-09-29 오후 3.33.51.png" data-origin-width="2729" data-origin-height="1452">
 
 
</figure>

<h3 data-ke-size="size23">2. AOS 에서 Stream Client 로 연결하기</h3>
-&gt; <a href="https://getstream.io/tutorials/android-chat/?language=kotlin#creating-a-chat-experience" target="_blank" rel="noopener">공식 사이트 채팅 구성 코드</a> 를 참고하시면 정말 좋습니다.
아래 코드는 튜토리얼에 나온 <a href="https://github.com/GetStream/android-chat-tutorial/blob/main/samplekotlin/src/main/java/com/example/chattutorial/MainActivity.kt" target="_blank" rel="noopener">메인 페이지인 MainActivity.kt</a> 참고 하시면 됩니다.

ChatClient 클래스로 Stream 서비스에 연결하기 위해서는 서버 앱 구성시 제공되는 APK KEY 와 채팅 ID 가 필요합니다. 그리고 아래 코드에 있는 token 변수 의 경우 Development 환경이라면 Token 을 생성할 필요가 없으나 Production 환경이라면 Token 이 필요 합니다.
(Token 생성은 위의 토큰 생성 방법을 참고하시기 바랍니다.)
<pre id="code_1664436284900" data-ke-language="kotlin" data-ke-type="codeblock"><code>val client = ChatClient.Builder("***API KEY***", applicationContext)
 .withPlugin(offlinePluginFactory)
 .logLevel(ChatLogLevel.ALL) // Set to NOTHING in prod
 .build()
 
val user = User(
 id = "*** 채팅ID ***",
 name = "*** 채팅ID ***", // 이름은 어떤게 들어가든 상관 없음
)

// Production 버전
client.connectUser(
 user = user,
 token = "*** 서버에서 받은 Token ***"
).enqueue()

// Development 버전
client.connectUser(
 user = user,
 token = client.devToken(user.id)
).enqueue()</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-28 오후 6.10.37.png" data-origin-width="1172" data-origin-height="337">
 
 <img src="https://k.kakaocdn.net/dn/zUOXw/btrNka25ZKK/66AfKEhUOmOFk2biehZNFK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-09-28 오후 6.10.37.png" data-origin-width="1172" data-origin-height="337">
 
 <figcaption>API KEY 참고</figcaption>
</figure>

<h3 data-ke-size="size23">3. ChatClient 로 Stream 에 정상적으로 연결 후 채팅 리스트 받아오기</h3>
아래 코드도 동일하게&nbsp;<a href="https://github.com/GetStream/android-chat-tutorial/blob/main/samplekotlin/src/main/java/com/example/chattutorial/MainActivity.kt">메인 페이지인 MainActivity.kt</a>&nbsp;참고 하시면 됩니다.
위의 코드로 통해서 ChatClient 로 연결이 제대로 이루어지면 채팅 리스트를 ChannelListViewModel 에서 받아오면 해당 화면의 리스트에 보내줄것입니다.

<pre id="code_1664437109782" data-ke-language="kotlin" data-ke-type="codeblock"><code>val filter = Filters.and(
 Filters.eq("type", "messaging"),
 Filters.`in`("members", listOf(user.id))
)
val viewModelFactory =
 ChannelListViewModelFactory(filter, ChannelListViewModel.DEFAULT_SORT)
val viewModel: ChannelListViewModel by viewModels { viewModelFactory }

viewModel.bindView(binding.channelListView, this)
binding.channelListView.setChannelItemClickListener { channel -&gt;
 startActivity(ChannelActivity4.newIntent(this, channel))
}</code></pre>


<h3 data-ke-size="size23">4. 대시보드에서 계정 확인</h3>
계정을 미리 생성한 경우가 아니고 생성하지 않은 ID 로 위의 프로세스대로 하고 정상적으로 ChatClient 로 연결을 했다면 아래와 같이 새로 생성한 계정을 Chat Explorer 에서 확인할 수 있습니다.&nbsp;
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-28 오후 5.41.15.png" data-origin-width="2720" data-origin-height="1154">
 
 <img src="https://k.kakaocdn.net/dn/beIXPL/btrNjTAyfpx/NGM6UHUN9mFFNMuVKWrzCk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-09-28 오후 5.41.15.png" data-origin-width="2720" data-origin-height="1154">
 
 
</figure>

<h3 data-ke-size="size23">5. 추가적으로 채팅 채널도 모바일에서 생성하기</h3>
아래 코드도 동일하게&nbsp;<a href="https://github.com/GetStream/android-chat-tutorial/blob/main/samplekotlin/src/main/java/com/example/chattutorial/MainActivity.kt">메인 페이지인 MainActivity.kt</a>&nbsp;참고 하시면 됩니다.

client.connetUser().enqueque() 후에 다음과 같은 코드로 채팅 채널을 생성할 수도 있습니다. 다음과 같이 정상적으로 채팅방 생성이 된다면 아래의 이미지와 같이 새롭게 생성된 채팅방을 확인할 수 있습니다.
- <a href="https://getstream.io/chat/docs/android/creating_channels/?language=kotlin" target="_blank" rel="noopener">채팅 채널 생성 가이드</a> 참고

<pre id="code_1664437653053" data-ke-language="kotlin" data-ke-type="codeblock"><code>client.connectUser(
 user = user,
 token = TOKEN
).enqueue {
 if (it.isSuccess) {
 client.createChannel(
 channelType = "messaging",
 channelId = "new_channel_02",
 memberIds = listOf(user.id),
 extraData = mapOf("name" to "My New Channel")
 ).enqueue { result -&gt;
 if (result.isSuccess) {
 startActivity(ChannelActivity.newIntent(context, result.data()))
 } else {
 Toast.makeText(con, "채팅 채널 생성 실패", Toast.LENGTH_SHORT).show()
 }
 }
 }
}</code></pre>
ChannelType 은 messaging 으로 설정해서 일반 메세징으로 설정했으며
고유한 ChannelId 는 new_channel_02 로 만들었고 채팅 리스트에 노출되는 채널 이름은 My New Channel 로 설정했습니다.

대시보드에서 확인 가능한 내용
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-28 오후 5.48.50.png" data-origin-width="2134" data-origin-height="782">
 
 <img src="https://k.kakaocdn.net/dn/oJpuV/btrNjShjjME/rv0yTsXVBzu0gezXKBZFfK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-09-28 오후 5.48.50.png" data-origin-width="2134" data-origin-height="782">
 
 
</figure>

모바일 에서 확인 가능한 채널 이름
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-09-28 오후 6.02.05.png" data-origin-width="421" data-origin-height="476">
 
 <img src="https://k.kakaocdn.net/dn/w6q4h/btrNlaooX1b/Sw9dSfDlYgCu0hJJbJNnk0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-09-28 오후 6.02.05.png" data-origin-width="421" data-origin-height="476">
 
 
</figure>

공식 사이트와 skydoves 님 블로그 글을 메인으로 보면서 해당 글을 추가로 본다면 조금이나마 도움이 되리라 생각합니다.


참고 사이트
- <a href="https://getstream.io/tutorials/android-chat/" target="_blank" rel="noopener">https://getstream.io/tutorials/android-chat/</a>
<figure id="og_1664414926993" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Android Chat Tutorial with Java &amp; Kotlin" data-og-description="Android Chat Tutorial: How to build a chat app" data-og-host="getstream.io" data-og-source-url="https://getstream.io/tutorials/android-chat/" data-og-url="https://getstream.io/tutorials/android-chat/" data-og-image="https://scrap.kakaocdn.net/dn/nY7Lx/hyPWCoit8R/VPykvoF71ZKLnTS4Fc0Kl1/img.png?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/qA5WV/hyPXMbLFaK/HE3PtVEhJqrMS3LQnCLOck/img.png?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/iFIew/hyPXBORhVn/WEWILW6835tzJN0sDoYrCK/img.png?width=870&amp;height=1740&amp;face=0_0_870_1740"><a href="https://getstream.io/tutorials/android-chat/" target="_blank" rel="noopener" data-source-url="https://getstream.io/tutorials/android-chat/">

<div>
Android Chat Tutorial with Java &amp; Kotlin
Android Chat Tutorial: How to build a chat app
getstream.io
</div>
</a><img src="https://scrap.kakaocdn.net/dn/nY7Lx/hyPWCoit8R/VPykvoF71ZKLnTS4Fc0Kl1/img.png?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/qA5WV/hyPXMbLFaK/HE3PtVEhJqrMS3LQnCLOck/img.png?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/iFIew/hyPXBORhVn/WEWILW6835tzJN0sDoYrCK/img.png?width=870&amp;height=1740&amp;face=0_0_870_1740"></figure>
- <a href="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk" target="_blank" rel="noopener">https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk</a>
<figure id="og_1664414900159" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="안드로이드 채팅 앱 만들기 - Stream Chat SDK" data-og-description="Stream이번 포스트에서는 Stream Chat SDK for Android를 사용하여 누구나 빠르고 쉽게 안드로이드 채팅 앱을 개발하는 방법을 살펴봅니다.먼저, 안드로이드 스튜디오에서 New Project -> Empty Activity를 선택" data-og-host="velog.io" data-og-source-url="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk" data-og-url="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk" data-og-image="https://scrap.kakaocdn.net/dn/bUf5cH/hyPWNJ9MO7/dytd6tX7wzvyhryH5Us3W0/img.png?width=1824&amp;height=614&amp;face=0_0_1824_614"><a href="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk" target="_blank" rel="noopener" data-source-url="https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk">

<div>
안드로이드 채팅 앱 만들기 - Stream Chat SDK
Stream이번 포스트에서는 Stream Chat SDK for Android를 사용하여 누구나 빠르고 쉽게 안드로이드 채팅 앱을 개발하는 방법을 살펴봅니다.먼저, 안드로이드 스튜디오에서 New Project -&gt; Empty Activity를 선택
velog.io
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bUf5cH/hyPWNJ9MO7/dytd6tX7wzvyhryH5Us3W0/img.png?width=1824&amp;height=614&amp;face=0_0_1824_614"></figure>

 
 
 </div></div>

대부류 - [Dev u Ryu]

류지훈

기본적으로는 공식 페이지를 참고해서 구현하면 되며, 추가적으로는 Stream 에서 일하고 계신 한국인 현직자 skydoves 님 블로그를 추가적으로 참고하면 도움이 크게 됩니다. 저는 제 기준으로 진행하면서 알았으면 좋았겠구나 싶은 부분을 기준으로 설명합니다.
 
⚠ Stream 에 계정이 있다는 전제하에 설명합니다.
 
 
모바일 채팅 구현에 앞서서 Stream 대시보드에 가서 채팅 앱(서버 역할)을 구성해야합니다.
 
1. Stream 대시보드에서 채팅에 사용할 서버 앱 구성
앱 생성 시 설정 환경이 PRODUCTION /  DEVELOPMENT 2가지 형태가 있습니다.
앱 환경에 따라서 모바일에서 채팅을 구현할때 Token 필요 여부가 정해집니다. Development 환경으로 셋팅을 하면 Token 을 실제 생성하지 않아도 테스트를 할 수 있습니다. Production 환경 으로 앱을 셋팅하면 반드시 모바일에서 Stream 에 연결할때 Token 이 있어야만 연결할 수 있습니다.
 
토큰 생성 방법은 아래 더 보기를 눌러보시면 확인이 가능합니다.
더보기
VS Code 로 Python 설치 후 실행하면 토큰을 얻게 됩니다. Get Token!!
# pip install stream-chat
import stream_chat
server_client = stream_chat.StreamChat(api_key="STREAM_KEY", api_secret="STREAM_SECRET")
token = server_client.create_token("계정 ID")
api_key, api_secret 은 아래 이미지 참고하면 됩니다.
계정 ID 같은 경우는 유니크한 String 으로 구성해야하고, Stream 대시보드에서 계정을 생성하고 생성한 ID 를 사용해도되며, 등록되지 않은 임의의 문자(abcd123)로 설정해서 모바일에서 Stream Client 에서 연결하면 생성한 서버앱에서 사용자가 추가됩니다.
(지금 계정에 대한 설명은 직접 실행해보시고나면 이해할 수 있을 것이니, 그냥 그렇구나 하고 넘어가시면 됩니다.)
 
결과론적으로, 계정 ID 는 아무렇게나 설정해서 진행해라!!! - 다만, 해당 계정 ID 는 모바일에서 코드를 구현할때 사용해야 합니다.
https://getstream.io/chat/docs/react/tokens_and_authentication/#generating-tokens
참고로, 저 같은 경우는 Development 환경에서 작업해 보고 Production 환경도 작업하기 위해서 vscode 로 python 설치 후 토큰 발급 받아서 테스트를 진행했습니다.
 
2. AOS 에서 Stream Client 로 연결하기
-> 공식 사이트 채팅 구성 코드 를 참고하시면 정말 좋습니다.
아래 코드는 튜토리얼에 나온 메인 페이지인 MainActivity.kt 참고 하시면 됩니다.
 
ChatClient 클래스로 Stream 서비스에 연결하기 위해서는 서버 앱 구성시 제공되는 APK KEY 와 채팅 ID 가 필요합니다. 그리고 아래 코드에 있는 token 변수 의 경우 Development 환경이라면 Token 을 생성할 필요가 없으나 Production 환경이라면 Token 이 필요 합니다.
(Token 생성은 위의 토큰 생성 방법을 참고하시기 바랍니다.)
val client = ChatClient.Builder("***API KEY***", applicationContext)
    .withPlugin(offlinePluginFactory)
    .logLevel(ChatLogLevel.ALL) // Set to NOTHING in prod
    .build()
        
val user = User(
    id = "*** 채팅ID ***",
    name = "*** 채팅ID ***", // 이름은 어떤게 들어가든 상관 없음
)
// Production 버전
client.connectUser(
    user = user,
    token = "*** 서버에서 받은 Token ***"
).enqueue()
// Development 버전
client.connectUser(
    user = user,
    token = client.devToken(user.id)
).enqueue()
 
3. ChatClient 로 Stream 에 정상적으로 연결 후 채팅 리스트 받아오기
아래 코드도 동일하게 메인 페이지인 MainActivity.kt 참고 하시면 됩니다.
위의 코드로 통해서 ChatClient 로 연결이 제대로 이루어지면 채팅 리스트를 ChannelListViewModel 에서 받아오면 해당 화면의 리스트에 보내줄것입니다.
 
val filter = Filters.and(
    Filters.eq("type", "messaging"),
    Filters.`in`("members", listOf(user.id))
)
val viewModelFactory =
    ChannelListViewModelFactory(filter, ChannelListViewModel.DEFAULT_SORT)
val viewModel: ChannelListViewModel by viewModels { viewModelFactory }
viewModel.bindView(binding.channelListView, this)
binding.channelListView.setChannelItemClickListener { channel ->
    startActivity(ChannelActivity4.newIntent(this, channel))
}
 
 
4. 대시보드에서 계정 확인
계정을 미리 생성한 경우가 아니고 생성하지 않은 ID 로 위의 프로세스대로 하고 정상적으로 ChatClient 로 연결을 했다면 아래와 같이 새로 생성한 계정을 Chat Explorer 에서 확인할 수 있습니다. 
 
5. 추가적으로 채팅 채널도 모바일에서 생성하기
아래 코드도 동일하게 메인 페이지인 MainActivity.kt 참고 하시면 됩니다.
 
client.connetUser().enqueque() 후에 다음과 같은 코드로 채팅 채널을 생성할 수도 있습니다. 다음과 같이 정상적으로 채팅방 생성이 된다면 아래의 이미지와 같이 새롭게 생성된 채팅방을 확인할 수 있습니다.
- 채팅 채널 생성 가이드 참고
 
client.connectUser(
    user = user,
    token = TOKEN
).enqueue {
    if (it.isSuccess) {
        client.createChannel(
            channelType = "messaging",
            channelId = "new_channel_02",
            memberIds = listOf(user.id),
            extraData = mapOf("name" to "My New Channel")
        ).enqueue { result ->
            if (result.isSuccess) {
                startActivity(ChannelActivity.newIntent(context, result.data()))
            } else {
                Toast.makeText(con, "채팅 채널 생성 실패", Toast.LENGTH_SHORT).show()
            }
        }
    }
}
ChannelType 은 messaging 으로 설정해서 일반 메세징으로 설정했으며
고유한 ChannelId 는 new_channel_02 로 만들었고 채팅 리스트에 노출되는 채널 이름은 My New Channel 로 설정했습니다.
 
대시보드에서 확인 가능한 내용
 
모바일 에서 확인 가능한 채널 이름
 
공식 사이트와 skydoves 님 블로그 글을 메인으로 보면서 해당 글을 추가로 본다면 조금이나마 도움이 되리라 생각합니다.
 
 
참고 사이트
- https://getstream.io/tutorials/android-chat/
- https://velog.io/@skydoves/android-chat-tutorial-stream-chat-sdk

Stream Chat 구현 - Android / 안드로이드

댓글