App and web development have come a long way over the last few years. We use a lot of chat apps every day, including Facebook, Messenger, WhatsApp, Snapchat, and so on. One of the most widely used features is live chat. There are many providers that will help us to create chat applications with minimal effort, for example, Twilio, CometChat, etc.
However, Twilio has announced “Programmable Chat End of Life Notice”. For this reason, we need to know how to migrate data from Twilio to another platform. In this tutorial, we will migrate the data from Twilio Programmable Chat to CometChat.
CometChat’s in-app communication platform delivers a scalable, secure, and easy-to-use solution that drives meaningful user-to-user engagement for your growing business. CometChat can work well with multiple platforms including React.js React Native, Angular, Vue.js, Android, IOS, and so on.
Follow along the steps to migrate from Twilio to CometChat that will allow us to migrate the data from Twilio to CometChat.
Prerequisites
To follow this guide, you must have a degree of understanding of the general use of Node.js. This will help you to improve your understanding of this guide.
What is Twilio’s EOL Notice?
According to Twilio official page, the Twilio team intends to sunset the Programmable Chat API on July 25, 2022 to focus on the next generation of chat, the Twilio Conversations API. Twilio Conversations is a unified API for cross-channel group messaging and includes support for chat, WhatsApp, SMS. While you will need to update your application code, most functionality will remain the same. Additionally, your existing Channels in Programmable Chat will migrate to Twilio Conversations and all of your Channels are visible in Conversations.
The Chat API will continue to work within Flex applications beyond this date.
The Twilio team is sincerely sorry for any disruption this may cause and has prepared this Migration Guide to assist with the transition to the Conversations API before July 25, 2022.
Why Switch from Twilio to CometChat?
As mentioned above, Twilio is providing a Programmable Chat migration guide to move to the Twilio Conversations API. We need to switch from Twilio to CometChat for the below reasons:
Twilio suggests migrating from its Programmable Chat product to its Conversations API. However, Conversation API is a way to create multi-channel messaging by calling APIs. For this reason, it seems that Twilio would like to focus on multi-channel communication instead of in-app chat experience.
its UI Kit is not really powerful and does not have many critical features including reactions, replies, and more.
Twilio Vs. CometChat?
Twilio
Create the exact solution you need to engage customers at every step of their journey. Twilio is a single platform with flexible APIs for any channel, built-in intelligence, and global infrastructure to support you at scale.
Twilio is providing many services such as messaging (SMS, WhatsApp, Chat), Programmable Voice, Video, Twilio Live, Email.
Twilio also has its SDKs and APIs.
Its UI Kit is not really powerful and does not have many critical features including reactions, replies, and more.
CometChat
Providing in-app chat.
CometChat’s in-app communication platform delivers a scalable, secure, and easy-to-use solution that drives meaningful user-to-user engagement for your growing business. CometChat can work well with multiple platforms such as React.js, React Native, Angular, Vue.js, Android (Java, Kotlin), IOS (Swift), and so on.
Using CometChat you can build multiple kinds of applications with minimal effort, for example, dating apps, social communities, edu-techs, live streaming and events, market place and on-demand.
Quickly add one-on-one and group text chat in your app with all the bells and whistles like reading receipts, media sharing, and more. And supercharge with extensions like email notifications and more.
There are three ways to implement CometChat: Chat Widget, UI Kit, and SDKs & APIs.
CometChat dashboard is easy to use, and it is easy to configure your UI, extensions, and so on.
*Note: Before moving on with this tutorial, please make sure that you had a Twilio account and can access its dashboard.
Configuring CometChat
Head to CometChat Dashboard and create an account.
Register a new CometChat account if you do not have one
After registering a new account, you need to the log in to the CometChat dashboard.
Log in to the CometChat Dashboard with your new account
From the dashboard, add a new app called "e2e-encrypted-chat-app".
Create a new CometChat app - Step 1
Create a new CometChat app - Step 2
Select this newly added app from the list.
Select your created app
From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
Copy the the APP_ID, REGION, and AUTH_KEY
Navigate to the Users tab, and delete all the default users (very important).
Navigate to Users tab and delete all the default users
Navigate to the Groups tab and delete all the default groups (very important).
Navigate to Group tab and delete all the default groups
Running the Twilio Sample App
We would like to know how to migrate from Twilio Programmable Chat to the CometChat platform. We need to have a Twilio app first and then we will try to migrate its data to CometChat. Hence, we need to run the Twilio Sample App. To run the Twilio sample app, please follow the below steps:
Step 1: Clone the repository from here.
Step 2: Follow the instructions in the README.md file.
After setting up successfully, your UI should look like this.
Twilio Sample App - UI
Note: The red areas contain my secret keys. That’s why I need to hide them in the image.
Please click on the “Chat” button on the UI, we will be redirected to the chat page. On that page, the sample application will create a default channel called “General”. In CometChat terms, the channel could be understood as “group”.
Click on the “Chat” button to go to the “Chat” page
On the chat page, we will see that a random user is created for demo purposes and the general channel is created for the first time. We can go to the Twilio dashboard to see the created channel. You can see the below images for more information.
The Chat Page
The general channel is created after running the application for the first time
How to Make the Migration?
We need to create a Webhook. A webhook is a way for an app to provide other applications with real-time information. Using webhook, we can get the data immediately instead of fetching data frequently from the server. The only disadvantage in using webhook is the difficulty of setting up. However, please do not worry about it, this tutorial will explain how to create a webhook and how to attach that webhook to the Twilio dashboard. By specifying a webhook to the Twilio application, we can get the events from the Twilio application in real-time and then migrate the data to the CometChat platform.
To make the migration, please follow the below steps:
Step 1: Make sure you have Node.js installed on your computer.
Step 2: Create a new folder call twilio-webhook.
Step 3: Open your terminal and change the directory to twilio-webhook folder.
Step 4: Run npm init to create a new Node.js project.
Step 5: After creating the Node.js project successfully, please run the following statement to install the dependencies.
Step 6: Inside the project folder, create the .env file. The .env file is used to store your environment variables. This file should be included in the .gitignore file. It means that this file should not be visible inside your repository.
*Note: you need to get the COMETCHAT_APP_ID, COMETCHAT_APP_REGION, COMETCHAT_AUTH_KEY, COMETCHAT_API_KEY from the CometChat dashboard. GENERAL_GROUP_GUID is the id of your created general group in the CometChat.
Step 7: Create the .gitignore file. You can get the content of the .gitignore file from here.
Step 8: Inside the root folder of your project, create the index.js file. The full content of the index.js file can be found here. However, the functions, which are created in that file, will be explained in detail. Please follow the below steps for more information.
Step 9: Add the following content to your index.js file.
In this case, we are using the Express framework to create the server. On the other hand, we also create /webhook/cometchat API endpoint, this API endpoint will be attached to the Twilio dashboard, we will talk about it in the below steps.
Whenever there is an event from Twilio, that event will be sent to the webhook, and we can access its content via req.body. In this case, we are handling two events - onMemberAdd, onMessageSend.
After receiving the events from Twilio, we need to call the CometChat REST APIs. To do that, we use the request library. On the other hand, we would like to use async/await in our code. That’s why we create the doRequest function to return the response as a promise.
As you can see from the above code snippet, we call two functions - createUser if the event type if onMemberAdded and sendMessage if the event type is onMessageSent. We will declare both of them in the below steps.
Step 10: Declare the addNewMember function.
In this case, we are calling the CometChat REST APIs to migrate data after receiving events from the Twilio application. For more information about CometChat REST APIs, you can refer to this link.
After adding a new member, we will let that member join the general group. For this reason, we need to call the joinGroup function. That function will be declared in the below steps.
Step 11: Declare the joinGroup function.
We also call the CometChat REST API to join the new member to the general group. However, we need to provide some retries, if there are some errors when calling the CometChat APIs , for example, ERR_GUID_NOT_FOUND, ERR_UID_NOT_FOUND.
If we receive the ERR_GUID_NOT_FOUND error, we need to call the createGroup function to create a new group and make the user join that group. Following that, if we receive the ERR_UID_NOT_FOUND error, we call the createUser function and also make the created user join the group. We have created the createUser function in the above step. In the next step, we will create the createGroup function. For more information about the flow, you can refer to the below image.
Flowchart after Receiving the Events from Twilio
Step 12: Define createGroup function.
In the next step, we will create a function called sendMessage to migrate new messages from Twilio to the CometChat platform.
Step 13: Declare sendMessage function.
According to the above Flowchart, we also handle the errors when sending a message such as ERR_GUID_NOT_FOUND, ERR_UID_NOT_FOUND, ERR_NOT_A_MEMBER.
We have created the webhook successfully. However, if we run the code, this would be the webhook URL. Unfortunately, the Twilio dashboard cannot send the events to the localhost. For this reason, we need to find a way to let Twilio access the webhook which is running locally on our computer. To do that, please follow the below steps.
Step 14: To make other applications/services access to the webhook which is running locally on our computer, we need to install ngrok. You can click on the link and follow the instructions to install ngrok on your computer.
Step 15: After installing the ngrok, you run the webhook by running the following statement.
Step 16: Depending on your operating system, please run your ngrok. For example, I am using Mac OS. After running the ngrok, my result will look like this.
Run the ngrok
Step 17: Please copy the ngrok link on your terminal.
Copy the ngrok link on your terminal
Step 18: To attach the created webhook to the Twilio dashboard, please follow the instructions as you can see in the image below.
Attach the created webhook to the Twilio dashboard
If you run the Twilio sample app, the created webhook on your computer and the ngrok at port 8080. You should see the following results.
The user’s data has been migrated
The user data - Twilio dashboard
The user data - CometChat dashboard
The message data has been migrated.
The message data - Twilio dashboard
The message data - CometChat dashboard
CometChat Tutorials
After migrating the data to the CometChat platform, you can feel free to build many kinds of applications with minimal effort such as Edu-techs, dating apps, social communities, marketplace, on-demand, and so on. You can refer to this link to view the list of CometChat tutorials. the below list demonstrates some popular CometChat tutorials.
Conclusion
In conclusion, we have done an amazing job in migrating Twilio Programmable Chat to the CometChat platform. You’ve been introduced to the chemistry behind the migration. You can find the GitHub repository here.
You have seen how to migrate the data such as the group data, user data, and message data. You can feel free to customize the webhook to get more data based on your requirements. I hope you enjoyed this tutorial and that you were able to successfully migrate from Twilio to CometChat. It's time to get busy and build other related applications with the skills you have gotten from this tutorial. You can start building your chat app for free by signing up to the cometchat dashboard here.
About the Author
Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.
Hiep Le
CometChat
