개요

agora.io에 ReactNative용 Real-time Messaging SDK가 게시되었습니다.

Agora Real-time Messaging SDK는 텍스트 데이터를 실시간으로 송수신할 수 있는 SDK로,
이것은 ReactNative 용 래퍼입니다.

이 기사에서는 샘플 소스와 함께 제공되는 example 앱을 사용하여,
그 빌드와 사용법을 소개합니다.

또한 Agora Video SDK의 ReactNative 용 래퍼에 대해서도 공개되어 있으므로 퀵 스타트 가이드는 여기을 참조하십시오.

샘플 소스

샘플 소스는 아래에서 다운로드하여 준비하십시오.
ReactNative용 Real-time Messaging SDK 샘플
또한 이 문서에서 사용하는 example 앱은 위 샘플의/example 폴더 아래에 있습니다.
example 폴더

사용방법

빌드 방법, 동작 확인에 대해 설명합니다.

빌드 방법

1. 샘플 소스 다운로드
2. 파일 배포
3. 프로젝트의 루트 폴더(/example)로 이동
4. agora.config.json 에 APP ID 추가

agora.config.json

  "appId": ******,

※APP_ID는 agora.io에서 발행된 Id를 준비해 주세요

5. 패키지 추가

$ npm install
$ react-native link agora-react-native-rtm
$ react-native link react-navigation
$ react-native link react-native-gesture-handler
$ react-native link react-native-vector-icons

6. 패키지 서버 시작

$ npm run start

7.실기(Android)와 PC를 USB 접속
8.실기 빌드

$ react-native run-android

8. 앱 시작

초기 화면

동작 확인

빌드가 완료되었으므로 동작 확인을 합니다.

※전 준비로서, 대향 거점이 필요하기 때문에, Real-time-Messaging SDK의 다운로드 사이트에서,
WebRTC용 Real-time-Messaging 샘플 앱을 다운로드하여 준비하세요.
Real-time-Messaging SDK 다운로드 사이트
(Real-time-Messaging SDK의 "Web vx.x.x"버튼을 클릭)
참고 사용하려면 node.js, npm이 필요합니다.

(다른 1대의 Android 기기를 가지고 있다면, 그 기기에 ReactNative 앱을 설치하여 대향 거점으로 하시는 것이 좋을까 생각합니다)

1.ReactNative 앱 시작 & join
ReactNative 앱을 시작한 후,
채널 이름에 "demo"를 입력하고 "Join Channel"을 클릭하십시오.
(Join 후)


2. 대향 거점 앱 시작 & 로그인
준비해 둔 대향 거점이 되는 샘플 앱을 기동합니다.
(npm install, npm run dev에서 브라우저 시작 (localhost : 8080))
AppId를 입력하고 AccountName에 "web"을 입력하고 "Login"을 클릭하십시오.


3. (대향 거점 앱) Channel에 join
채널 이름에 "demo"를 입력하고 "Join"을 클릭하십시오.


4. (ReactNative 앱) 메시지 보내기
ReactNative 앱에서 보내는 메시지에 "hello"를 입력하고 "Send"를 클릭합니다.


대향 사이트 앱에서 메시지를 수신할 수 있는지 확인합니다.


5. (ReactNative 앱) 메시지 수신
대향 거점 앱에서 Channel Message(전송 메시지)에 "bye"를 입력하고 "SEND"를 클릭합니다.


ReactNative 앱에서 메시지를 수신할 수 있는지 확인합니다.


ReactNative 앱을 빌드하고 메시지를 보내고 받을 수 있습니다.

관련 링크

· Real-Time Messaging SDK의 ReactNative용 패키지가 있습니까?

마지막으로

agora.io에 관한 문의는 이쪽으로부터