Implementation of fully functional Web Chat Application:
This project aimed to enhance knowledge and skills in front-end web development with one of the most popular frameworks, “AngularJS”, and ability to design dynamic and fully functional application with backend system.
Here are some requirements for this application.
The application should be capable of…
- Exchanging messages in real time
- Creating user account and authenticate user
- Creating public chat room where all users can participate
- Creating private chat room where only invited users can participate
- Deleting the room.
- Displaying all users and their online status
- Displaying other users in the selected private room
- Notifying other users in a chat room when one user is typing a message.
To have a better idea of further reading, please try this chat application implemented by Harold Asai. (Optimized for PC)
Application Design overview
User interface consists of following components.
- Main view – Application view. Displays chat rooms, messages and users.
- Sign in modal – Modal that pops up on page load.
- Account modal – Modal that allows user to create new account.
- New room modal – Modal that allows user to create new room.
- Invitation modal – Modal that allows user to invite other users to a private room.
This application uses Google Firebase as it’s authentication & database server. Firebase allows us to setup web application backend with minimal effort and is perfect for prototyping or testing.
In this application, clients directly send API call to Firebase DB to manipulate user informaiton, chat room information and messages. Diagram below is the control flow of this application.
Database of this application consists of three tables. Users, chat rooms and messages.
Other than basic user information, each user has a list of private chat rooms. Main view loads this list and display them in the side bar. In the same way, Main view loads participants list from a chat room entry and display users who are in that private room . Most importantly, Main view filters messages by selected room ID and display them in the center window.
Here is sample entry for each table
Key Challenges and Solutions
Invite other users to a private room
Delete the private room
On a private room deletion, all the private room entries should be removed from the database. First, entry in the privaterooms list in users entry should be removed, and this should be done for all the participant’s entries. I stored participants list of targeted room into an array and wrote the function that remove the targeted room from privateroom list for all users that are in that array.
Notify other users in the room when a user is typing
Here is how I implemented it. I made Main view to trigger function that send the notification message (“xx is typing…”) with the same key to the database every time user inputs or removes a character in the message form. Then, added a function which deletes the same message few seconds after sending it. However, overwriting typing notification message on every typing event is inefficient and might overload database server or network, I modified the code so that new typing notification message is not sent until current message is expired and deleted.
This project often gave me brain-teasers and few sleepless nights. But I’m so happy about the fact that I became really comfortable with database handling as well as programming with AngularJS. As for the next step, I would like to optimize it for mobile device and improve my code as needed.