Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
SendBird로 시작하는 React Native Chat Tutorial #4
Share

SendBird로 시작하는 React Native Chat Tutorial #4

Sun Apr 15 2018

1. Chat 화면 구현하기

OpenChannel 목록 중 하나를 클릭하면 채팅화면이 나타나고 채팅을 할 수 있는 화면을 구성해 보도록 하겠습니다. 이를 위해서는 지금까지와 마찬가지로 화면을 새로 생성하고 actions와 reducers에 각각 알맞은 작업이 필요합니다.

1.1. 화면 이동

우선 채팅이 출력될 Chat.js파일을 screens폴더 아래에 생성하고, OpenChannel.js파일에서 해당 화면으로 이동이 가능하도록 수정하는 작업을 진행하겠습니다.

...waiting for Gist...
OpenChannel.js 파일의 55번째 줄에 있는 _onListItemPress라는 함수는 OpenChannel 목록중 하나를 클릭했을때 발생하는 이벤트 입니다. 이곳에서 Chat.js로 이동하는 코드가 추가되었습니다.

예제에서 사용하고 있는 React Navigationnavigate함수에는 이동하는 화면을 지정하는 것 뿐만 아니라, 변수와 함수를 함께 전달할 수 있습니다. 이 기능을 이용하여, Chat.js로 이동을 하면서 현재 접속하는 채널의 url을 함께 전달하도록 작성되었습니다.

1.2. Chat 화면

SendBird에서 전달되는 메시지는 다음과 같이 구성되어 있습니다.

...waiting for Gist...
  • channelUrl: 메시지가 전송되는 채널의 url
  • messageId: 메시지의 ID
  • reqId: 메시지의 임시 ID
  • message: 메시지
  • customType: 메시지의 사용자 지정 타입
  • data: 메시지의 사용자 지정 데이터
  • sender: 메시지 송신자
  • createdAt: 메시지 전송 시간
  • updatedAt: 메시지 수정 시간

SendBird JavaScript SDK의 SendBird.d.ts를 참고하면 조금 더 자세한 구성을 확인하실 수 있습니다.

채팅 화면에서 가장 중요한 부분은 메시지를 주고 받고, 해당 메시지들을 출력하는 부분입니다. 메시지를 보여주는 컴포넌트는 계속 재사용되니 이 컴포넌트를 만들어서 재사용 하도록 하겠습니다.

...waiting for Gist...

텍스트를 입력하는 부분도 컴포넌트로 제작해 보도록 하겠습니다.

...waiting for Gist...

작성된 Message 컴포넌트와 MessageInput 컴포넌트를 이용하여 Chat 화면을 구성하는 코드는 다음과 같습니다.

...waiting for Gist...

메시지를 React Native에서 제공하는 ListView 컴포넌트를 사용했습니다. ListView는 AndroidiOS의 그것과 유사한 컴포넌트입니다. 메시지를 출력하는 화면에서 과거의 메시지를 불러오면 화면의 상단에 이어 붙이게 됩니다. 따라서, 목록을 가장 위로 올렸을때 과거의 메시지를 요청해야 하는데 ListView컴포넌트는 목록의 상단에 도착했을때 이벤트를 제공하고 있지 않습니다.

ListView는 ScrollView로 구성이 되어있고 ScrollView에 있는 onScroll이라는 프로퍼티를 이용하여 스크롤의 위치에 따라 이벤트를 호출할 수 있습니다. 하지만, ListView에서 제공하고 있는 onEndReached라는 기능이 있기때문에 이 예제에서는 이를 활용하는 방법으로 제작되었습니다.

스크롤의 위치가 가장 위로 갔을때 onEndReached를 이용하여 과거 메시지를 불러오기 위해서는 ListView가 뒤집어져 있어야 합니다(Chat.js line 197). ListView가 뒤집어지면 출력되는 텍스트도 뒤집어 지기 때문에 Message 컴포넌트에서 다시 뒤집어줘서 정상적으로 출력되도록 작성되었습니다(Message.js line 41).

Chat화면 동작을 위한 actions와 reducers는 다음과 같습니다.

...waiting for Gist...

SendBird에서 제공하는 핸들러 중에서 onMessageReceived는 메시지가 도착했을때 메시지가 전달된 채널과 메시지를 인자로 전달하여 호출됩니다. 단, 메시지를 전송한 송신자에게는 전달이 되지 않기때문에 message전송 함수인 sendUserMessage함수의 콜백에서 추가적인 처리를 해주는것을 권장합니다(sendbirdActions/chat.js line 26, actions/chatActions.js line 99). 

RN4-image-01.png

예제에서는 문자 기반의 메시지인 UserMessage를 이용하여 메시지를 전송하는 부분이 구현되었습니다. UserMessage에는 각 메시지에 사용자 임의의 타입을 지정하는 등의 기능이 있습니다. 또한, SendBird에서는 그 외에도 FileMessageAdminMessage라는 UserMessage와 다른 타입의 메시지 기능을 제공하고 있습니다.

SendBird SDK의 공식문서저장소의 SendBird.d.ts 파일을 통해 조금 더 다양한 기능을 확인하실 수 있습니다. 조금 더 다양한 기능이 추가된 예제는 SendBird JavaScript 저장소에서 확인하실 수 있습니다. 감사합니다.

We're Hiring!
Help SendBird build the world's messaging platform
We're Hiring!
Help SendBird build the world's messaging platform
Related articles
React Native의 AsyncStorage 최적화
AsyncStorage는 React Native에 내장된 기본 데이터 저장소로, 간단한 키-값쌍 데이터를 저장해 관리할 수 있습니다. 센드버드 SDK 내 채팅 데이터 관리 부분의 외부 의존성을 줄이기 위한 방법을 찾던 중 저희는 AsyncStorage를 알게 되었고, 적용 가능성을 알아보기 위한 테스트 중 Asy
CHRIS HEO
Software Engineer - Applications
챗봇 플랫폼 도구 - 메시징과 봇 인터페이스, 1편
오늘날 챗봇 제작을 위한 여러 플랫폼이 출시되어 주목을 받고 있지만, 챗봇 제작 후 다음으로 고려해야 할 부분인 어디에 챗봇을 구축해야 하는지는 큰 주목을 받지 못하고 있습니다. 모든 챗봇은 사용자와 메시지를 주고받기 위한 메시징 인터페이스를 필요로 합니다.
ALEK JEZIOREK
Content Marketing and PR Manager
SendBird로 시작하는 React Native Chat Tutorial #3
1. Menu 구성하기 1.1. Disconnect 메뉴 화면은 4가지 화면으로 이동하는 버튼을 제공하는 화면으로 구현하도록 하겠습니다. 
JAMES KIM
Software Engineer - Web Applications
© SendBird 2019. All rights reserved.
Follow us