- Frontend (using long-polling only) deployed on Coolify
- Frontend (using websockets) deployed on Coolify
https://sdc.codeyourfuture.io/decomposition/sprints/2/prep/
You must complete and deploy a chat application. You have two weeks to complete this.
- As a user, I can add a message to the chat.
- As a user, when I open the chat I see the messages that have been sent by any user.
- As a user, when someone sends a message, it gets added to what I see.
- It must also support at least one additional feature.
- Learning about deploying multiple pieces of software that interact.
- Designing and implementing working software that users can use.
- Exploring and understanding different ways of sending information between a client and server.
Maximum time in hours: 16
Add as a comment to your copy of this issue:
- A link to the GitHub repository for your chat application frontend and backend
- A link to the deployed frontend on the CYF hosting environment
- A link to the deployed backend on the CYF hosting environment
- Created
POST /chatendpoint in backend - Added message submission form in frontend
- Connected frontend form to backend endpoint
- Display new message in chat after sending
- Created
GET /chatendpoint in backend - Fetch messages on frontend page load
- Display messages in chat area
- Store all messages in backend
- Ensure frontend updates chat display after new message is sent
- Implemented auto-refresh (polling) for live updates
- Added a WebSocket server to the backend, attached to the HTTP server
- Implemented origin checks for WebSocket security
- On new message (via HTTP POST), broadcast to all connected WebSocket clients
- Created a WebSocket client in the frontend
- On page load, fetch initial chat history via HTTP, then connect to WebSocket for real-time updates
- Display incoming messages instantly in the chat UI
- Fallback to long-polling if WebSocket is not connected (using a
wsConnectedflag) - Provided user feedback for connection errors and message status
- Added like/dislike buttons to each message in the frontend UI
- Implemented backend logic to track likes/dislikes per message using Sets of user IDs
- Ensured a user can only like or dislike (not both) per message
- Like/dislike counts are updated live for all users via WebSocket broadcasts
- Backend always sends the count (not the Set) to the frontend for display
- UI updates instantly when a like/dislike is added or changed
- Each message stores
likesanddislikesas Sets of user IDs on the backend. - When a user likes or dislikes a message:
- Their user ID is removed from both Sets.
- Their user ID is added to the appropriate Set.
- The backend always sends the count (
.size) of each Set to the frontend, never the Set itself. - The frontend displays these counts next to each message.
- Backend: Node.js/Express, with in-memory message storage, unique ID and timestamp generation, input sanitization, user identification via cookies, and WebSocket server for real-time updates.
- Frontend: Vanilla JavaScript, fetches all messages on load, then uses WebSocket for real-time updates (with long-polling fallback).
- Security: All user input is sanitized on the backend to prevent XSS attacks. WebSocket connections are origin-checked. User IDs are stored in secure, HTTP-only cookies.
- User Experience: Color-coded messages, sender names, live like/dislike counts, and clear feedback for message status and connection issues.
- Add persistent storage (e.g., a database) for messages and user data.
- Enhance the UI/UX for a better chat experience.
- Add more advanced features (e.g., message editing, deleting, or notifications).
- Add user authentication or profiles.
- Add message search or filtering.
- Install dependencies:
npm install - Start the backend server:
npm start - Open the frontend in your browser (see allowed origins in
ALLOWED_ORIGINS).