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!
When you integrate MirrorFly SDKs, you will be able to implement the following features in your web chat app:
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)
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.
In this section, you’ll learn how to integrate Chat SDKs in Javascript, Angular, React and React native.
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.
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.
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";
| 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;
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()
Once the Chat SDK is initialized, you need to register a user in the sandbox/ live mode. You will use the setIsTrialLicenceKey for his step.
const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);
For testing purposes, use the sandbox server details as given below:
function connectionListener(response) {
if (response.status === "CONNECTED") {
console.log("Connection Established");
} else if (response.status === "DISCONNECTED") {
console.log("Disconnected");
}
}
const initializeObj = {
apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
licenseKey: "XXXXXXXXXXXXXXXXX",
isTrialLicenseKey: true,
callbackListeners: {
connectionListener
},
};
await SDK.initializeSDK(initializeObj);
You’ll get a response similar to the below section:
{
"statusCode": 200,
"message": "Success"
}
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`);
Once the server connection is achieved, use the below method to send messages from your web chat app
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);
}
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!
Get Started with MirrorFly SDK's and Improve your overall in-app conversion, engagement, and retention.
Integrate Our Video, Voice & Chat SDKs into any app in < 30 mins
Try it free
Get Full Access To Our Customizable Video, Voice & Chat SDKs!
Contact Sales
