Introduction

Welcome to this tutorial on building a chat app for the web!

In this guide, we will show you how to use MirrorFly's chat SDKs to add messaging functionality to your web app, using Javascript, Angular, React, or React Native. It is assumed that you have a basic understanding of Javascript to easily follow the steps instructed throughout this tutorial.

With no further ado, Let’s start with the development!

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

Conclusion

As seen from this tutorial, you’ll now be able to develop your own web chat apps in just 6 steps. If you’d like to take a step further with adding other functionalities, here are some of our tutorials you may need to check out:

Hope you find this tutorial helpful. Happy developing!

Looking to Build a Chat App for the Web?

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
Contact Sales
#
Integrate Our SDKs In Just 20 Mins!

Integrate Our Video, Voice & Chat SDKs into any app in < 30 mins

Contact Sales
#
Get Started With Our Self-hosted Chat Solution Today!

Get Full Access To Our Customizable Video, Voice & Chat SDKs!

Request Demo
Request Demo
Need to build a complete chat app? Let our experts help you out.
Hire Our Team