Let's integrate our SDK in few minutes

Quick Start#
Download SDK Files
Download
warning

MirrorFly Chat SDK V2 is released. Check out our latest Chat SDK V2 here.

To migrate from MirrorFly Chat SDK from V1 to V2 please follow the Migration guide steps.

Chat SDKs for Angular#

With CONTUS MirrorFly Chat SDK for web, you can easily add real-time chat features to your client app within 30 minutes.

Through our client SDK, you can initialize and configure chat into your app with minimal efforts.

note

If you're looking for the fastest way to build your app’s UI with MirrorFly Chat SDK, you can use our sample apps. To get our sample apps, click here.

Getting Started#

Supported browsers#

BrowserSupported versions
Edge13 or higher
Chrome16 or higher
Firefox11 or higher
Safari7 or higher

Things To Be Noted Before You Get Started#

SDK License Key#
caution

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: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.

Step 3: Get the License key from the application Info’ section

license-key

Integrate Chat SDK into Your Angular 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.

Integrate Using Sdk Files#

note

Minimum Requirement Angular version 8.3.29

Step 1: To download the files from the Angular 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: Create a new folder inside your project's Root folder and paste all the copied files into it.

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

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

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

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

declare var SDK: any;

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

Integrate Using Npm package#

note

Install mirrorfly-sdk (https://www.npmjs.com/package/mirrorfly-sdk) npm package by using the below command

Step 1: Install Mirrorfly Sdk in your application

npm i mirrorfly-sdk

Step 2: Import the SDK into your application where you want

import * as SDK from "mirrorfly-sdk";

Terminology#

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

KeywordDescription
userIdUnique 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
userJiduserID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
groupJidUnique 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#

ArgumentsDescriptionTypeRequired
apiBaseUrlAPI Base URL for BackendStringtrue
licenseKeyMirrorfly's License KeyStringtrue
isTrialLicenseKeyif true Trial Mode will be EnabledBooleanfalse
callbackListenersCheck here for callback listernersObjecttrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Sandbox Details#

The apiUrl and licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.

license-key

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"
}

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#

StatusDescriptionTypeRequired
USER_IDENTIFIERUnique Id to Register the User. We accept only the AlphaNumeric StringStringtrue
FORCE_REGISTERdefault 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 reachedBooleanfalse
registerMetaDataregisterMetaData is an optional parameter to provide MetaData of user. Maximum size is 3Objectfalse

Request Input for registerMetaData#

ArgumentsDescriptionType
keyName of the KeyString
valueName of the valueString or Boolean or Number
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#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString
dataUsername, Password, isProfileUpdated, isSandboxObject

Sample Response:#

{
statusCode: 200,
message: "Success",
data: {
username: "123456789",
password: "987654321",
isProfileUpdated: true,
isSandbox: true
}
}
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#

StatusDescriptionTypeRequired
USERNAMEUsernameStringtrue
PASSWORDPasswordStringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Sample Response:#

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

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

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`);

Request Param#

StatusDescriptionTypeRequired
TO_USER_JIDJID of the To User. username + "@" + xmppSocketHostJID Stringtrue
MESSAGE_BODYText Message BodyStringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString
dataObject of dataObject

Response Format:#

statusCode: 200, // Number - status code
message: "", // String - Success/Error Message
data:
{
chatType: "", // String - Chat Type - "chat"
createdAt: "", // String - Message Created Time
deleteStatus: 0, // Number - Delete Status
favouriteBy: "", // String - Favourited By - User
favouriteStatus: 0, //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: 1681185232000, // Number - TimeStamp - Milliseconds
},

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