Full Stack2024

Discord-style Chat App

A real-time chat application mimicking Discord architecture, supporting servers, channels, direct messages, and friend systems, built with Vue 3 + Go.

Frontend Source Backend Source Live Demo

Project Overview

This is a real-time chat application modeled after Discord, consisting of a frontend (Vue 3) and backend (Go). It supports complete features including servers (Guilds), channels (Rooms), direct messages (DM), and a specific friend system. It uses WebSocket for real-time communication, MongoDB for data storage, and Redis for caching.

Technical Challenges & Solutions

Backend Architecture

This was my first Golang project. With only PHP experience, I was unfamiliar with Golang's ecosystem and best practices, yet I aimed for a high-performance architecture.

Solution:

I spent significant time understanding and refactoring. Considering that real-world scenarios prioritize balance between maintainability and performance over raw speed, I chose an MVC architecture and used Dependency Injection (DI) to reduce coupling, making code easier to test and maintain.

Member System

Implementing a secure member system for an SPA.

Solution:

Adopted JWT Access/Refresh Token double verification. The refresh token is stored in an httpOnly cookie to prevent XSS attacks. The backend database also stores the refresh token to ensure its validity.

WebSocket Real-time Communication

Needed to implement a high-performance and stable real-time communication system.

Solution:

Used Go's Gorilla WebSocket library to handle connections. Designed Hub, Client, and Room structures to manage connections and message passing:

Hub manages all Clients and Rooms
Client handles individual user connections
Room manages message broadcasting within a chat room

Chat Room Design

Handling different types of chat rooms (Channel vs DM).

Solution:

Although they are different tables in the DB, in the in-memory Room structure, both are just a type of Room. So I used a single Room structure with a Type field to distinguish them.

Frontend Vue State Management

Effectively managing multiple chat rooms, user states, and real-time messages.

Solution:

Used Pinia for global state management to centralize user data, chat lists, and messages, ensuring all components update synchronously.

Architecture

The frontend uses Vue 3 + TypeScript, while the backend adopts Go + Gin framework with a three-layer architecture (Controller → Service → Repository). WebSocket provides real-time communication, MongoDB stores chat records, and Redis handles data caching.

Learnings

Through this project, I deeply learned WebSocket real-time communication technology, mastered Go language details with Gin framework, and Vue 3 Composition API usage. I gained valuable experience especially in handling complex state management and real-time message broadcasting.

Tech Stack

Frontend

Vue 3TypeScriptElement PlusPinia

Backend

GoGinWebSocketJWTRedis

Database

MongoDBRedis