Let's integrate our SDK in few minutes
#
Chat SDKs for React NativeCONTUS MirrorFly Chat SDK with its robust features and functionalities makes the integration more efficient and easy for every client’s app.
On client-side implementation, our chat SDK allows you to initialize and configure the chat easily. On server-side implementation, we ensure the most reliable infra-management services for the chat within the app.
This guided documentation here demonstrates the process as how to install the chat SDK in your app so that you can send and receive the messages without any interruption within a few simple steps.
note
CONTUS MirrorFly Chat SDKs use the fastest way in action, to experience the same you must use our trial app to enhance your existing chat app. So just download our sample app and make a start with your app development. Click here to download the sample app.
#
RequirementsWith MirrorFly React Native, make sure that you install all the below mentioned peer dependencies with their specific versions.
Node
- 14.20.0npm
- 6.14.10react-native
>=0.69.12
#
Things To Be Noted Before You Get Started#
SDK License Keycaution
Skip this part if you are already having your license key.
To integrate MirrorFly Chat SDK into your app, you will need a SDK License Key. The MirrorFly server will use this license key to authenticate the SDK in your application.
#
To get the License Key,Step 1: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.
Step 2: Login to your Account
Step 3: Get the License key from the application Info
’ section
#
Integrate the Chat SDKStep 1: Update all your packages.json files.
Step 2: Check your packages files have any duplicate if it is not working in iOS
.
#
Integrate Using Npm packagenote
Install mirrorfly-reactnative-sdk (https://www.npmjs.com/package/mirrorfly-reactnative-sdk) npm package by using the below command
Step 3: Install Mirrorfly Sdk in your application
Step 4: Import the SDK into your application where you want
#
Adding NPM package dependencies to Integrate the Chat SDK#
Initialize Chat SDKTo begin with the initialization process of the chat SDK you are required to have certain data that responds to the changes in the connection status in the client's app.
Now, paste the license key on the licensekey param and use the below given method to pass these data through the SDK for further processing.
In your App file (e.g., App.tsx
or App.js
), import the SDK and call the initializeSDK
function with the appropriate parameters:
note
You can find the sandbox server details in the further Sandbox section for testing purposes.
#
Request ParamsArguments | Description | Type | Required |
---|---|---|---|
apiBaseUrl | API Base URL for Backend | String | true |
licenseKey | Mirrorfly's License Key | String | true |
isTrialLicenseKey | if true Trial Mode will be Enabled | Boolean | false |
callbackListeners | Check here for callback listerners | Object | true |
#
Response ParamsArguments | Description | Type |
---|---|---|
statusCode | Status Code | Number |
message | Success/Error Message | String |
#
Sandbox DetailsThe apiUrl
and licenseKey
details can get it from the 'Overview' section in the mirrorfly Console dashboard.
note
To learn more about callback listeners, go to the Callback Event Listener Section.
#
Example Response#
Register UserStep 1: You can use the below given method to register a new user.
Step 2: Once you are registered, you will be provided with a username and password that you can utilize to make the connection with the server via connect method.
#
Request ParamsStatus | Description | Type | Required |
---|---|---|---|
USER_IDENTIFIER | Unique Id to Register the User | String | true |
Keyword | Description |
---|---|
USER_IDENTIFIER | Unique ID assigned for each user Ex: 12345678 (any alphanumeric). The below characters is not allowed in userId: U+0022 (") U+0026 (&) U+0027 (') U+002F (/) U+003A (:) U+003C (<) U+003E (>) U+0040 (@) userID should follow below specification: https://xmpp.org/extensions/xep-0106.html |
#
Response ParamsArguments | Description | Type |
---|---|---|
statusCode | Status Code | Number |
message | Success/Error Message | String |
data | Username and Password | Object |
#
Sample Response:caution
username
is the unique id that allows you to connect with other users to send or receive messages.
#
Connect to MirrorFly ServerStep 1: You can use the credentials that you have obtained while registration to make the connection with the server.
Step 2: Once you have created the connection successfully, you will be responded with an approval message as ‘statusCode of 200’ or else will get an execution error.
Step 3: With this you can also trace the connection status that you receive in connectionListener callback function.
Step 4: If you face any error while making a connection with the server, you will receive an error message with callback.
#
Request ParamsStatus | Description | Type | Required |
---|---|---|---|
USERNAME | Username | String | true |
PASSWORD | Password | String | true |
#
Response ParamsArguments | Description | Type |
---|---|---|
statusCode | Status Code | Number |
message | Success/Error Message | String |
#
Sample Response:note
To learn more about all possible logins and profile related setup, go to Profile Section.
#
Send a MessageFinally, to send a message to another user you can use the below given method,
note
You can use the const userJid = SDK.getJid(USER_ID)
method, to generate a JID for any user.
#
Request ParamStatus | Description | Type | Required |
---|---|---|---|
TO_USER_JID | JID of the To User. username + "@" + xmppSocketHost | JID String | true |
MESSAGE_BODY | Text Message Body | String | true |
MESSAGE_ID | Text Message Id | String | true |
REPLY_TO | Specifies the Message ID of replied message (Optional) | String | true |
#
Response ParamsArguments | Description | Type |
---|---|---|
statusCode | Status Code | Number |
message | Success/Error Message | String |
#
Response Format:#
Receive a MessageTo receive a message from another user you must implement the messageListener function. It’s a function that will be triggered whenever you receive a new message or related event in one-to-one or group chat. Further to initialize the SDK, you need to add the below callback method during the process.
note
To learn more on 'message listener callbacks,' see the Message Callback Event Listener Section