Coder Legion - Recent posts tagged web-socket

GroqStreamChain: Revolutionizing Real-Time AI Chat with WebSocket and Groq

Fri, 18 Jul 2025 12:38:54 +0000

Introduction

In the world of AI-powered chat applications, real-time communication and quick response times are crucial. GroqStreamChain is a project that combines cutting-edge technologies to create a seamless, low-latency chat system. This project leverages WebSocket for instant communication and streams AI responses powered by Groq and LangChain, providing an immersive user experience with real-time feedback.

What is GroqStreamChain?

GroqStreamChain is a real-time chat system designed to facilitate smooth interactions between users and AI. By using WebSocket, this system ensures that the chat messages are delivered instantly, with minimal delay. The chat application streams responses chunk by chunk, which not only reduces latency but also enhances the user experience by providing quick feedback. At its core, GroqStreamChain integrates Groq's powerful LLMs (large language models) and LangChain, an integration tool that connects various language models to applications, ensuring smart and dynamic responses.

Key Features of GroqStreamChain

Real-Time Communication via WebSocket
The system is built around WebSocket, allowing instant and low-latency communication. This helps in reducing any delays in message delivery, which is crucial for an interactive chat experience.
Streaming Responses
Instead of waiting for the full response from the language model, GroqStreamChain streams responses as they are generated. This feature makes the system feel faster by showing partial responses to the user immediately.
Efficient Session Management
Every user gets a unique chat session automatically, ensuring that interactions are personalized and persistent across sessions.
User-Friendly Frontend
The chat application offers a clean, responsive UI that includes typing indicators and message formatting, making the chat experience visually appealing and smooth.
Robust Error Handling
WebSocket disconnections and reconnections are managed with care, ensuring the system continues to function seamlessly even in case of network issues.

Project Structure

GroqStreamChain follows a modular approach, organizing the project into distinct files and folders for efficient management and easy navigation:

server.py: The core FastAPI server responsible for managing WebSocket connections.
config.py: This file handles configuration settings like API keys and model configurations.
models/chat.py: Contains the data models used to handle chat messages and sessions.
services/llm_service.py: Connects with Groq and LangChain to generate AI-powered responses.
Frontend: Contains the HTML, CSS, and JavaScript files that make up the user interface.

How to Get Started

Setting up GroqStreamChain on your local machine is simple:

Clone the repository:
Begin by cloning the repository to your local machine.
Install dependencies:
You can install the necessary libraries using pip or conda. It's recommended to create a separate Conda environment for the project.
Set up environment variables:
In your project directory, create a .env file and add your Groq API key and the model name to connect to the Groq service.
Run the server:
Once you've set everything up, start the server with a simple command and access the chat application through your browser.

Testing the Groq API

The repository also includes a test script to verify that the Groq API is set up correctly. This is useful for ensuring that the connection to the Groq model is working as expected. Running the test script will allow you to see if you receive the expected responses from Groq.

Performance Considerations

GroqStreamChain is designed to handle communication and AI processing efficiently:

Persistent WebSocket connection: By maintaining an open connection, the system ensures fast communication without the overhead of reconnecting.
Real-time response streaming: The system minimizes latency by delivering partial responses while the full response is still being generated.
Optimized server-side processing: The backend server offloads heavy tasks to Groq's powerful model, ensuring minimal processing on the server side and faster responses.

Conclusion

GroqStreamChain brings real-time AI chat capabilities to a new level by using WebSocket for seamless communication and integrating powerful AI responses powered by Groq. Whether you're building customer support bots or AI-driven personal assistants, GroqStreamChain provides the tools needed to create an efficient and responsive chat system. Check out the repository, set it up locally, and explore how this cutting-edge technology can help enhance user interaction in real-time.

For a more detailed walkthrough, feel free to explore the full documentation in the GitHub repository.

Repository link: https://github.com/pr0mila/GroqStreamChain

How to Add Functional Stock Updates: Achieve a Production-Ready and Scalable Solution

Sat, 14 Jun 2025 09:59:49 +0000

To build a production-ready, scalable stock update system with real-time updates in Angular, you’ll want to combine a solid frontend WebSocket setup with a robust backend (like Node.js + Redis + Kafka or a managed service).

Real-Time Stock Updates in Angular

Features:

Live stock prices pushed to frontend
Scalable (1000s of clients)
Low latency
Production-ready (auth, error handling, reconnection, observables)
Efficient resource use (pub/sub pattern)

Architecture

  +---------------------+
  | External Stock API  | <---- Polls every few seconds or via Webhook
  +---------------------+
            |
            v
  +---------------------+
  |    Node.js Server   |  <---- Aggregator, pushes data
  | with Redis Pub/Sub  |
  +---------------------+
            |
     WebSocket (Socket.IO)
            |
    +---------------+
    | Angular Client|
    +---------------+

Tech Stack

Component	Tool	Notes
Frontend	Angular + Socket.IO-client	For real-time updates
Backend	Node.js + Socket.IO	Real-time server
Cache / Pub-Sub	Redis	Push latest stock data to all instances
Optional	Kafka / RabbitMQ	For heavy loads / message queues
External Stock API	Alpha Vantage, IEX Cloud, Finnhub	For stock data

Backend (Node.js + Redis + Socket.IO)

1. Install dependencies

npm install express socket.io redis axios

2. Backend Code (`server.js`)

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const axios = require('axios');
const redis = require('redis');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: { origin: '*' }
});

const redisClient = redis.createClient();
redisClient.connect();

// Poll stock price every 5 seconds
async function fetchAndBroadcastStock() {
  try {
    const response = await axios.get('https://api.example.com/stock/GOOG');
    const stockPrice = response.data.price;

    // Store in Redis
    await redisClient.set('stock:GOOG', stockPrice);

    // Emit to all WebSocket clients
    io.emit('stock:update', { symbol: 'GOOG', price: stockPrice });
  } catch (error) {
    console.error('Error fetching stock price:', error.message);
  }
}

setInterval(fetchAndBroadcastStock, 5000);

// WebSocket connection
io.on('connection', (socket) => {
  console.log('Client connected:', socket.id);

  socket.on('disconnect', () => {
    console.log('Client disconnected:', socket.id);
  });
});

server.listen(3000, () => console.log('Server running on http://localhost:3000'));

Frontend (Angular + Socket.IO-client)

1. Install `socket.io-client`

npm install socket.io-client

2. Socket Service

// socket.service.ts
import { Injectable } from '@angular/core';
import { io, Socket } from 'socket.io-client';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SocketService {
  private socket: Socket;

  constructor() {
    this.socket = io('http://localhost:3000'); // or environment variable
  }

  getStockUpdates(): Observable<any> {
    return new Observable(observer => {
      this.socket.on('stock:update', (data) => {
        observer.next(data);
      });

      return () => this.socket.disconnect();
    });
  }
}

3. Component

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { SocketService } from './socket.service';

@Component({
  selector: 'app-root',
  template: `<div *ngIf="price">GOOG: ${{ price }}</div>`
})
export class AppComponent implements OnInit {
  price: number;

  constructor(private socketService: SocketService) {}

  ngOnInit() {
    this.socketService.getStockUpdates().subscribe(data => {
      this.price = data.price;
    });
  }
}

Production Best Practices

Use environment variables (.env) for API keys and URLs
Rate-limit external API calls
Use Redis as pub/sub if horizontally scaling backend
Enable HTTPS and use secure WebSocket (WSS)
Add authentication for client connections (JWT on handshake)
Auto-reconnect on frontend using Socket.IO’s built-in options
Dockerize the backend for easy deployment
Monitor with tools like Prometheus + Grafana

Optional Enhancements

Use Kafka if you want true event streaming across services
Add historical price chart using D3.js or Chart.js
Support multiple stock symbols (not just GOOG)
Use RxJS Subjects in Angular to create a real-time service layer
Store recent updates in a database (PostgreSQL + TimescaleDB for time series)

Perfect start to add functional stock updates: Achieve a production-ready, scalable solution with functionality, scalability, and maintainability.

How to Build a Dual-LLM Chat Application with Next.js, Python, and WebSocket Streaming

Thu, 27 Feb 2025 18:45:04 +0000

Introduction

In the age of rapid AI advancement, software engineers are frequently tasked with building sophisticated chatbots. This article provides a practical guide to developing a real-time, response-streaming chatbot from scratch using transformer models, autoencoding (BERT family), and autoregressive (GPT family) techniques. We'll learn how to build a chatbot capable of contextual conversations, processing user text and image/PDF uploads for enhanced understanding. We'll utilize Python (aiohttp) and React (Next.js) to deliver a seamless, interactive experience. Let's dive in!

Prerequisite

No prior expertise is strictly necessary, but some foundation in AI, software engineering, Python coding, and frontend development with a framework like React, Svelte, Vue, or Angular will be beneficial. If you're new to aiohttp or Svelte, we highly suggest exploring this previous article series as a helpful primer. Don't worry if you're not an expert (I ain't).

To set up your project, first create a root folder genai-chatbot and then navigate into the backend subdirectory:

```sh
mkdir genai-chatbot && cd genai-chatbot && mkdir backend && cd backend
```

In the backend directory, create a Python virtual environment and install dependencies from requirements.txt:

```sh
python3 -m venv virtualenv && source virtualenv/bin/activate && pip install -r requirements.txt
```

Ensure you create a requirements.txt file in the backend directory with the following content:

```txt
aiohttp
aiodns 
transformers 
torch 
torch-vision
pymupdf
pytesseract
```

For the frontend, navigate to the root directory (genai-chatbot) and use create-next-app to generate a React frontend with TypeScript:

```sh
cd ..
npx create-next-app@latest react-frontend --typescript --eslint --app
```

Follow the prompts from create-next-app.

Source code

Due to restrictions here, refer to the code repository for each file discussed.

github/Sirneij/genai-chatbot

Implementation

Step 1: Theory - Autoregressive vs Autoencoding models

Two primary approaches emerge within the transformer model architecture: autoregressive and autoencoding. Autoregressive models, like those using the decoder component of a transformer, predict the next word (token) in a sequence based solely on the preceding words (a strictly left-to-right approach). This sequential generation method is ideal for tasks like text generation and response streaming. In contrast, autoencoding models (also known as masked language models) leverage the encoder part of the transformer. They operate bidirectionally, considering both preceding and subsequent words in a sentence to understand the context and produce representations. Refer to Hugging Face's model summary for a detailed comparison. Pretraining methodology is a key differentiator: autoregressive models are pretrained to predict the next token, making them naturally suited for text generation, while autoencoding models excel at contextual understanding, making them strong for tasks like question answering based on documents.

In this project, we will practically explore the distinct text generation capabilities of both model types in real-time. We will use microsoft/Phi-3-mini-4k-instruct (autoregressive) and deepset/roberta-base-squad2 (autoencoding) for demonstration, acknowledging resource limitations and focusing on showcasing the core differences.

Step 2: Python asynchronous backend with aiohttp

We'll start with the project structure from Building and Rigorously Testing a WebSocket and HTTP Server. Populate src/app/__init__.py with the following code, noting the key adaptations for our chatbot:

```python
import json
from weakref import WeakSet

from aiohttp import WSCloseCode, web
from aiohttp.web import Request, Response, WebSocketResponse

from src.utils.auto_chat_engine import (
    cleanup_auto_model,
    gpt_question_and_answer,
    prepare_auto_tokenizer_and_model,
)
from src.utils.chat_engine import (
    prepare_qa_tokenizer_and_model,
    squad_question_answering,
)
from src.utils.extract import extract_text_from_file
from src.utils.settings import base_settings

WEBSOCKETS = web.AppKey('websockets', WeakSet[WebSocketResponse])
...

async def extract_text(request: Request) -> Response:
    """Extract text from PDF and image files."""
    data = await request.post()
    files = data.getall('file')
    if not files:
        return web.json_response({'error': 'No files provided'}, status=400)

    extracted_text = []
    for file in files:
        if file.content_type not in ['application/pdf', 'image/jpeg', 'image/png']:
            return web.json_response({'error': 'Invalid file type'}, status=400)

        text = await extract_text_from_file(file.file, file.content_type)
        extracted_text.append(text)

    base_settings.context = '\n'.join(extracted_text)

    return web.json_response({'success': 'Text extracted successfully'})


async def chat_handler(request: Request) -> Response:
    """Handle WebSocket connections."""
    ws = WebSocketResponse()
    await ws.prepare(request)

    request.app[WEBSOCKETS].add(ws)

    async for msg in ws:
        if msg.type == web.WSMsgType.TEXT:
            try:
                data = json.loads(msg.data)
                question_type = data.get('type')
                question = data.get('question', '').strip()
                if not question:
                    await ws.send_str('Error: No question provided.')
                    continue

                if question_type == 'auto':
                    # Stream response token by token.
                    async for token in gpt_question_and_answer(question):
                        await ws.send_json({'answer': token})
                elif question_type == 'masked':
                    # Use squad question answering (non-streamed).
                    answer = await squad_question_answering(question)
                    await ws.send_json({'answer': answer})
                else:
                    await ws.send_str('Error: Unknown question type.')
            except Exception as e:
                await ws.send_str(f'Error processing message: {str(e)}')
        elif msg.type == web.WSMsgType.ERROR:
            request.app[WEBSOCKETS].remove(ws)
            break

    request.app[WEBSOCKETS].remove(ws)

    return ws


def init_app() -> web.Application:
    """Initialize the application."""
    app = web.Application()

    # Add routes
    app.router.add_post('/api/extract', extract_text)
    app.router.add_get('/chat', chat_handler)

    # Add startup/cleanup handlers
    app.on_startup.append(start_background_tasks)
    app.on_shutdown.append(cleanup_app)

    return app
```

This __init__.py file builds upon the structure from the recommended series. The key differences for our chatbot are:

start_background_tasks (on startup) loads AI models, and cleanup_app (on shutdown) unloads them, improving resource handling.
The extract_text handler accepts and processes multiple uploaded files to create a combined context.
We use direct aiohttp WebSocket APIs in chat_handler. We support auto and masked types representing the use of autogenerative and masked language models respectively.

Next, let's delve into the files within the src/utils directory, starting with settings.py.

The settings.py file primarily houses our logger configuration and defines several important constants used in the application, including the system prompt, the default language model (MODEL_NAME), and the question answering model (QA_MODEL_NAME).

Let's examine base.py next. get_device intelligently detects the available hardware and returns the appropriate PyTorch device (CUDA GPU, Apple Metal (MPS), or CPU) along with a descriptive string. get_stopping_strings plays a crucial role in prompt construction for the autoregressive model. It dynamically generates a prompt and a list of stopping strings based on the question type and optional context. The prompt instructs the model to provide a concise answer using Markdown formatting and KaTeX for mathematical expressions. A key challenge with autoregressive models is their tendency to generate repetitive text. To mitigate this, the prompt explicitly instructs the model to conclude its response with the "§" symbol, an uncommon character chosen to signal the end of the answer. The application then programmatically halts text generation upon encountering this symbol. While using the model's native end-of-sequence token would be ideal, I had no luck with it.

The auto_chat_engine.py file is the central component responsible for generating text using the configured language model. It orchestrates the model's loading, manages the text generation process, and handles device-specific optimizations.

prepare_auto_tokenizer_and_model initializes the tokenizer and model. To avoid redundant or repetitive loading, we used global variables and adapted the loading process based on the available device (CPU, MPS, CUDA).

torch.quantization.quantize_dynamic is a nifty way to quantize the model so that it will run faster and require lower memory. If your machine supports cuda, you will need to add your block in the code.

cleanup_auto_model primarily releases the model and tokenizer from memory. This is particularly important on memory-constrained devices like those with Apple Silicon (MPS), where memory leaks can quickly degrade performance.

top_k_top_p_filtering implements two common techniques for controlling the diversity and quality of generated text. Top-k filtering limits the model's choices to the k most likely tokens, while top-p (nucleus) sampling considers the smallest set of tokens whose cumulative probability exceeds p. In simple terms, they help to strike a balance between generating creative and coherent text by preventing the model from generating nonsensical or irrelevant tokens.

The stream_chat_response function is the heart of our real-time chatbot's text generation. It takes a prompt, the model, and configurations to generate streaming text output. For performance, within the generation loop, we:

Optimize Device Usage: Move model parameters to the active device for faster access.
Disable Gradients: Use torch.no_grad() to skip unnecessary gradient calculations during inference.
Enable Auto-Precision: Utilize torch.autocast for faster, mixed-precision operations.

The generation process automatically stops when it encounters our stopping character (code lines 151-152). To ensure smooth streaming, the function also briefly releases memory between tokens. Finally, after generating the complete response, stream_chat_response yields [END] to signal to the frontend that the stream is complete.

gpt_question_and_answer serves as a high-level interface for generating answers to questions. It retrieves the appropriate prompt and stopping strings using get_stopping_strings and then calls stream_chat_response to generate the text. You can modify the parameters here to your taste.

Finally, let's examine the chat_engine.py file. This module leverages pre-trained BERT-based models for extracting answers from a given context. prepare_qa_tokenizer_and_model initializes the question-answering pipeline. The primary motivation behind using a global QA_PIPELINE, as previously stated, is to avoid repeatedly loading the model, which is a resource-intensive operation. In squad_question_answering, a key design decision here is the enforcement of a context. BERT-based models, while powerful, generally perform best when given a specific context to ground their answers. To prevent blocking the main thread, the actual question-answering process is offloaded to a separate asynchronous thread using asyncio.to_thread.

Step 3: Building a React Frontend with Next.js and Tailwind CSS

While our server backend is functional and can be interacted with via command-line tools like wscat (using a command such as wscat -c ws://localhost:PORT/chat followed by a prompt like {"type": "auto", "question": "Write Python code for Fibonacci sequence"}), this approach is not user-friendly. To make our AI chatbot accessible to a wider audience, including those unfamiliar with the terminal, we need a graphical user interface. We'll leverage Next.js, a React framework known for its performance and developer experience, along with Tailwind CSS for styling.

Our frontend application consists of a single page with a few key components. Let's start by examining react-frontend/src/app/layout.tsx

This layout.tsx file defines the root layout of our Next.js application. It's largely based on the default code generated by create-next-app and enhanced with Tailwind CSS integration. We've also integrated KaTeX for rendering mathematical expressions (remember to install the katex package and its TypeScript definitions, as well as marked.js for Markdown processing). The ThemeSwitcher component, responsible for toggling between light and dark themes, is also included.

For Svelte developers, React's useEffect hook serves a similar purpose to Svelte 5's $effect block. Both allow you to run code in response to changes (in useEffect you need to list the dependencies, you don't need that in Svelte), and critically, both provide a safe context for interacting with HTML elements.

Now is the turn is react-frontend/src/app/page.tsx.

This file represents the main page component of our chat application, housing the core logic for message handling and UI rendering. The Home component manages the chat interface, including displaying messages, handling user input, and communicating with the backend. The handleSend function adds a user message and a loading message to the state, while handleBotMessage updates the UI with the bot's responses as they stream in.

The custom useWebSocket hook encapsulates all the WebSocket logic, including connection management, message handling, and error handling.

handleSend function adds a temporary "loading" message to the chat interface. This is a simple but effective UI trick to provide immediate feedback to the user while waiting for the AI bot's response. Without this, the user might perceive a delay or lack of responsiveness which is unwanted. handleBotMessage function is designed to handle the streaming responses from the AI bot. It efficiently updates the chat interface by appending new content to the last bot message. The isComplete flag, triggered by the "[END]" signal from the backend, ensures that the loading indicator is removed when the bot finishes generating its response. Why useCallback in handleBotMessage? Its primary reason is to prevent unnecessary re-renders of components that depend on these functions and it does that by memoizing them so that they only change when their dependencies change.

To wrap up, let's look at the react-frontend/src/app/ui/chat/ChatContainer.tsx and react-frontend/src/app/ui/chat/ChatInput.tsx.

The ChatContainer component renders the list of ChatMessage components. It's a straightforward component that iterates over the messages and displays each one.

The ChatMessage component is responsible for rendering individual chat messages. The key feature of this component is its use of marked.js to render Markdown content, with extensions for syntax highlighting (using highlight.js) and math rendering (using KaTeX). The component also includes logic to display a "thinking" animation while the bot is generating a response.

Lastly, let's look at react-frontend/src/app/ui/chat/ChatInput.tsx.

It provides the user interface for entering and sending messages. It includes a text input, controls for toggling "Masked" and "Auto" modes, and a file upload button (you must select the masked mode to upload). The component was inspired by X's Grok 3, .

An important to note is that in handleFileUpload, I used a NextJS action (uploadFiles) to communicate with the server for files upload.

The key reason for using a server action is to avoid CORS errors such as Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at .... By executing the upload logic on the server, we bypass the browser's same-origin policy and can communicate with the backend API without requiring CORS configuration.

I am sorry for the long article. I didn't want to split so I can be forced to just finish it at a go. There are still a couple of cleanups to do but I will leave those to you. Bye for now.

Outro

Enjoyed this article? I'm a Software Engineer, Technical Writer, and Technical Support Engineer actively seeking new opportunities, particularly in areas related to web security, finance, healthcare, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn and X. I am also an [email](mailto:Emails are not allowed) away.

If you found this article valuable, consider sharing it with your network to help spread the knowledge!

Building the Backend of Chatty - A Real-Time MERN WebSocket Chat App

Fri, 21 Feb 2025 10:19:08 +0000

Chatty is a real-time chat application built using the MERN stack and WebSockets to enable seamless and instant communication. A strong backend is essential for ensuring real-time messaging, authentication, and database management, creating a reliable and scalable chat experience.

In this blog, I’ll cover:

✅ Setting up WebSockets with socket.io for real-time updates
✅ JWT authentication for secure user sessions
✅ Storing messagesvefficiently in MongoDB

This is only an overview of the code; for the complete implementation, check out the GitHub repo linked at the end!

1. Setting Up the Backend

The backend is built using Node.js & Express.js. To get started, install the necessary dependencies:

npm init -y
npm install express mongoose dotenv socket.io jsonwebtoken bcryptjs cors

Initializing the server:

import express from "express"; import http from "http"; import { Server } from "socket.io"; import mongoose from "mongoose"; import dotenv from "dotenv"; import cors from "cors"; import authRoutes from "./routes/authRoutes.js"; import chatRoutes from "./routes/chatRoutes.js"; dotenv.config(); const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: "*" } }); app.use(express.json()); app.use(cors()); app.use("/api/auth", authRoutes); app.use("/api/chat", chatRoutes); server.listen(5000, () => console.log("Server running on port 5000"));

2. Implementing WebSocket for Real-Time Messaging

WebSockets allow for bi-directional real-time communication, ensuring that messages are instantly delivered to all connected users.

`io.on("connection", (socket) => {

console.log("User connected:", socket.id);
socket.on("sendMessage", (messageData) => {
    io.emit("receiveMessage", messageData); // Broadcast message to all clients
});
socket.on("disconnect", () => {
    console.log("User disconnected");
});

}); `

3. Implementing JWT Authentication

To ensure user security, we implement JWT-based authentication for login and protected routes.

User Model (models/User.js)

`import mongoose from "mongoose";
import bcrypt from "bcryptjs";
const UserSchema = new mongoose.Schema({

username: { type: String, required: true, unique: true },
password: { type: String, required: true }

});
UserSchema.pre("save", async function (next) {

if (!this.isModified("password")) return next();
this.password = await bcrypt.hash(this.password, 10);
next();

});
export default mongoose.model("User", UserSchema);
`

Auth Controllers (controllers/authController.js)

`import jwt from "jsonwebtoken";
import bcrypt from "bcryptjs";
import User from "../models/User.js";
dotenv.config();
export const registerUser = async (req, res) => {

try {
    const { username, password } = req.body;
    const newUser = new User({ username, password });
    await newUser.save();
    res.status(201).json({ message: "User registered successfully" });
} catch (error) {
    res.status(500).json({ error: error.message });
}

};
export const loginUser = async (req, res) => {

try {
    const { username, password } = req.body;
    const user = await User.findOne({ username });
    if (!user || !await bcrypt.compare(password, user.password)) {
        return res.status(401).json({ message: "Invalid credentials" });
    }
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: "1h" });
    res.json({ token, user });
} catch (error) {
    res.status(500).json({ error: error.message });
}

}; `

4. Storing Messages in MongoDB

Chat messages need to be stored persistently so users can retrieve past conversations.

Message Model (models/Message.js)

`import mongoose from "mongoose";
const MessageSchema = new mongoose.Schema({

sender: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
content: { type: String, required: true },
timestamp: { type: Date, default: Date.now }

});
export default mongoose.model("Message", MessageSchema);`

Message Controller (controllers/chatController.js)

`import Message from "../models/Message.js";
export const saveMessage = async (req, res) => {

try {
    const { sender, content } = req.body;
    const message = new Message({ sender, content });
    await message.save();
    res.status(201).json({ message: "Message saved successfully" });
} catch (error) {
    res.status(500).json({ error: error.message });
}`

Final Thoughts & Contribution

That’s how Chatty’s backend is structured! We covered:

Real-time WebSockets for instant messaging
JWT authentication to enhance security
Efficient message storage in MongoDB

This is only an overview of the code; for the complete implementation, check out the GitHub repo! The full repository contains additional optimizations, error handling, and best practices to ensure the app runs smoothly at scale.

Chatty Repo

Introduction to Chatty - A Real-Time MERN WebSocket Chat App

Thu, 20 Feb 2025 12:01:31 +0000

Communication has evolved significantly over the years, and real-time chat applications have become a necessity in the digital world. Whether for personal conversations, team collaborations, or customer support, users expect instant messaging with zero lag. As a MERN stack developer, I wanted to build a scalable and efficient chat app that delivers a seamless user experience. That’s how Chatty was born! In this blog post, I’ll introduce you to Chatty, its core features, the technology stack behind it, and why WebSockets are a game-changer for real-time applications.

What is Chatty?

Chatty is a real-time chat application built using the MERN stack (MongoDB, Express.js, React, and Node.js) with WebSockets to enable instant, two-way communication. Unlike traditional chat apps that rely on HTTP polling (which can be slow and inefficient), Chatty leverages WebSockets to create a persistent connection, allowing users to send and receive messages in real-time without delays.

Key Features of Chatty:

Instant Messaging: Powered by WebSockets, ensuring fast and real-time
communication .
User Authentication with JWT: Secure login system to protect user data .
Optimized Backend: Efficient handling of connections and message storage.
-Dockerized Deployment: Easily scalable and deployable with Docker containers.

Why Did I Build Chatty?

As a developer, I wanted to tackle some of the biggest challenges in real-time communication:

✅ Latency Issues: Many chat apps experience delays in delivering messages. WebSockets allow a persistent full-duplex connection, ensuring messages are delivered instantly without waiting for a new HTTP request.

✅ Efficient Data Handling: Traditional chat applications send repeated HTTP requests (polling) to check for new messages. This approach is resource-intensive and inefficient. With WebSockets, a single connection remains open, drastically reducing overhead.

✅ Secure Authentication: Handling user authentication securely is crucial. I implemented JWT-based authentication, ensuring only authorized users can access chat rooms and messages.

✅ Scalability: With Dockerized deployment, Chatty can run in isolated containers, making it easy to scale across multiple servers when user traffic grows.

Building Chatty helped me deepen my understanding of WebSockets, authentication, and containerization while applying best practices for real-world application development.

Tech Stack Behind Chatty

To create a high-performance and scalable real-time chat application, I chose the following technologies:

Frontend: React.js (for an interactive and smooth user experience)

Backend: Node.js & Express.js (handling real-time messaging with WebSockets)

Database: MongoDB (storing user messages, conversations, and profiles)

WebSockets: Socket.io (enabling real-time chat functionality)

Authentication: JWT (ensuring secure login and user validation)

Docker: Containerizing the app for better deployment, scalability, and maintainability

Each of these technologies plays a crucial role in making Chatty efficient, scalable, and user-friendly. By combining React, WebSockets, and Docker, I was able to build a real-time chat app that is both performant and easy to deploy.

Contribute to Chatty

Chatty is open-source, and I’d love for you to check it out! You can find the code on GitHub:

Chatty Github Repo⭐

If you find this project helpful, please give it a star ⭐ on GitHub and feel free to contribute! Whether it's fixing a bug, adding a feature, or improving documentation, all contributions are welcome. Let's build something amazing together!

What’s Next?

This is just the beginning! In the next blog post, I’ll dive into setting up the backend, where we’ll explore how to create a WebSocket server using Node.js, Express, and Socket.io. I’ll walk you through establishing real-time communication, handling events, and storing messages efficiently.

Are you also building a chat app or curious about WebSockets? Let’s connect and discuss your experience!