ForFans: Live Chat
Tools: HTML + CSS + JavaScript + Socket.io + Express
Role: Full-Stack Developer
This exciting project is a live chat room application designed specifically for fans.
The application allows users to create a unique username and choose from three fictional groups: Nexo, Street Kidz, or The Visions. Once a user selects a chat room, they will have access to interact with other users who have also joined that particular room.
This feature allows for a more personalized experience and provides users with the opportunity to engage in conversations with their fandom and build a sense of community around their shared passion.
Developing Process
Socket.io
Socket.IO is a tool that allows the communication between the client and the server to send real-time data to connected users.
Express
Express was the Node.js web application framework used for building the back end of this app.
Step 1: The user enters the chat room and writes a message.
Step 2: The message is sent by the JavaScript client-side code to the Socket.IO library, which then sends the message to the Express server running on the backend.
Step 3: The server processes the message and then emits it to all the connected clients using Socket.IO.
Step 4: The clients receive the message(s) and it’s displayed on the chat interface.
JavaScript features
Vanilla JavaScript was used to display the last message sent on the screen and to manage the addition and removal of users from the sidebar array that displays all connected users.
However, since this is a fan community, it was also important to differentiate the chat rooms by customizing the appearance of the chat interface. To achieve this, I implemented code that changes the background color, text color, and other relevant visual elements of the chat interface based on the room that the user has selected.