Read the full tutorial here: >> How to Build a Javascript Chat App [Using CometChat Chat Widget]
How to Build a Javascript Chat App [Using CometChat Chat Widget]:
![Javascript Chat Application [Using CometChat Chat Widget]](https://github.com/screenshots/0.gif)
This demo uses:
- CometChat Widget
- Firebase
- Uuid
- Validator
To run the demo follow these steps:
- Head to CometChat Pro and create an account
- From the dashboard, add a new app called "chat-widget"
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
- Also copy the REST_API_KEY from the API & Auth Key tab.
- Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
- Download the repository here or by running
git clone https://github.com/hieptl/javascript-chat-app.gitand open it in a code editor. - Head to Firebase and create a new project
- Create a file called config.js in the ”js” folder of your project.
- Import and inject your secret keys in the config.js file containing your CometChat and Firebase in this manner.
const config = {
apiKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
authDomain: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
databaseURL: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
projectId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
storageBucket: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
messagingSenderId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
appId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
measurementId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
CometChatAppId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
CometChatRegion: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
CometChatAuthKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
CometChatAPIKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
CometChatWidgetId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
};- Make sure to include this file in your gitIgnore file from being exposed online.
- The application is using HTML, CSS, Javascript. For this reason, you need to have a simple HTTP server to serve our application. In this case, you will use http-server, you can install the http-server by running the following statement.
npm install -g http-server- After installing the http-server package, you just need to “cd” to your project’s directory and run “http-server .”
Questions about running the demo? Open an issue. We're here to help ✌️