Introduction

Many web applications today allow users to send and receive direct messages. In this post, you will learn how to use MirrorFly Chat SDKs to build a web chat app in under 30 minutes. This tutorial is built for developers of all proficiency levels - from beginners to experts. Nevertheless, a basic familiarity in Javascript, Angular and React will help.

Features covered in MirrorFly SDKs

When you integrate MirrorFly SDKs, you will be able to implement the following features in your web chat app:

  • Send/ receive direct messages
  • Message Status - Sent/ Delivered / Read
  • Attachments - Location, Contacts, Images, Videos, Documents
  • Starred Messages
  • Copy Messages
  • Reply Messages
  • Message forwards
  • Delete Chat

Pre-requisites:

Browser Versions:

Browser Comparative versions
Safari 7 or above
Chrome 16 or above
Firefox 11 or above
Edge 13 or above

Sample App (If you do not have an existing app)

1) Get Your SDK License Key

Follow the below steps to obtain the License key from MirrorFly’s official website.

Step 1 : Go to MirrorFly’s Console Page

Step 2 : Provide the basic account information

Step 3 : Verify your account using your registered email

Step 4 : Sign into your MirrorFly account.

You will be taken to your Account Overview Page . On this page, you will be able to find the downloadable JavaScript SDK files and your License Key.

Step 5 : From the Application info section, copy the License Key.

#

2) Chat SDK Integration into Web App

In this section, you’ll learn how to integrate Chat SDKs in Javascript, Angular, React and React native.

Chat SDK Integration : Javascript

Step 1 : Download the Javascript SDK files from your MirrorFly Account

Step 2 : Extract the files from the downloaded ZIP folder

Step 3 : Copy the SDK files into your application

Step 4 : After copying, include the script file into your index.html


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

Step 5 : You can now start the initialization with the available SDK object

Step 6 : Once your Javascript SDK is integrated, you may proceed with the chat implementation in any of the programming languages preferred by your clients.

Chat SDK Integration : Angular

Note: Minimum Angular requirement is version 8.3.29

Step 1 : In your project’s root directory, create a new folder

Step 2 : Paste the extracted SDK files

Step 3 : Open angular.json

Step 4 : Navigate to build > options > scripts

Step 5 : Add file paths to your SDK JS files

Step 6 : Before the Component decorator in the root component, add the below code in ngOnInit


                     declare var SDK: any;
                     

Step 7 : Within Angular's initialization method, initialize our SDKs.

Chat SDK Integration : React

Step 1 : In the index.html, include your script file


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

Step 2 : In the project root, create a new file SDK and paste the below code.


                           const SDK = window.SDK;
                              export default SDK;
                     

Step 3 : Import the SDK into your app


                           import SDK from "./SDK";
                     

Chat SDK Integration : React Native

Pre-requisites:

Peer Dependencies Required Version
Node 14.20.0
react-native Any
npm 6.14.10
react-native-document-picker >=8.1.1
@react-native-async-storage/async-storage Any
react-native-get-random-values 1.7.1

Step 1 : Check for packages.json files and update them

Step 2 : Check for any duplicate package files (if they are not working on iOS)

Step 3 : From the dist folder, copy all the extracted files

Step 4 : Inside your project, paste all the SDK files

Step 5 : Export the SDK objects into a SDK.js file


                            import './index';
                           const SDK = window.SDK;
                           export default SDK; 
                     

3) Chat SDK Initialization

To initialize the SDKs, you’ll need a set of data that can respond to the connection status changes in the client’s app. To pass these data, use the below method along with the License Key parameter.


                      //For chat logging 
                      LogMessage.enableDebugLogging(BuildConfig.DEBUG) 
                         
                      ChatSDK.Builder() 
                      .setDomainBaseUrl(BuildConfig.SDK_BASE_URL) 
                      .setLicenseKey(BuildConfig.LICENSE) 
                      .setIsTrialLicenceKey(true) 
                      .build() 
                  

4) User Registration

Step 1 : Use the connect method to establish server connection


                      await SDK.register(`USER_IDENTIFIER`);
                  

You’ll receive a response similar to the section below:


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

Step 2 : You can use the ConnectionListener callback to trace the connection status of the chat SDK with the MirrorFly server.


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

5) Send Messages

Once the server connection is achieved, use the below method to send messages from your web chat app

6) Receive Messages

Implement the messageListener function to receive messages on your web chat app. Next, add the below callback method to initialize the SDK


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

That’s all it takes to make a call from your web app. This tutorial has covered how to integrate MirrorFly SDKs, create users, make server connections and build an app capable of sending and receiving instant messages.

You’ll now be able to connect millions of your users via 1:1 chat on their web apps!

Keep building amazing connections in your chat apps!

Looking to Build an Android Chat App Using Kotlin?

Get Started with MirrorFly SDK's and Improve your overall in-app conversion, engagement, and retention.

  • Average API response 3s
  • 100ms worldwide latency
  • 1 Billion+ Conversations
Try it free
#
Ready to Get Started with Our FREE Chat APIs?

Create immersive chat, video & voice calling experiences that skyrocket engagement and increase your app stickiness with our APIs & SDKs.

  • Dedicated Cloud Server
  • API Response 3 Seconds
  • 99.999% Uptime SLA
Try it free *No Credit Card Required Contact Sales