Let's integrate our SDK in few minutes

Quick Start#

Download SDK Files

Chat SDKs for Web#

CONTUS 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.

Supported browsers#

Browser	Supported versions
Edge	13 or higher
Chrome	16 or higher
Firefox	11 or higher
Safari	7 or higher

Make a note of Below Points Before Making a Start#

PART I - SDK License Key#

Before moving forward with CONTUS MirrorFly Chat SDK integration, it is necessary for an SDK to be authenticated by the MirrorFly server using the license key for further processing.

The below given is the process that needs to be followed to obtain a license key:

Step 1: Get started - Signup into MirrorFly Console page (https://console.mirrorfly.com/register) and create a free MirrorFly account

Step 2: While creating an account you can provide your basic details that includes your name, organization details, work email, and contact number

Step 3: As soon as you got into the account! You get access to move across the entire page on your MirrorFly account. Click on the ‘Overview page’ and get access to the license key as well as downloadable JavaScript SDK files to proceed further with integration process

Step 4: Copy the license key from the ‘Application info’ section

license-key

PART II - Integrate Chat SDK into Your Web App#

CONTUS MirrorFly Chat for JavaScript, makes the in-app chat development process easy with all the essential messaging features

Since it’s the core of all the languages - Importing JavaScript into the application is the fundamental step to proceed further before using any language.

Chat SDK Integration for Javascript#

Step 1: To download the files from the JavaScript SDKs, click on the Download button, that will take you to the top of this guided documentation page.

Step 2: Click on the given Download button and extract the files from the downloaded zip file and copy them into your application.

Step 3: Once the file has been copied, include the script file into your index.html

<script src="./index.js"></script>
<script src="./socket.io.js"></script>

Step 4: Now you have the SDK object available in your application to proceed further with initialization.

Step 5: Once, you have successfully got the SDK into your application. It’s time to go with your client’s preferred language implementation.

Chat SDK Integration for React#

Step 1: Include script file into your index.html

<script src="./index.js"></script>
<script src="./socket.io.js"></script>

Step 2: Create a new file SDK.js in the project root and paste the below code,

const SDK = window.SDK;
export default SDK;

Step 3: Import the SDK into your application

import SDK from "./SDK";

Chat SDK Integration for React Native#

With MirrorFly React Native, make sure that you install all the below mentioned peer dependencies with their specific versions.

Node - 14.20.0
npm - 6.14.10
react-native - Any version
@react-native-async-storage/async-storage - Any version
react-native-get-random-values - must use version >=1.7.1
react-native-document-picker - must use version >=8.1.1

Step 1: Update all your packages.json files.

Step 2: Check your packages files have any duplicate if it is not working in iOS.

Step 3: Copy all the extracted files from the dist folder.

Step 4: Create a new folder inside your project and paste all the copied files into it.

Step 5: Create a file SDK.js to export the SDK Objects. Furthermore, can use the below given codes to import the SDKs,

import './index';

const SDK = window.SDK;

export default SDK;

Chat SDK Integration for Angular#

note

Minimum Requirement Angular version 8.3.29

Step 1: Copy all the extracted files from the SDK folder.

Step 2: Create a new folder inside your project's Root folder and paste all the copied files into it.

Step 3: Open your angular.json and search for the property by navigating the buttons : build => options => scripts.

Step 4: Here, you can find the array of scripts wherein you can add the relative file paths of respective downloaded SDK JS files.

Step 5: Now, add the below codes in the Root component (before @Component Decorator).

declare var SDK: any;

Step 6: Once you have added the SDK into Root component’s ngOnInit, initialize our SDKs within angular's initialization method.

PART III - Terminology#

The below are the common keywords/terminologies used in SDKs with their descriptions

Keyword	Description
`userId`	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
`userJid`	userID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
`groupJid`	Unique ID assigned for each group Ex: group123456 (any alphanumeric). GroupJID = groupID +@mix.+domain of the chat server Ex: group123456@mix.xmpp.mirrorfly.dev.contus.us`

Initialize Chat SDK#

To 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.

note

You can find the sandbox server details in the further Sandbox section for testing purposes.

const initializeObj = {
  apiBaseUrl: `API_URL`,
  licenseKey: `LICENSE_KEY`,
  isTrialLicenseKey: `TRIAL_MODE`,
  callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);

Request Params#

Arguments	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 Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String

Sandbox Details#

function connectionListener(response) {
  if (response.status === "CONNECTED") {
    console.log("SDK has connected to the server successfully.");
  } else if (response.status === "DISCONNECTED") {
    console.log("SDK has disconnected and lost the session. Reconnection was automatically called by the SDK.");
  } else if (response.status === "CONNECTIONFAILED") {
    console.log("SDK has failed to connect to the server.");
  } else if (response.status === "RECONNECTING") {
    console.log("SDK has started reconnecting to the server.");
  }
}

const initializeObj = {
  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener
  },
};
await SDK.initializeSDK(initializeObj);

note

To learn more about callback listeners, go to the Callback Event Listener Section.

Example Response#

{
  "statusCode": 200,
  "message": "Success"
}

PART IV - Create a User#

Register User#

Step 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.

await SDK.register(`USER_IDENTIFIER`);

Request Params#

Status	Description	Type	Required
`USER_IDENTIFIER`	Unique Id to Register the User	String	true
`FORCE_REGISTER`	`default value true` provide `true` to force the old session logged out when the registered user has reached the maximum number of multiple-sessions or provide `false` to allow registration till the maximum no of multiple-sessions reached	Boolean	false

caution

If FORCE_REGISTER is false and if it reached the maximum no of multiple-sessions, then registration will not success and it will throw a 405 exception. Either FORCE_REGISTER should be true or one of the existing session need to be logged out to continue registration.

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String
data	Username and Password	Object

Sample Response:#

{
  statusCode: 200,
  message: "Success",
  data: {
    username: "123456789",
    password: "987654321"
  }
}

caution

username is the unique id that allows you to connect with other users to send or receive messages.

Connect to MirrorFly Server#

Step 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.

await SDK.connect(`USERNAME`, `PASSWORD`);

Request Params#

Status	Description	Type	Required
`USERNAME`	Username	String	true
`PASSWORD`	Password	String	true

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String

note

To learn more about all possible logins and profile related setup, go to Profile Section.

PART V - Send a Message#

Finally, 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.

await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,'MESSAGE_ID');

Request Param#

Status	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`	Message Id	String	false

Response Format:#

status code: "", // Number - status code
message: "", // String - Success/Error Message 
data: 
  {
    chatType: "", // String - Chat Type - "chat"
    createdAt: "", // String - Message Created Time
    deleteStatus: "", // Number - Delete Status
    favouriteBy: "", // String - Favourited By - User
    favouriteStatus: "", //Number - Favourite status 
    fromUserJid: "", // String - From User Jid
    msgBody: {
      message: "", // String - Message Body
      message_type: "", // String - Message Type
      nickname: "", // String - nick name
      mentionedUsersIds: [] // Array of mentioned users
    },
    msgId: "", // String - Unique Message Id 
    msgType: "", // String - Group Message Type
    publisherId: "", // String - user Id
    timestamp: "", // Number - TimeStamp - 16 Character length
   },
  

PART VI - Receive a Message#

To 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.

function messageListener(response) {
  console.log("Message Listener", response);
}

note

To learn more on 'message listener callbacks,' see the Message Callback Event Listener Section