Real-Time Chat Application using Docker

Real-Time Chat Application using Docker and Socket.IO

Name: Devnarayan R
Register Number: 23BCE1109
Course: B.Tech – Computer Science and Engineering

---

Introduction

This project demonstrates how to containerize a real-time chat application using Docker. The app enables multiple users to chat simultaneously through a clean and responsive frontend built with HTML, CSS, and the Socket.IO client, connected to a Node.js + Express backend using WebSockets.

By splitting the system into frontend and backend containers, the project showcases Dockerfiles for service isolation, Nginx for frontend hosting, and Docker Compose for orchestration.

---

Objectives

Part 1 – Frontend

• Develop a responsive and minimal chat UI using HTML, CSS, and Socket.IO client.
• Containerize the frontend using Nginx as the static web server.
• Ensure smooth communication with the backend container.

Part 2 – Backend

• Build a Node.js + Express server with Socket.IO for real-time message transfer.
• Containerize the backend using Node’s official Docker image.
• Test message broadcasting and client connections.

Part 3 – Integration, Security, and Optimization

• Use Docker Compose for multi-container orchestration.
• Secure inter-container communication using Docker networks.
• Optimize image size and resource usage (Alpine base images, production npm install).

---

Container Details and Download Links

Container	Purpose	Base Image	Port
frontend	Serves chat UI via Nginx	nginx:alpine	8080 → 80
backend	Express + Socket.IO server	node:20-alpine	3100 → 3000

Download Links:

• Frontend Dockerfile
• Backend Dockerfile

---

Architecture

Figure: Architecture of Docker-based Chat Application

---

Procedures

Part 1 – Frontend

1. Create index.html with Socket.IO client code and UI styling.
2. Write Dockerfile.frontend using nginx:alpine, copy files to /usr/share/nginx/html.
3. Build and run: docker build -t chat-frontend -f Dockerfile.frontend . then docker run -p 8080:80 chat-frontend.

Part 2 – Backend

1. Implement server.js with Express and Socket.IO events.
2. Create Dockerfile.backend using node:20-alpine, install only production dependencies with npm ci --only=production.
3. Build and run: docker build -t chat-backend -f Dockerfile.backend . then docker run -p 3100:3000 chat-backend.

Part 3 – Integration

1. Create docker-compose.yml with services frontend and backend on network chatnet.
2. Run both: docker-compose up --build. The frontend connects to backend via internal Docker network.

---

Modifications to Base Containers

• The backend Dockerfile creates a non-root user (appuser) and uses USER appuser for improved security.
• Used npm ci --only=production to avoid dev dependencies in production image.
• The frontend Dockerfile replaces the default Nginx config with a custom one serving the single-page app.

---

DockerHub Links

• DockerHub (frontend): https://hub.docker.com/r/devnarayanr/chatapp-frontend-23bce1109
• DockerHub (backend): https://hub.docker.com/r/devnarayanr/chatapp-backend-23bce1109

---

Outcomes and Observations

• Real-time messages successfully broadcasted between multiple clients via Socket.IO.
• Docker Compose provided easy orchestration and network isolation.
• Using Alpine images reduced image size and improved startup times.
• Running backend as non-root (appuser) increases security; seeing whoami return a non-root user is expected.

---

Conclusion

Containerizing the chat app taught practical skills in Docker, Nginx, Socket.IO, and Compose orchestration. The setup is lightweight, secure (non-root user), and easily extendable, such as adding a database container, authentication, or CI/CD integration for deployment.

References

• Docker Documentation – docs.docker.com
• Socket.IO – socket.io
• Node.js – nodejs.org
• Nginx – nginx.org

Report by Devnarayan R