https://github.com/mobasirsarkar/chatservice
A real-time multi-server chat application built with Go, NATS, WebSockets, and React (Vite). Supports cross-server communication, room-based messaging, and persistent chat history. Designed to showcase distributed systems, WebSocket handling, and scalable backend architecture
https://github.com/mobasirsarkar/chatservice
golang multi-server nats react server websockets
Last synced: 6 months ago
JSON representation
A real-time multi-server chat application built with Go, NATS, WebSockets, and React (Vite). Supports cross-server communication, room-based messaging, and persistent chat history. Designed to showcase distributed systems, WebSocket handling, and scalable backend architecture
- Host: GitHub
- URL: https://github.com/mobasirsarkar/chatservice
- Owner: MobasirSarkar
- Created: 2025-08-11T13:48:07.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-11T14:32:55.000Z (6 months ago)
- Last Synced: 2025-08-11T16:09:52.819Z (6 months ago)
- Topics: golang, multi-server, nats, react, server, websockets
- Language: TypeScript
- Homepage:
- Size: 7.98 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Multi-Server Chat Application (Go + React + WebSocket + NATS)
A real-time chat system built with **Go** (backend) and **React** (frontend), powered by **WebSockets** for instant communication and **NATS** for multi-server message broadcasting.
This project demonstrates:
- Multi-server WebSocket chat with NATS as the message bus
- Custom React hooks for managing chat connections
- Graceful server shutdown handling in Go
- Modular, production-ready architecture
---
## 📺 Demo Video
https://github.com/user-attachments/assets/0b874bba-29f1-4808-bfe1-59a024781436
## 🛠 Tech Stack
### Backend
- **Go** – High performance server
- **NATS** – Lightweight messaging system for multi-server pub/sub
- **WebSockets** – Real-time bidirectional communication
- Graceful shutdown handling
### Frontend
- **React + TypeScript**
- **@tanstack/react-router**
- **Custom Hooks** (`useChatSocket`)
- Tailwind CSS styling
---
## 📂 Project Structure
```
server/
├── main.go # Server entrypoint
├── internal/
│ ├── server/ # HTTP + WebSocket handling
│ └── nats/ # NATS connection wrapper
frontend/
├── src/
│ ├── hooks/ # useChatSocket.ts
│ ├── routes/ # /chat route
│ └── components/
```
---
## 🚦 Getting Started
### 1️⃣ Run NATS
```bash
docker run -p 4222:4222 nats
```
### 2️⃣ Start Multiple Servers
```bash
cd server
go run main.go server1 # :8080
go run main.go server2 # :8081
go run main.go server3 # :8082
```
### 3️⃣ Start the Frontend
```bash
cd frontend
npm install
npm run dev
```
### 4️⃣ Connect Clients
Example WebSocket URLs:
```
ws://localhost:8080/ws?token=user:alice
ws://localhost:8081/ws?token=user:bob
ws://localhost:8082/ws?token=user:charlie
```
---
## ✨ Features
- **Multi-server chat**: Join from any server and message broadcasts to all.
- **Room support**: Currently defaults to `general`, but can be extended.
- **Persistent messages**: Uses `localStorage` to keep messages across reloads.
- **Automatic reconnect**: Gracefully handles page refresh or network hiccups.
- **Custom React hook**: Encapsulates WebSocket logic (`useChatSocket`).
---
## 📌 Example
### Sending a message:
```json
{
"action": "message",
"room": "general",
"type": "chat",
"payload": {
"text": "Hello from Alice!",
"user": "alice"
},
"client_id": "client-123456789"
}
```
---
## 💡 Notes
- For a production-grade system, use **server-side message history** (database) and replay on reconnect.
- Authentication here is **demo-only** via `token=user:name` — not secure for production.