Building a Mobile-Friendly WebSocket-Based Real-Time Web Chat Application

Overview

• Goal: Create a real-time chat application that is mobile-friendly using WebSockets. Deploy to AWS for global access.
• Technologies: TypeScript, Node.js, AWS (API Gateway, Lambda, DynamoDB, S3), React.js, Tailwind CSS, Serverless Framework.

Requirements

• Visual Studio Code IDE
• Node.js installed
• AWS account with CLI configured
• Serverless Framework installed globally via npm
• Optionally: Command-line WebSocket client for testing (e.g., websocat)

Infrastructure Overview

Front-End

• Hosted on AWS S3 as a static webpage.
• Implemented with React.js and styled using Tailwind CSS.

Back-End

• Uses API Gateway WebSocket events pointing to a Lambda function.
• Lambda handles WebSocket events: connect, disconnect, getClients, sendMessage, getMessages.
• DynamoDB tables: clients (real-time connected users) and messages (conversation history).

WebSocket Events

1. Connect: When a new client connects, a new document is created in the clients table with connection ID and nickname.
2. Disconnect: On disconnection, the client document is deleted from the clients table.
3. GetClients: Custom event to fetch and send the list of currently connected users to a client.
4. SendMessage: Allows one user to send a message to another user.
5. GetMessages: Fetches chat history between two users.

Lambda Handle Function and Serverless.yaml

• Defined WebSocket event routes in serverless.yaml.
• Lambda configuration includes permission to access DynamoDB tables.
• Environment variables: WebSocket API Gateway endpoint for sending messages back to clients.

Implementing the Back-End

Set Up Environment and Dependencies

• Initialize a new serverless project using a specified template with TypeScript.
• Install all necessary npm packages.

Handlers and DynamoDB Operations

1. Handle Connect: Stores user's connection ID and nickname in DynamoDB.
2. Handle Disconnect: Removes the user's record from DynamoDB on disconnection.
3. Handle GetClients: Fetches the list of connected users from DynamoDB and sends it back to the client.
4. Notify Clients: Called on connect/disconnect to update all clients about connected users.
5. Handle SendMessage: Adds a message to the messages table and sends it to the recipient if connected.
6. Handle GetMessages: Fetches the chat history between two users and sends it back to the requesting client.

Testing the Back-End

• Deploying and testing WebSocket endpoints using CLI tools (websocat) to ensure proper functionality.

Front-End Implementation

Setting Up React with Tailwind CSS

• Create a new React project using the Tailwind CSS template.
• Configure Tailwind in the project.
• Basic structure includes a login screen and a chat interface.

React Components and State Management

1. Welcome Component: Input for nickname before entering the chat.
2. Sidebar Component: Lists connected users.
3. Conversation Component: Displays chat history and input for sending messages.

• Use React hooks (useState, useEffect, useRef) to manage state and WebSocket connections.

WebSocket Connections in React

• WebSocket connection established and managed using refs and state.
• Handlers for onopen, onmessage, onsend events to interact with the back-end.
• Real-time updates for connected users and messages.

Styling and Enhancements

• Used Tailwind CSS for a responsive and clean UI.
• Grouped messages by sender for better UI/UX.
• Added smooth scrolling and persistent storage of nickname and last target nickname in the local storage.

Deployment to AWS S3

• Build React project for production.
• Create and configure S3 bucket with public read access.
• Sync build folder to S3 bucket and enable static website hosting.

Conclusion

• Successfully implemented and deployed a real-time chat application using modern web technologies and AWS serverless infrastructure.
• Final test confirmed interactive chat room with multiple users connected and exchanging messages in real-time.