In this tutorial, I will show you how to create a simple web-based chat app using pre-built chat SDKs.
The web chat app we will be building today will be quite simple. It will include the functionality to send and receive messages.
What you’ll learn?
Moving ahead, you will get to know how to:
- Download the SDKs for your Web Chat App
- Integrate them into your Web Chat App
- Start the SDK to function on your App
- Create a Web Chat Client
- Connect the Client to the Server
- Add the message transfer and reception capabilities
You can build your web chat app in any of these 4 programming languages – JavaScript, React, React Native and Angular. In this article, I have provided the codes of all the 4 languages so that you may choose the language of your choice to build your app.
Technology and Tools Used
- Build Purpose: Chat App for Web browsers
- Development Environment: Plain Text editor
- Programming Language: JavaScript React / React Native / Angular.
- Browser Support: Edge (13 or higher), Chrome (16 or higher), Firefox (11 or higher) and Safari (7 or higher)
- Development Environment: Plain Text Editor
- Web Chat SDKs: MirrorFly
6 Steps to Build a Web-based Chat App
Step 1: Prepare the Components of your Web Chat App
As I mentioned before, I will be using pre-built chat SDKs to build this web chat app. In this step, I will help you with the steps to download the chat components from MirrorFly’s official website and prepare them for integrating into our chat app.
We will start this tutorial by creating a MirrorFly account to download their messaging SDKs.
1.1 Create an Account with MirrorFly
To register as a User,
- Go to MirrorFly’s Official Registration page
- Fill in the basic details including your name and contact details
- Click on Sign Up.
Now, you will receive a verification email to your inbox
- Click on the verification link in the email
Your account will get activated. Now, you will be taken to your Account’s overview page.
1.2 Download Web Chat SDKs
On your account’s overview page,
- Navigate to the ‘Application Info‘ section
- Spot the ‘JavaScript SDKs‘
- Click on the Download button against it
Now, your web chat SDKs will get downloaded on your device.
- Identify the ZIP folder and extract all the files.
These script files are the dependencies for the chat modules that you’ll add into the project in the upcoming steps.
1.3 Acquire the License Key
In the same Account Overview page,
- Copy the License key and note it down.
This License key will be used when the chat server needs to authenticate the SDKs.
Note: This is a trial license key valid for upto 21 days. If you’d like to use it further, you may choose any of MirrorFly’s pricing plans and extend your access.
Once you’ve downloaded the dependencies, you need to start with the integration of these SDKs into your chat app.
The below sections will include the process for 4 programming languages. As instructed earlier, choose the one of your preferred languages.
2.1 Chat SDK Integration with React
- Launch your index.html in your webclient folder
- Include the index.js and socket.io.js in the script file
index.js – consists of all javascript files and is used to import and export the files and directories in your app when needed by other modules.
socket.io – this is your project’s library built with Javascripts. The function of this library is used to forge bi-directional communication between the client and server
<script src=”./index.js”></script>
<script src=”./socket.io.js”></script>
- Next, add the SDK object in your application
- Once the SDK is successfully imported into the application, you may proceed with the usage of your preferred programming language.
2.2 Chat SDK Integration with React
- As followed above, include the script file into your index.html
<script src=”./index.js”></script>
<script src=”./socket.io.js”></script>
- Now, you need to create a new file SDK.js
- Then, paste the below code
const SDK = window.SDK;
export default SDK;
- Next, import the SDK folder into your web chat app
import SDK from “./SDK”;
2.3 Chat SDK Integration with React Native
To integrate the SDKs using React Native,
- Install the below mentioned peer dependencies
- react-native
- @react-native-async-storage/async-storage
- react-native-get-random-values (above version 1.7.1)
- Create a new folder in your project
- From the dist folder, copy all the extracted files
- Paste them into the folder
- Create a SDK.js file
- Export the SDK objects in your project
- Next, using the below code, import the SDKs
import ‘./index’;
const SDK = window.SDK;
export default SDK;
2.4 Chat SDK Integration with Angular
- Create a new folder within your Project’s root folder
- Copy the extracted files from the SDK folder and paste them into it
- Open angular.json
- Navigate to build> options > scripts
- Add the relative file paths of the imported SDK files
- Above @Component decorator, add the below code
declare var SDK: any;
- In the ngOnInit method, add the SDKs
- Initialize the SDK in angular method
Step 3: Initialize the Web Chat SDK
Once you’ve integrated the SDK, you need to prepare the data needed to initialize the Chat SDK.
- In the below code, paste the License Key you acquired in Step 1 in the License key param
- Pass the necessary data using the below initializeObj method
const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);
- Next your need to add the sandbox details in the connectionListener{} function as mentioned 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);
The example of your response will look as follows:
{
“statusCode”: 200,
“message”: “Success”
}
Step 4: Build Back End Chat Client
After the integration and initialization of your web chat SDK, you need to register a user in the backend to create a web chat client.
- Once your register a random user at the back end, you will get a username and password for authentication
await SDK.register(`USER_IDENTIFIER`);
- The sample of your response will look as follows
{
statusCode: 200,
message: “Success”,
data: {
username: “123456789”,
password: “987654321”
}
}
Step 5: Connect to Back End (Chat Server)
Your web chat app will be hosted by MirrorFly’s chat server. To establish a connection between the chat SDKs and the server, you need to use the credentials created in Step 1.
- Once you have created a successful connection between the chat client and the server, you will get a message ‘statusCode 200’
- Otherwise, an execution error will occur
await SDK.connect(`USERNAME`, `PASSWORD`);
Step 6: Send & Receive Message From Your Web Chat App
When the server connection to the chat SDKs have been successfully established, you may now add the message send and receive capabilities to your web chat app.
6.1 Send a Message from Your Web Chat App
- Use the below SDK.sendTextMessage method to send messages from your chat app
await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`);
6.2 Receive Message on Your Web Chat App
- Add the below lines to the function messageListener(response) to make your app receive text messages.
function messageListener(response) {
console.log(“Message Listener”, response);
}
6.3 Improve Your Web Chat App Features
Having come to this part of the tutorial, you now have a web chat app that can send and receive messages. However, if you are interested in adding more features, the SDKs from MirrorFly are here to explore and implement:
- Translate Messages
- Profile Details of Users
- Recent Chat
- Media Messages
- Block List
Conclusion
Congratulations! You’ve now learnt the complete process of building a fully-functional chat app for web browsers.
To give a quick recap, you came across the steps to acquire chat SDK components from a third-party provider and integrated them into your web chat app. Next, you learnt how to connect the chat client and server and make your app send and receive messages. Finally, you were introduced to the many features that can be added to your chat app.
Yes, you did it yourself. If you’d like to create many other interesting apps with me, post in a comment. I’ll get back with interesting insights you prefer to learn. Until then I bid my bye wishing you the best. Happy Developing!
