Imagine having an AI assistant that not only knows about web development in general but also understands your specific coding style, knows your project history, and can answer questions in your voice. This isn't science fiction - it's what fine-tuning makes possible today.

In this tutorial, you'll learn how to fine-tune OpenAI's latest GPT-4.1 models and create a production-ready chat application using Next.js 15. I will guide you through the entire process: from preparing your dataset and submitting it for fine-tuning, to building a sleek chat interface that uses your custom model.

I'll show you this process using content from my agency website, mtechzilla.com, as example data. You'll learn how to scrape, clean, and format real-world content for training. Naturally, you'll want to use your own data - whether it's documentation, blog posts, customer support transcripts, or any other text that reflects the knowledge and style you want your AI to have.

This tutorial is for developers who are familiar with React and Node.js but are new to fine-tuning AI models. By the end, you'll have a fully functional, custom AI chat application ready to deploy.

As of September 2025, fine-tuning GPT-5 is not supported yet. This tutorial uses GPT-4.1. When GPT-5 fine-tuning becomes available, you'll mainly need to change the base model name.

Table of Contents:

• Understanding Fine-Tuning

• Prerequisites

• Step 1: Dataset Preparation

• Step 2: Fine-Tuning Submission

• Step 3: Next.js Application Setup

• Step 4: Building the Chat Interface

• Step 5: API Route Integration

• Step 6: Testing Your Application

• Conclusion

Understanding Fine-Tuning

Before we jump into the code, let's explain what fine-tuning really means and when it's the best option for your project.

Fine-tuning means taking a pre-trained language model and training it further with your specific dataset. It's like teaching a smart student about your particular area of expertise and communication style. The model retains its general knowledge but becomes specialised in your field.

This is quite different from other methods of customising AI behavior. Retrieval-Augmented Generation (RAG) involves providing relevant context to the model when a query is made, similar to giving someone reference materials to use while answering questions. Prompt engineering, on the other hand, involves creating smart instructions to direct the model's behavior without any additional training. Fine-tuning, however, results in a model that has deeply learned and internalised your data.

The trade-offs in 2025 are clearer than ever. Fine-tuning requires an upfront investment in data preparation and training costs, but it leads to faster inference, no need for context injection, and a more consistent personality. RAG systems are cheaper to set up and easier to update, but they need vector databases and can have trouble matching nuanced styles. Prompt engineering is free and immediate, but it limits how much customisation you can achieve.

As of September 2025, OpenAI supports supervised fine-tuning for three new models: GPT-4.1, GPT-4.1-mini, and GPT-4.1-nano. Each model has different capabilities and costs. GPT-4.1-nano is the most affordable option, ideal for simpler tasks. GPT-4.1-mini balances performance and cost, while GPT-4.1 offers the highest intelligence for complex, domain-specific applications.

Fine-tuning is best when you need a consistent voice and style, have specialised knowledge not well-covered by the base model, want to reduce delay by removing context injection, or need to ensure specific behaviours without complicated prompts. If your needs involve frequently changing information, simple factual lookups, or only occasional customisation, consider using RAG or prompt engineering instead.

Prerequisites

Before we begin, make sure you have the following tools and accounts set up:

1. Node.js v22+ and npm (check with node --version)

2. Basic JavaScript knowledge for the scripts

3. Familiarity with React and TypeScript for the web app

4. An OpenAI API key with billing enabled (get one at https://platform.openai.com/docs/overview)

5. A code editor

You'll also need some content to train your model on. This could be blog posts, documentation, transcripts, or any text that represents the knowledge and style you want to impart to your AI.

If you get stuck, you can check the GitHub repository for assistance or contact me (I'm happy to help fellow developers).

Repository link: https://github.com/Sharvin26/ai-fine-tuning-project

Step 1: Dataset Preparation

The key to a successful fine-tuning project is having a well-prepared dataset. OpenAI needs training data in JSONL (JSON Lines) format, where each line is a complete JSON object representing a conversation. JSONL is a format where each line is a separate JSON object, which is great for handling large datasets efficiently. It allows for easy streaming and handling of data, making it ideal for machine learning tasks.

The JSONL structure that OpenAI requires for fine-tuning is as follows:

{
   "messages":[
      {
         "role":"system",
         "content":"You are a helpful assistant."
      },
      {
         "role":"user",
         "content":"What is React?"
      },
      {
         "role":"assistant",
         "content":"React is a JavaScript library..."
      }
   ]
}

Each line represents a complete conversation. For fine-tuning to be effective, you need at least 10 examples, though 50-100 typically yields better results.

Let's build a Node.js scraper that extracts content from a website and converts it into the proper format.

First, let's set up our scripts folder structure:

mkdir ai-fine-tuning-project
cd ai-fine-tuning-project
mkdir scripts
cd scripts
npm init -y
npm install cheerio axios dotenv openai
touch scraper.js fine-tune.js .gitignore .env

Open the ai-fine-tuning-project in a code editor and copy the following values into a .env file in the scripts folder.

OPENAI_API_KEY=sk-...your-api-key-here...
OPENAI_ORG_ID=org-...your-org-id...

Update the ENV variables with a valid API Key and Org ID from OpenAI.

1. Generate an API Key using this guide: Where do I find my OpenAI API Key?. Here are the best practices to keep your API Key safe: Best Practices for API Key Safety.

2. You can find your OpenAI Org ID here: OpenAI Organization Settings.

Add the following code to the .gitignore file:

# Environment variables
.env
.env.local
.env.*.local

# Dependencies
node_modules/

# Logs
*.log
logs/

# Cache and temporary files
.cache/
temp/
tmp/

# OS files
.DS_Store
Thumbs.db

# IDE files
.vscode/
.idea/
*.swp
*.swo

Update the scraper script (scraper.js) with the following code:

const cheerio = require("cheerio");
const axios = require("axios");
const fs = require("fs");
const OpenAI = require("openai");
require("dotenv").config();

const config = {
    urls: [
        {
            url: "https://www.mtechzilla.com/",
            contentType: "general",
        },
        {
            url: "https://www.mtechzilla.com/company/about-us",
            contentType: "about",
        },
        {
            url: "https://www.mtechzilla.com/services",
            contentType: "services",
        },
    ],
    openai: {
        apiKey: process.env.OPENAI_API_KEY,
        model: "gpt-5",
        trainingExamples: 50,
    },
    outputFile: "training_data.jsonl",
};

class AIScraper {
    constructor(config) {
        this.urls = config.urls;
        this.openaiConfig = config.openai;
        this.outputFile = config.outputFile;
        this.scrapedContent = [];
        this.trainingData = [];
        this.openai = new OpenAI({
            apiKey: this.openaiConfig.apiKey,
        });
        this.totalCost = 0;
    }

    async fetchPage(url) {
        try {
            const response = await axios.get(url, {
                timeout: 30000,
                headers: {
                    'User-Agent': 'Mozilla/5.0 (compatible; AI-Training-Data-Scraper/1.0)'
                }
            });
            return response.data;
        } catch (error) {
            console.error(`Failed to fetch ${url}: ${error.message}`);
            return null;
        }
    }

    extractContent(html, urlConfig) {
        const $ = cheerio.load(html);

        $('script, style, nav, header, footer').remove();
        $('[class*="cookie"], [class*="popup"], [class*="ad"]').remove();
        $('button, .btn').remove();

        const headings = [];
        $('h1, h2, h3, h4').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 3 && text.length < 200) {
                headings.push(text);
            }
        });

        const paragraphs = [];
        $('p').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 20) {
                paragraphs.push(text);
            }
        });

        const listItems = [];
        $('ul li, ol li').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 5 && text.length < 200) {
                listItems.push(text);
            }
        });

        return {
            url: urlConfig.url,
            contentType: urlConfig.contentType,
            title: $('title').text().trim(),
            metaDescription: $('meta[name="description"]').attr('content') || '',
            headings: headings.slice(0, 10),
            paragraphs: paragraphs.slice(0, 15),
            listItems: listItems.slice(0, 20)
        };
    }

    formatContentForPrompt(content) {
        let formattedContent = `URL: ${content.url}\n`;
        formattedContent += `Content Type: ${content.contentType}\n`;
        formattedContent += `Title: ${content.title}\n\n`;

        if (content.metaDescription) {
            formattedContent += `Description: ${content.metaDescription}\n\n`;
        }

        if (content.headings.length > 0) {
            formattedContent += `Headings:\n${content.headings.map(h => `- ${h}`).join('\n')}\n\n`;
        }

        if (content.paragraphs.length > 0) {
            formattedContent += `Content:\n${content.paragraphs.join('\n\n')}\n\n`;
        }

        if (content.listItems.length > 0) {
            formattedContent += `Features/Services:\n${content.listItems.map(item => `- ${item}`).join('\n')}\n\n`;
        }

        return formattedContent;
    }

    async generateTrainingDataWithAI() {
        const allContent = this.scrapedContent.map(content => 
            this.formatContentForPrompt(content)
        ).join('\n' + '='.repeat(50) + '\n');

        const prompt = `Based on the website content below, generate ${this.openaiConfig.trainingExamples} diverse, natural Q&A pairs for training a customer service chatbot.

Website Content:
${allContent}

Create varied questions a real customer might ask, including:
- Company/business information
- Services or products offered  
- Contact and support questions
- General greetings and conversational questions
- FAQ-style questions

Make questions natural and human-like. Generate accurate answers based ONLY on the provided website content. Keep answers concise but informative.

Return a JSON object with a "training_data" array containing the Q&A pairs.`;

        try {
            const response = await this.openai.chat.completions.create({
                model: this.openaiConfig.model,
                messages: [
                    {
                        role: "system",
                        content: "You are an expert at creating training data for AI chatbots. Always return valid JSON. Output your final JSON response directly without any reasoning or explanation."
                    },
                    {
                        role: "user",
                        content: prompt,
                    },
                ],
                response_format: { 
                    type: "json_schema",
                    json_schema: {
                        name: "training_data_generation",
                        schema: {
                            type: "object",
                            properties: {
                                training_data: {
                                    type: "array",
                                    items: {
                                        type: "object",
                                        properties: {
                                            question: {
                                                type: "string",
                                                description: "A natural question a customer might ask"
                                            },
                                            answer: {
                                                type: "string", 
                                                description: "An accurate answer based on the website content"
                                            }
                                        },
                                        required: ["question", "answer"]
                                    }
                                }
                            },
                            required: ["training_data"]
                        }
                    }
                }
            });

            const generatedContent = response.choices[0].message.content?.trim();

            const actualInputTokens = response.usage.prompt_tokens;
            const actualOutputTokens = response.usage.completion_tokens;
            const actualCost = (actualInputTokens * 1.25 / 1000000) + (actualOutputTokens * 10 / 1000000);
            this.totalCost += actualCost;

            if (!generatedContent) {
                throw new Error("No content generated in response");
            }

            const structuredData = JSON.parse(generatedContent);
            const validTrainingData = [];

            if (structuredData.training_data && Array.isArray(structuredData.training_data)) {
                structuredData.training_data.forEach(item => {
                    if (item.question && item.answer) {
                        validTrainingData.push({
                            messages: [
                                {
                                    role: "system",
                                    content: "You are a helpful assistant. Answer questions accurately based on the website content."
                                },
                                {
                                    role: "user", 
                                    content: item.question
                                },
                                {
                                    role: "assistant",
                                    content: item.answer
                                }
                            ]
                        });
                    }
                });
            }

            this.trainingData = validTrainingData;
            console.log(`Generated ${validTrainingData.length} training examples`);

        } catch (error) {
            console.error(`OpenAI API error: ${error.message}`);
            throw error;
        }
    }

    async scrape() {
        console.log(`Starting scraper for ${this.urls.length} URLs`);

        for (const urlConfig of this.urls) {
            const html = await this.fetchPage(urlConfig.url);

            if (html) {
                const content = this.extractContent(html, urlConfig);
                this.scrapedContent.push(content);
                console.log(`Scraped: ${content.title || urlConfig.url}`);
            }

            await new Promise(resolve => setTimeout(resolve, 1000));
        }

        if (this.scrapedContent.length === 0) {
            throw new Error("No content scraped successfully");
        }

        await this.generateTrainingDataWithAI();

        console.log(`Scraped ${this.scrapedContent.length} pages, generated ${this.trainingData.length} examples`);
        console.log(`Total cost: $${this.totalCost.toFixed(4)}`);
    }

    saveToFile() {
        if (this.trainingData.length === 0) {
            console.error("No training data to save!");
            return;
        }

        const jsonl = this.trainingData
            .map(example => JSON.stringify(example))
            .join('\n');

        fs.writeFileSync(this.outputFile, jsonl);
        console.log(`Saved ${this.trainingData.length} examples to ${this.outputFile}`);
    }
}

async function main() {
    try {
        if (!config.openai.apiKey) {
            console.error("Please set your OpenAI API key in .env file");
            return;
        }

        const scraper = new AIScraper(config);
        await scraper.scrape();
        scraper.saveToFile();

        console.log("Scraping complete!");

    } catch (error) {
        console.error("Error:", error.message);
    }
}

main();

If you used a version of Node.js before 22, you might encounter issues when running the script. The recommended version is v22.18.0.

This code sets up an automated system for web scraping and creating AI-powered training data. It generates training datasets from website content. The script uses Cheerio to parse HTML from given URLs, extracting useful information like headings, paragraphs, and list items while ignoring unnecessary parts like scripts, navigation menus, and ads. After gathering the content, it uses OpenAI's API (configured to use GPT-4.1 with structured JSON output) to intelligently create natural question-and-answer pairs for fine-tuning purposes.

The generated Q&A pairs are formatted into JSONL files according to OpenAI's fine-tuning format. Each entry includes a system message, a user question, and an assistant response. The scraper also has useful features like rate limiting between requests, error handling, and cost tracking based on token usage ($1.25 per million input tokens and $10 per million output tokens). This allows you to keep track of expenses while generating training data.

However, this is a basic script that can be improved based on your website's design, audience, and goals. While it extracts various content sections and creates diverse question-and-answer pairs, you'll need to manually check the output to ensure quality and correct formatting, as OpenAI will reject improperly formatted data. In production environments, this verification process can be automated by updating the script with additional validation logic and quality checks.

Now, let's create our training_data.jsonl file by running our scraper:

node scraper.js

You should see the following output:

Starting scraper for 3 URLs
Scraped: MTechZilla: Custom Software and App Development Company
Scraped: About MTechZilla | Custom Software Development Agency
Scraped: Expert App & Web Development Services | MTechZilla
Generated 50 training examples
Scraped 3 pages, generated 50 examples
Total cost: $0.0632
Saved 50 examples to training_data.jsonl
Scraping complete!

Pro tip: Quality is more important than quantity. Review the generated training_data.jsonl file and refine any examples that don't accurately reflect the content or tone you want your AI to adopt.

Step 2: Fine-Tuning Submission

With our dataset prepared, let's create a script to submit it to OpenAI for fine-tuning. We'll use the GPT-4.1 models and handle the entire process from upload to completion.

Update the fine-tuning script (fine-tune.js):

const OpenAI = require("openai");
const fs = require("fs");
require("dotenv").config();

const CONFIG = {
    // Choose your base model for fine-tuning
    MODEL: "gpt-4.1-nano-2025-04-14", // Options: gpt-4.1-nano-2025-04-14, gpt-4.1-mini-2025-04-14, gpt-4.1-2025-04-14

    // Training file path
    TRAINING_FILE: "training_data.jsonl",

    // Polling interval for job status (in milliseconds)
    POLL_INTERVAL: 30000, // 30 seconds
};

class FineTuningManager {
    constructor() {
        if (!process.env.OPENAI_API_KEY) {
            throw new Error("OPENAI_API_KEY environment variable is required");
        }

        this.openai = new OpenAI({
            apiKey: process.env.OPENAI_API_KEY,
            organization: process.env.OPENAI_ORG_ID,
        });
    }

    // Step 1: Validate training data format
    validateTrainingData() {
        console.log("🔍 Validating training data format...");

        if (!fs.existsSync(CONFIG.TRAINING_FILE)) {
            throw new Error(`Training file not found: ${CONFIG.TRAINING_FILE}`);
        }

        const content = fs.readFileSync(CONFIG.TRAINING_FILE, "utf-8");
        const lines = content.split("\n").filter(line => line.trim());

        if (lines.length < 10) {
            throw new Error(`Need at least 10 examples. Found: ${lines.length}`);
        }

        let validExamples = 0;
        lines.forEach((line, index) => {
            try {
                const data = JSON.parse(line);

                // Validate JSONL structure as per OpenAI documentation
                if (!data.messages || !Array.isArray(data.messages) || data.messages.length < 2) {
                    throw new Error(`Invalid structure at line ${index + 1}`);
                }

                // Check for required roles
                const hasUser = data.messages.some(m => m.role === 'user');
                const hasAssistant = data.messages.some(m => m.role === 'assistant');

                if (!hasUser || !hasAssistant) {
                    throw new Error(`Missing user or assistant message at line ${index + 1}`);
                }

                validExamples++;
            } catch (e) {
                console.warn(`⚠️ Skipping line ${index + 1}: ${e.message}`);
            }
        });

        if (validExamples < 10) {
            throw new Error(`Need at least 10 valid examples. Found: ${validExamples}`);
        }

        console.log(`✅ Validation passed: ${validExamples} valid examples`);
        return validExamples;
    }

    // Step 2: Upload training file to OpenAI
    async uploadTrainingFile() {
        console.log("📤 Uploading training file...");

        const file = await this.openai.files.create({
            file: fs.createReadStream(CONFIG.TRAINING_FILE),
            purpose: "fine-tune",
        });

        console.log(`✅ File uploaded: ${file.id}`);
        return file.id;
    }

    // Step 3: Create fine-tuning job
    async createFineTuningJob(fileId) {
        console.log(`🚀 Creating fine-tuning job with model: ${CONFIG.MODEL}`);

        const job = await this.openai.fineTuning.jobs.create({
            training_file: fileId,
            model: CONFIG.MODEL,
            method: {
                type: "supervised"
            }
        });

        console.log(`✅ Fine-tuning job created: ${job.id}`);
        return job.id;
    }

    // Step 4: Monitor job until completion
    async monitorJob(jobId) {
        console.log("⏳ Monitoring fine-tuning job...");
        console.log("This typically takes 10-30 minutes...\n");

        while (true) {
            const job = await this.openai.fineTuning.jobs.retrieve(jobId);

            console.log(`Status: ${job.status}`);

            if (job.status === "succeeded") {
                console.log("\n🎉 Fine-tuning completed successfully!");
                console.log(`🎆 Your fine-tuned model ID: ${job.fine_tuned_model}`);
                return job.fine_tuned_model;
            } 

            if (job.status === "failed") {
                throw new Error(`Fine-tuning failed: ${job.error?.message || 'Unknown error'}`);
            }

            if (job.status === "cancelled") {
                throw new Error("Fine-tuning was cancelled");
            }

            // Wait before checking again
            await new Promise(resolve => setTimeout(resolve, CONFIG.POLL_INTERVAL));
        }
    }

    // Complete supervised fine-tuning workflow
    async runFineTuning() {
        try {
            console.log("🤖 Starting OpenAI Supervised Fine-Tuning\n");
            console.log(`📋 Using model: ${CONFIG.MODEL}`);
            console.log(`📄 Training file: ${CONFIG.TRAINING_FILE}\n`);

            // Step 1: Validate data
            const validExamples = this.validateTrainingData();

            // Step 2: Upload file
            const fileId = await this.uploadTrainingFile();

            // Step 3: Create job
            const jobId = await this.createFineTuningJob(fileId);

            // Step 4: Monitor completion
            const modelId = await this.monitorJob(jobId);

            console.log("\n" + "=".repeat(60));
            console.log("SUCCESS! Your fine-tuned model is ready!");
            console.log("=".repeat(60));
            console.log(`\n Model ID: ${modelId}`);
            console.log(`Trained on ${validExamples} examples`);
            console.log("\n Next steps:");
            console.log("1. Copy the Model ID above");
            console.log("2. Use it in your application to access your custom model");

            return modelId;

        } catch (error) {
            console.error(`\n❌ Fine-tuning failed: ${error.message}`);

            if (error.message.includes("not found")) {
                console.log("💡 Tip: Make sure training_data.jsonl exists in the current directory");
            } else if (error.message.includes("API_KEY")) {
                console.log("💡 Tip: Set OPENAI_API_KEY in your .env file");
            }

            throw error;
        }
    }
}

// Main execution
async function main() {
    const manager = new FineTuningManager();
    await manager.runFineTuning();
}

if (require.main === module) {
    main().catch(console.error);
}

module.exports = FineTuningManager;

This script manages the entire fine-tuning process once your training data is ready from the scraper. It works as an automated manager, taking your JSONL training file and turning it into a custom OpenAI model designed for your specific needs. The process begins with thorough validation, ensuring your training file exists, has at least 10 valid examples, and follows OpenAI's required format with correct message roles (user and assistant). This validation step is important because OpenAI will reject data that isn't formatted correctly, so identifying issues early saves you time and API costs.

This script provides a complete fine-tuning workflow with the new GPT-4.1 models. You can choose from nano (cheapest), mini (balanced), or full (most capable) models, depending on your needs and budget. Once validation is successful, the script uploads your training file to OpenAI's servers and starts a fine-tuning job using your selected base model. The script uses supervised fine-tuning, which means your model learns directly from the question-answer pairs you provided, adjusting its responses to fit your website's information and tone.

The easiest part is the monitoring phase, where the script automatically checks the fine-tuning job status every 30 seconds until it's done. Fine-tuning usually takes 10-30 minutes, depending on your dataset size and the base model you chose. During the process, you'll get clear status updates in the console. Once it's finished, the script gives you your custom model ID, which you can use right away in your applications. It also provides helpful error messages and tips if something goes wrong, like reminding you to check your API key or verify that your training file exists.

Now let's submit our training_data.jsonl file for fine-tuning with the following command:

node fine-tune.js

You should see the following output:

🎉 Fine-tuning completed successfully!
🎆 Your fine-tuned model ID: ft:gpt-4.1-nano-2025-04-14:...

============================================================
SUCCESS! Your fine-tuned model is ready!
============================================================

 Model ID: ft:ft:gpt-4.1-nano-2025-04-14:...
Trained on 50 examples

 Next steps:
1. Copy the Model ID above
2. Use it in your application to access your custom model

Pro tip: Start with the nano model to test your dataset and workflow. It's the most cost-effective option and often enough for domain-specific knowledge. You can always train with a larger model later by updating configuration in fine-tune.js.

Step 3: Next.js Application Setup

Now that our model is trained, let's build a modern chat application. We'll set up a separate web folder with a Next.js app using TypeScript and shadcn/ui for components.

First, navigate back to the project root:

cd ..

Then create the web application:

npx create-next-app@latest web

Choose the following options during the setup:

✔ Would you like to use TypeScript? › Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like your code inside a `src/` directory? › Yes
✔ Would you like to use App Router? (recommended) › Yes
✔ Would you like to use Turbopack? (recommended) › No
✔ Would you like to customize the import alias (`@/*` by default)? › No

Navigate to the web directory:

cd web

Install the required packages using the following command:

npm install ai @ai-sdk/openai @ai-sdk/react openai lucide-react

Now let's set up shadcn/ui for beautiful components:

npx shadcn@latest init

Choose the following option during the setup:

✔ Which color would you like to use as the base color? › Slate

And add the following shadcn components:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add scroll-area
npx shadcn@latest add avatar

Create the .env.local file using the following command:

touch .env.local

Add your environment variables in web/.env.local:

OPENAI_API_KEY=sk-...your-api-key...
OPENAI_ORG_ID=org-...your-org-id...
FINE_TUNED_MODEL=ft:gpt-4.1-nano-2025-04-14:... # Your model ID from fine-tuning

In the src directory, create a new folder named types. Inside this folder, create a file called chat.ts and copy and paste the following code:

// web/src/types/chat.ts
export interface Message {
    id: string;
    role: "user" | "assistant" | "system";
    content: string;
    createdAt?: Date;
}

export interface ChatRequest {
    messages: Message[];
    model?: string;
}

export interface ChatResponse {
    message: Message;
    usage?: {
        prompt_tokens: number;
        completion_tokens: number;
        total_tokens: number;
    };
}

This TypeScript code defines the data structures (interfaces) for a chat application, setting a standard for how messages and API interactions should be formatted in your app. The Message interface specifies what each chat message must include: a unique ID, a role indicating if it's from the user, assistant, or system, the message content, and an optional timestamp. The ChatRequest interface organizes the data you send to your fine-tuned model, including an array of messages (the conversation history) and an optional model parameter to specify which fine-tuned model to use.

Finally, the ChatResponse interface defines what you'll receive from the API: the assistant's reply message and optional usage statistics that show how many tokens were used for prompts and completions. This helps you track costs. By defining these interfaces, TypeScript ensures type safety throughout your application, catching errors during development and providing autocomplete suggestions in your code editor. This makes your chat application more robust and easier to maintain.

Update the app/layout.tsx with meta information and chat layout:

// web/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "AI Chat - Powered by Custom Fine-Tuned Model",
    description: "Chat with an AI trained on custom content",
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en" className="h-full">
            <body
                className={`${inter.className} h-full bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900`}
                suppressHydrationWarning={true}
            >
                {children}
            </body>
        </html>
    );
}

This code sets up the root layout for a Next.js application, acting as a wrapper around every page in your chat app. It starts by importing the Inter font from Google Fonts and configures it to use Latin characters, giving your application a clean, modern appearance.

The metadata object sets the page title and description that appear in browser tabs and search engine results, which is important for SEO and user experience. The RootLayout component brings everything together: it wraps all your app's pages (using the children prop) in a consistent HTML structure with full-height styling (h-full) and a pleasant gradient background. This background changes from light slate tones in light mode to dark slate in dark mode, automatically matching the user's system settings. The suppressHydrationWarning attribute addresses a common Next.js issue where server-rendered HTML might slightly differ from client-rendered HTML (often due to things like timestamps or theme detection), preventing console warnings.

This layout ensures that every page in your chat application shares the same basic styling, typography, and metadata, so you don't need to repeat the code on each page. It gives us a solid foundation with TypeScript for type safety, shadcn/ui for standard components, effective management of environment variables, and a clean project structure that is easy to maintain and expand.

Step 4: Building the Chat Interface

Let's build a beautiful, responsive chat interface using shadcn components and the Vercel AI SDK's powerful streaming features.

First, create the main chat component in src/components/chat.tsx:

// web/src/components/chat.tsx
"use client";

import { useChat } from "@ai-sdk/react";
import { useRef, useEffect, useState } from "react";
import { Send, Bot, User, Loader2, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    CardDescription,
} from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export default function Chat() {
    const scrollAreaRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);
    const [input, setInput] = useState("");

    const {
        messages,
        sendMessage,
        status,
        error,
        regenerate,
        stop,
        setMessages,
    } = useChat({
        onError: (error) => {
            console.error("Chat error:", error);
        },
        onFinish: () => {
            inputRef.current?.focus();
        },
    });

    const isLoading = status === "streaming" || status === "submitted";

    // Add welcome message on mount
    useEffect(() => {
        if (messages.length === 0) {
            setMessages((prev) => [
                ...prev,
                {
                    id: "welcome",
                    role: "assistant" as const,
                    parts: [
                        {
                            type: "text" as const,
                            text: "Hello! I'm your custom AI assistant, trained on specific content. How can I help you today?",
                        },
                    ],
                },
            ]);
        }
    }, [messages.length, setMessages]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!input.trim() || isLoading) return;

        sendMessage({
            role: "user",
            parts: [{ type: "text", text: input }],
        });
        setInput("");
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInput(e.target.value);
    };

    // Auto-scroll to bottom when new messages arrive
    useEffect(() => {
        if (scrollAreaRef.current) {
            const scrollContainer = scrollAreaRef.current.querySelector(
                "[data-radix-scroll-area-viewport]"
            );
            if (scrollContainer) {
                scrollContainer.scrollTop = scrollContainer.scrollHeight;
            }
        }
    }, [messages]);


    return (
        <div className="flex h-screen max-w-5xl mx-auto p-4">
            <Card className="flex-1 flex flex-col shadow-xl overflow-hidden">
                {/* Header */}
                <CardHeader className="border-b flex-shrink-0">
                    <div className="flex items-center space-x-4">
                        <div className="relative">
                            <Avatar className="h-10 w-10">
                                <AvatarFallback className="bg-primary text-primary-foreground">
                                    <Bot className="h-6 w-6" />
                                </AvatarFallback>
                            </Avatar>
                            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-background animate-pulse" />
                        </div>
                        <div className="flex-1">
                            <CardTitle>Custom AI Assistant</CardTitle>
                            <CardDescription>
                                Powered by your fine-tuned model
                            </CardDescription>
                        </div>
                    </div>
                </CardHeader>

                {/* Messages Area */}
                <ScrollArea ref={scrollAreaRef} className="flex-1 min-h-0">
                    <div className="p-4 space-y-4 pb-4">
                        {messages.map((message) => {
                            const isUser = (message.role as string) === "user";
                            return (
                                <div
                                    key={message.id}
                                    className={cn(
                                        "flex",
                                        isUser ? "justify-end" : "justify-start"
                                    )}
                                >
                                    <div
                                        className={cn(
                                            "flex items-start gap-3 max-w-[85%] min-w-0",
                                            isUser && "flex-row-reverse"
                                        )}
                                    >
                                        {/* Avatar */}
                                        <Avatar className="h-8 w-8 shrink-0">
                                            <AvatarFallback
                                                className={cn(
                                                    isUser
                                                        ? "bg-primary text-primary-foreground"
                                                        : "bg-muted"
                                                )}
                                            >
                                                {isUser ? (
                                                    <User className="h-4 w-4" />
                                                ) : (
                                                    <Bot className="h-4 w-4" />
                                                )}
                                            </AvatarFallback>
                                        </Avatar>

                                        {/* Message Content */}
                                        <div className="space-y-1 min-w-0 flex-1">
                                            <div
                                                className={cn(
                                                    "rounded-lg px-4 py-2.5 text-sm max-w-full",
                                                    isUser
                                                        ? "bg-primary text-primary-foreground"
                                                        : "bg-muted"
                                                )}
                                            >
                                                <div className="whitespace-pre-wrap break-words leading-relaxed overflow-wrap-anywhere">
                                                    {message.parts?.map((part, index) => {
                                                        if (part.type === "text") {
                                                            return <p key={index}>{part.text}</p>;
                                                        }
                                                        return null;
                                                    })}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}

                        {/* Loading Indicator */}
                        {isLoading && (
                            <div className="flex justify-start">
                                <div className="flex items-center gap-3 max-w-[85%]">
                                    <Avatar className="h-8 w-8">
                                        <AvatarFallback className="bg-muted">
                                            <Bot className="h-4 w-4" />
                                        </AvatarFallback>
                                    </Avatar>
                                    <div className="bg-muted rounded-lg px-4 py-2.5">
                                        <div className="flex items-center gap-2">
                                            <Loader2 className="h-3 w-3 animate-spin" />
                                            <span className="text-sm text-muted-foreground">
                                                Thinking...
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        {/* Error Message */}
                        {error && (
                            <div className="flex justify-center px-4">
                                <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-3 max-w-md">
                                    <div className="flex items-start gap-2">
                                        <AlertCircle className="h-4 w-4 text-destructive mt-0.5" />
                                        <div className="space-y-1">
                                            <p className="text-sm text-destructive">
                                                {error.message ||
                                                    "Something went wrong. Please try again."}
                                            </p>
                                            <Button
                                                onClick={() => regenerate()}
                                                variant="ghost"
                                                size="sm"
                                                className="h-7 px-2 text-xs"
                                            >
                                                Retry last message
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </ScrollArea>

                {/* Input Area */}
                <CardContent className="border-t p-4 flex-shrink-0">
                    <form onSubmit={handleSubmit} className="flex gap-2">
                        <input
                            ref={inputRef}
                            type="text"
                            value={input}
                            onChange={handleInputChange}
                            placeholder="Type your message..."
                            disabled={isLoading}
                            className={cn(
                                "flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background",
                                "placeholder:text-muted-foreground",
                                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                                "disabled:cursor-not-allowed disabled:opacity-50"
                            )}
                            autoFocus
                        />

                        {isLoading ? (
                            <Button
                                type="button"
                                onClick={stop}
                                variant="destructive"
                                size="sm"
                            >
                                Stop
                            </Button>
                        ) : (
                            <Button
                                type="submit"
                                disabled={!input.trim()}
                                size="sm"
                            >
                                <Send className="h-4 w-4" />
                                <span className="ml-2 hidden sm:inline">
                                    Send
                                </span>
                            </Button>
                        )}
                    </form>

                    {/* Character Counter */}
                    {input.length > 0 && (
                        <div className="mt-2 text-xs text-muted-foreground text-right">
                            {input.length} / 4000
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}

This code creates the main chat interface component where users interact with your fine-tuned AI model. It primarily uses the useChat hook from Vercel's AI SDK, which manages all the complex messaging tasks, such as sending messages, receiving streaming responses, managing conversation state, and handling errors. The component sets up several React hooks: useRef for managing DOM elements like the scroll area and input field, useState for the input text, and useEffect for side effects like auto-scrolling and showing a welcome message when the chat first loads.

The UI is built using shadcn/ui components to create a polished, professional look with minimal effort. The layout has three main sections: a header showing the AI assistant's status (with a pulsing green dot to indicate it's online), a scrollable message area in the middle, and an input form at the bottom. Each message is displayed with an avatar (a user icon for human messages and a bot icon for AI responses) and styled differently based on who sent it. User messages appear on the right with a primary color background, while assistant messages appear on the left with a muted background. The component includes thoughtful UX details like automatic scrolling to the latest message, focus management that returns to the input field after sending, and a character counter showing how close you are to the 4000-character limit.

The component also manages different states smoothly: it shows a "Thinking..." animation with a spinning loader while the AI creates a response, displays error messages with a retry button if something goes wrong, and even lets users stop the response mid-stream if it takes too long. When loading, the send button changes into a "Stop" button, giving users full control over the conversation. Everything is wrapped in responsive styling that adjusts to different screen sizes, ensuring your chat interface looks great whether users are on desktop or mobile devices.

Now, update the main page to use the chat component:

// web/app/page.tsx
import Chat from "@/components/chat";

export default function Home() {
    return (
        <main className="h-screen">
            <Chat />
        </main>
    );
}

This chat interface uses shadcn/ui components to create a polished, professional look. It includes features like real-time message streaming, animated loading states, error handling with retry options, automatic scrolling to the latest messages, a responsive design for all devices, keyboard shortcuts, accessibility features, and a character counter to keep users informed.

Step 5: API Route Integration

Now let's create the backend API route that connects our chat interface to the fine-tuned OpenAI model with proper streaming support.

// web/app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages } from "ai";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    try {
        // Parse request body
        const body = await req.json();
        const { messages } = body;

        // Validate messages
        if (!messages || !Array.isArray(messages)) {
            return NextResponse.json(
                { error: "Invalid request format" },
                { status: 400 }
            );
        }

        // Convert UI messages to model messages using AI SDK utility
        const modelMessages = convertToModelMessages(messages);

        // Check if we have any valid messages
        if (modelMessages.length === 0) {
            return NextResponse.json(
                { error: "No valid messages provided" },
                { status: 400 }
            );
        }

        // Add system prompt to prevent hallucination and guide the model
        const systemPrompt = {
            role: "system" as const,
            content: `You are a helpful assistant answering questions about MTechZilla, a software development company. 

IMPORTANT INSTRUCTIONS:
- Only answer questions based on information you were specifically trained on about MTechZilla
- If you don't know something or weren't trained on specific information, say "I don't have that specific information in my training data"
- Never make up or guess information about MTechZilla
- Be accurate and only provide information you're confident about

Answer questions accurately based on your training data about MTechZilla's services, technologies, and approach.`
        };

        // Prepend system message if not already present
        const hasSystemMessage = modelMessages.some(msg => msg.role === 'system');
        if (!hasSystemMessage) {
            modelMessages.unshift(systemPrompt);
        }

        // Load fine-tuned model ID from environment variable
        const fineTunedModelId = process.env.FINE_TUNED_MODEL;

        // Ensure we have a valid model ID
        if (!fineTunedModelId) {
            throw new Error("No fine-tuned model ID available");
        }

        // Call OpenAI with streaming using the new AI SDK
        const result = streamText({
            model: openai(fineTunedModelId),
            messages: modelMessages,
            temperature: 0.1, // Lower temperature for more deterministic, factual responses
        });

        // Log stream start
        console.log(`Stream started`);

        // Return UI message stream response for useChat compatibility
        return result.toUIMessageStreamResponse({
            headers: {
                "Cache-Control": "no-cache, no-transform",
                "X-Accel-Buffering": "no",
            },
        });
    } catch (error: unknown) {
        console.error("Chat API Error:", error);

        // Handle specific errors
        if (error && typeof error === "object" && "status" in error) {
            const errorWithStatus = error as { status: number };

            if (errorWithStatus.status === 401) {
                return NextResponse.json(
                    {
                        error: "Authentication failed. Check API key configuration.",
                    },
                    { status: 401 }
                );
            }

            if (errorWithStatus.status === 404) {
                return NextResponse.json(
                    {
                        error: "Model not found. Check your fine-tuned model ID.",
                    },
                    { status: 404 }
                );
            }

            if (errorWithStatus.status === 429) {
                return NextResponse.json(
                    {
                        error: "OpenAI rate limit reached. Please try again later.",
                    },
                    { status: 429 }
                );
            }
        }

        // Generic error
        return NextResponse.json(
            { error: "An error occurred. Please try again." },
            { status: 500 }
        );
    }
}

This code sets up the backend API endpoint that connects your chat interface to your fine-tuned OpenAI model. When a user sends a message, this Next.js API route receives the request, checks if the messages are correctly formatted, and converts them from the UI format to the structure that OpenAI's API needs using the AI SDK's convertToModelMessages tool. A key feature is the system prompt injection before sending messages to your model. The code automatically adds specific instructions, telling the AI to only respond based on its training data about MTechZilla (in this example) and to clearly say "I don't have that specific information" instead of making things up. This is crucial for preventing errors and ensuring the chatbot remains accurate and reliable.

The route loads your fine-tuned model ID from environment variables to keep sensitive settings secure. It uses Vercel's AI SDK to call OpenAI with streaming enabled, so responses appear word-by-word in real-time instead of waiting for the entire response. The temperature is set to 0.1, making the model more predictable and factual—perfect for a customer service chatbot where accuracy is more important than creativity. The streamText function handles all the streaming details, and the response is returned in a format that works directly with the useChat hook in your frontend component.

The code includes thorough error handling for common issues: authentication failures (invalid API keys), model not found errors (incorrect model ID), rate limiting (too many requests), and general server errors. Each error type returns a specific, helpful message to make debugging easier during development and to provide clear feedback to users if something goes wrong. The response headers include cache control directives to ensure fresh data and prevent buffering issues during streaming, guaranteeing a smooth, real-time chat experience for your users.

Step 6: Testing Your Application

With everything set up, let's test the complete application and ensure it works correctly.

First, make sure you've added your fine-tuned model ID to the environment file:

OPENAI_API_KEY=sk-...your-api-key...
OPENAI_ORG_ID=org-...your-org-id...
FINE_TUNED_MODEL=ft:gpt-4.1-nano-2025-04-14:... # Copy from scripts/model_info.json

Start the development server:

npm run dev

Open http://localhost:3000 in your browser, and you'll see the following UI:

Test various scenarios:

1. Domain Knowledge Test: Ask questions related to your training data

2. Conversation Flow: Have a multi-turn conversation

3. Edge Cases: Try very long inputs, rapid messages, network interruptions

4. Mobile Testing: Test on different screen sizes

Conclusion

Congratulations! You've successfully fine-tuned a GPT-4.1 model and built a chat application ready for production, showing the power of custom AI. We've transformed raw website content into structured training data, used OpenAI's latest models for fine-tuning, and built a modern Next.js app with real-time streaming and a nice interface. The key to successful fine-tuning is knowing when it's the right choice - use it for a consistent brand voice, specialised domain knowledge, and reducing RAG complexity, but consider the RAG option for information that changes often. Our modular project structure keeps training scripts separate from the web app, making it easy to retrain models and add new features.

As you continue, remember that fine-tuning is a step-by-step process. Watch how users interact, gather feedback, and keep improving your model with new training examples. Avoid common mistakes like using too little data (aim for 50+ good examples), ignoring validation errors, and not setting up proper rate limits and error handling. In 2025, AI customisation is changing fast, with trends toward more efficient models, continuous learning, and hybrid methods that mix different techniques. What used to need a team of ML engineers can now be done by few developers with the right skills. You now have the tools and knowledge to create specialised AI applications that truly understand and serve your specific area.

For founders considering AI adoption, I've created a free guide: AI or No AI? The 2025 Founder's Decision Playbook - a framework to help decide when AI truly adds value.

Feel free to connect with me on LinkedIn and Twitter.

To use STOMP over WebSocket, you can use @stomp/stompjs, but that has tricky callbacks and a complicated API that caters to more specialized use cases. Luckily, there’s also the lesser-known @stompjs/rx-stomp which provides a nice interface via RxJS observables. Observables aren't exclusive to Angular, and they fit quite well with how React works. It's a neat interface when composing complex workflows and pipelines with many different message sources.

The tutorial follows a somewhat similar path as the initial version in Angular, but the component structure and code style are tuned towards the functional style of React.

Note: This tutorial is written with strict TypeScript, but the JavaScript code is almost identical since we only have 5 type declarations. For the JS version, you can skip the type imports and definitions.

Table of Contents

• Goals

• Prerequisites

• Starter STOMP Server with RabbitMQ

• Starter React Template

• How to Install RxStomp

• How to Manage Connection and Disconnection with the STOMP Server

• How to Monitor the Connection Status

• How to Send Messages

• How to Receive Messages

• Summary

Goals

Here, we’ll build a simplified chatroom application that shows various aspects of RxStomp across different components. Overall, we want to have:

• A React frontend connected with RxStomp to a STOMP server.

• A live connection status display based on our connection to the STOMP server.

• Pub/Sub logic for any configurable topic.

• Splitting RxStomp logic across multiple components to show how to separate logic and responsibility.

• Aligning RxStomp connection/subscription lifecycles with React component lifecycles to ensure that there are no leaks or unclosed watchers.

Prerequisites

• You should have a STOMP server running so that the React application can connect to it. Here, we’ll use RabbitMQ with the rabbitmq_web_stomp extension.

• Latest React version. This tutorial will use v18, although older versions will probably work as well.

• Some familiarity with observables will also help.

Starter STOMP Server with RabbitMQ

If you’d like to use RabbitMQ too (not strictly required), here’s are installation guides for different operating systems. To add the extension, you’ll need to run:

$ rabbitmq-plugins enable rabbitmq_web_stomp

If you’re able to use Docker, a Docker file similar to this will set everything needed for the tutorial:

FROM rabbitmq:3.8.8-alpine

run rabbitmq-plugins enable --offline rabbitmq_web_stomp

EXPOSE 15674

Starter React Template

For this tutorial, we'll use Vite's react-ts template. The central part of our application will be in the App component, and we'll create child components for other specific STOMP functionality.

How to Install RxStomp

We’ll use the @stomp/rx-stomp npm package:

$ npm i @stomp/rx-stomp rxjs

This will install version 2.0.0

Note: This tutorial still works without explicitly specifying rxjs since it's a sister dependency, but it's good practice to be explicit about it.

How to Manage Connection and Disconnection with the STOMP Server

Now, let's open App.tsx and initialize our RxStomp client. Since the client isn't a state that will change for rendering, we’ll wrap it in the useRef Hook.

// src/App.tsx
import { useRef } from 'react'
import { RxStomp } from '@stomp/rx-stomp'

import './App.css'

function App() {
  const rxStompRef = useRef(new RxStomp())
  const rxStomp = rxStompRef.current

  return (
    <>
      <h1>Hello RxStomp!</h1>
    </>
  )
}

export default App

Assuming the default ports and authentication details, we’ll define some configuration for our connection next.

// src/App.tsx

import { RxStomp } from '@stomp/rx-stomp'
import type { RxStompConfig } from '@stomp/rx-stomp'
...
const rxStompConfig: RxStompConfig = {
  brokerURL: 'ws://localhost:15674/ws',
  connectHeaders: {
    login: 'guest',
    passcode: 'guest',
  },
  debug: (msg) => {
    console.log(new Date(), msg)
  },
  heartbeatIncoming: 0,
  heartbeatOutgoing: 20000,
  reconnectDelay: 200,
}

function App() {
  ...

For a better dev experience, we logged all messages with timestamps to a local console and set low timer frequencies. Your configuration should be quite different for your production application, so check out the RxStompConfig docs for all the options available.

Next, we’ll pass the configuration to rxStomp inside a useEffect Hook. This manages the connection's activation alongside the component lifecycle.

// src/App.tsx
...
function App() {
  const rxStompRef = useRef(new RxStomp())
  const rxStomp = rxStompRef.current

  useEffect(() => {
    rxStomp.configure(rxStompConfig)
    rxStomp.activate()

    return () => { 
      rxStomp.deactivate() 
    }
  })
  ...

While there's no visual change in our app, checking the logs should show connection and ping logs. Here's an example of what that should look like:

Date ... >>> CONNECT
login:guest
passcode:guest
accept-version:1.2,1.1,1.0
heart-beat:20000,0

Date ... Received data 
Date ... <<< CONNECTED
version:1.2
heart-beat:0,20000
session:session-EJqaGQijDXqlfc0eZomOqQ
server:RabbitMQ/4.0.2
content-length:0

Date ... connected to server RabbitMQ/4.0.2 
Date ... send PING every 20000ms 
Date ... <<< PONG 
Date ... >>> PING

Note: Generally, if you see duplicate logs, it may be a sign that a deactivation or unsubscribe functionality wasn't implemented correctly. React renders each component twice in a dev environment to help people catch these bugs via React.StrictMode

How to Monitor the Connection Status

RxStomp has a RxStompState enum that represents possible connection states with our broker. Our next goal is to display the connection status in our UI.

Let's create a new component for this called Status.tsx:

// src/Status.tsx
import { useState } from 'react'

export default function Status() {
  const [connectionStatus, setConnectionStatus] = useState('')

  return (
    <>
      <h2>Connection Status: {connectionStatus}</h2>
    </>
  )
}

We can use the rxStomp.connectionState$ observable to bind to our connectionStatus string. Similar to how we used useEffect, we’ll use the unmount action to unsubscribe().

// src/Status.tsx
import { RxStompState } from '@stomp/rx-stomp'
import { useEffect, useState } from 'react'
import type { RxStomp } from '@stomp/rx-stomp'


export default function Status(props: { rxStomp: RxStomp }) {
  const [connectionStatus, setConnectionStatus] = useState('')

  useEffect(() => {
    const statusSubscription = props.rxStomp.connectionState$.subscribe((state) => {
      setConnectionStatus(RxStompState[state])
    })

    return () => {
      statusSubscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <h2>Connection Status: {connectionStatus}</h2>
    </>
  )
}

To view it, we include it in our app:

// src/App.tsx
import Status from './Status'
...
  return (
    <>
      <h1>Hello RxStomp!</h1>

      <Status rxStomp={rxStomp}/>
    </>
  )

At this point, you should have a working visual indicator on the screen. Try playing around by taking the STOMP server down and see if the logs work as expected.

How to Send Messages

Let's create a simple chatroom to show a simplified end-to-end messaging flow with the broker.

We can place the functionality in a new Chatroom component. First, we can create the component with a custom username and message field that's bound to inputs.

// src/Chatroom.tsx
import { useState } from 'react'
import type { RxStomp } from '@stomp/rx-stomp'

export default function Chatroom(props: {rxStomp: RxStomp}) {
  const [message, setMessage] = useState('')
  const [userName, setUserName] = useState(`user${Math.floor(Math.random() * 1000)}`)

  return (
    <>
      <h2>Chatroom</h2>

      <label htmlFor='username'>Username: </label>
      <input
        type='text'
        name='username'
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />

      <label htmlFor='message'>Message: </label>

      <input
        type='text'
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        name='message'
      />
    </>
  )    
}

Let’s include this within our App with a toggle to join the chatroom:

// src/App.tsx
import { useEffect, useState, useRef } from 'react'
import Chatroom from './Chatroom'
...
function App() {
  const [joinedChatroom, setJoinedChatroom] = useState(false)
  ...
  return (
    <>
      <h1>Hello RxStomp!</h1>

      <Status rxStomp={rxStomp}/>

      {!joinedChatroom && (
        <button onClick={() => setJoinedChatroom(true)}>
          Join chatroom!
        </button>
      )}

      {joinedChatroom && (
        <>
          <button onClick={() => setJoinedChatroom(false)}>
            Leave chatroom!
          </button>

          <Chatroom rxStomp={rxStomp}/>
        </>
      )}

    </>
  )

Time to actually send messages. STOMP is best for sending text-based messages (binary data is also possible). We’ll define the structure of the data we're sending in a new types file:

// types.ts
interface ChatMessage {
  userName: string,
  message: string
}

Note: If you're not using TypeScript, you can skip adding this type definition.

Next, let's use JSON to serialize the message and send messages to our STOMP server using .publish with a destination topic and our JSON body.

// src/Chatroom.tsx
import type { ChatMessage } from './types'
...
const CHATROOM_NAME = '/topic/test'

export default function Chatroom(props: {rxStomp: RxStomp}) {
  ...
  function sendMessage(chatMessage: ChatMessage) {
    const body = JSON.stringify({ ...chatMessage })
    props.rxStomp.publish({ destination: CHATROOM_NAME, body })
    console.log(`Sent ${body}`)
    setMessage('')
  }

  return (
    <>
      <h2>Chatroom</h2>

      <label htmlFor="username">Username: </label>
      <input
        type="text"
        name="username"
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />

      <label htmlFor="message">Message: </label>

      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        name="message"
      />

      <button onClick={() => sendMessage({userName, message})}>Send Message</button>
    </>
  )
}

To test it out, try clicking the Send Message button a few times and see if the serialization works fine. While you won't be able to see any visual changes yet, the console logs should show it:

Date ... >>> SEND
destination:/topic/test
content-length:45

Sent {"userName":"user722","message":"1234567890"}

How to Receive Messages

We’ll create a new component to show the list of messages from all the users. For now, we'll use the same type, pass the topic name as a prop, and display everything as a list. All this goes into a new component called MessageList.

// src/MessageDisplay.tsx
import { useEffect, useState } from 'react'
import type { RxStomp } from '@stomp/rx-stomp'
import type { ChatMessage } from './types'

export default function MessageDisplay(props: {rxStomp: RxStomp, topic: string}) {
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([
    {userName: 'admin', message: `Welcome to ${props.topic} room!`}
  ])

  return(
  <>
  <h2>Chat Messages</h2>
  <ul>
    {chatMessages.map((chatMessage, index) => 
      <li key={index}>
        <strong>{chatMessage.userName}</strong>: {chatMessage.message}
      </li>
    )}
  </ul>
  </>
  )
}

Time to bring everything together!

We can display our messages to display within our Chatroom component by adding it to the bottom.

// src/Chatroom.tsx
import { useState } from 'react'
import type { ChatMessage } from './types'
import type { RxStomp } from '@stomp/rx-stomp'

import MessageDisplay from './MessageDisplay'

export const CHATROOM_NAME = '/topic/test'

export default function Chatroom(props: {rxStomp: RxStomp}) {
  const [message, setMessage] = useState('')
  const [userName, setUserName] = useState(`user${Math.floor(Math.random() * 1000)}`)

  function sendMessage(chatMessage: ChatMessage) {
    const body = JSON.stringify({ ...chatMessage })
    props.rxStomp.publish({ destination: CHATROOM_NAME, body })
    console.log(`Sent ${body}`)
    setMessage('')
  }

  return (
    <>
      <h2>Chatroom</h2>

      <label htmlFor='username'>Username: </label>
      <input
        type='text'
        name='username'
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />

      <label htmlFor='message'>Message: </label>

      <input
        type='text'
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        name='message'
      />

      <button onClick={() => sendMessage({userName, message})}>Send Message</button>

      <MessageDisplay rxStomp={props.rxStomp} topic={CHATROOM_NAME} />
    </>
  )
}

And once you've verified the static display working locally, we can make this display dynamic using an RxJS Observable to receive our chat messages.

Similar to managing the subscription with the Status component, we set up the subscription on mount, and unsubscribe on unmount.

Using RxJS pipe and map, we can deserialize our JSON back to our ChatMessage. The modular design can let you set up a more complicated pipeline as needed using RxJS operators.

// src/MessageDisplay.tsx
...
import { map } from 'rxjs'

export default function MessageDisplay(props: {rxStomp: RxStomp, topic: string}) {
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([
    {userName: 'admin', message: `Welcome to ${props.topic} room!`}
  ])

  useEffect(() => {
    const subscription = props.rxStomp
      .watch(props.topic)
      .pipe(map((message) => JSON.parse(message.body)))
      .subscribe((message) => setChatMessages((chatMessages) => [...chatMessages, message]))

    return () => {
      subscription.unsubscribe()
    }
  }, [])

  ...

At this point, the chat GUI should show messages correctly, and you can experiment with opening multiple tabs as different users.

Another thing to try here is turning off the STOMP server, sending a few messages, and turning it back on. The messages should get queued locally and dispatched once the server is ready to go. Neat!

Summary

In this tutorial, we:

• Installed @stomp/rx-stomp for a nice dev experience.

• Set up RxStompConfig to configure our client with the connection details, debugger logging and timer settings.

• Used rxStomp.activate and rxStomp.deactivate to manage the client’s main lifecycle.

• Monitored the subscription state using rxStomp.connectionState$ observable.

• Published messages using rxStomp.publish with configurable destinations and message bodies.

• Created an observable for a given topic using rxStomp.watch.

• Used both console logs and React components to see the library in action, and verify functionality and fault tolerance.

You can find the final code on Gitlab: https://gitlab.com/harsh183/rxstomp-react-tutorial. Feel free to use it as a starter template too and report any issues that may come up.

You will learn how to leverage the versatility of Fiber by making use of a WebSocket. You'll also learn how to create a reactive frontend without the use of JavaScript.

Prerequisites

• A good understanding of Go and HTTP servers.
• Go must be installed (Go version 1.22 will be used in this project).

Table of Contents

• Getting Started
• How to Install Dependencies
• main.go File
• Static Files
• How to Configure Static Files
• How to Create Handlers
• messages.go File
• websocket.go File
• How to Add a WebSocket to Routes and HTMX
• Conclusion

Getting Started

First, create a new folder named go-chat. Initiate Go in your project by running go mod init pakacage_name, as can seen below:

go mod init github.com/steelthedev/go-chat

How to Install Dependencies

You need to install some libraries which are very vital. This can be done in the terminal by running the following commands:

go get -u github.com/gofiber/fiber/v2
go get -u github.com/gofiber/websocket/v2
go get -u github.com/gofiber/template/html/v2

These will install Fiber and other components such as WebSocket and HTML templating library.

main.go File

In the root directory, create a main.go file. This file will be the entry point to the application. Inside the file we are going to create a simple web server:

package main

import "github.com/gofiber/fiber/v2"


func main() {

    // Start new fiber instance
    app := fiber.New()

    // Create a "ping" handler to test the server
    app.Get("/ping", func(ctx *fiber.Ctx) error{
        return ctx.SendString("Welcome to fiber")
    })

    // Start the http server
    app.Listen(":3000")
}

Save the file and run go run main.go in the terminal to start the web server.

go run command starting the web server

If you head over to the browser and test the /ping route, there should be a response like this:

/ping route in the browser

Static Files

We'll need static files such as CSS and HTML files for the application to function. Create two folders with named static and views. Inside the views folder, create two html files: index.html and messages.html.

Here's what the index.html file should look like:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"
        integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
        crossorigin="anonymous"></script>
    <!-- HTMX Websockets extension https://htmx.org/extensions/web-sockets/ -->
    <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <div class="container">
        <div class="chat-window">
            <div class="messages" id="messages" >
                <!-- Messages will be appended here -->
            </div>
            <form id="form">
                <div class="input-area">
                    <input type="text" name="text" min="1" id="messageInput" placeholder="Type a message...">
                    <button type="submit">Send</button>
                </div>
            </form>

        </div>
    </div>

</body>

</html>

In the index.html above, we have linked the necessary plugins such as our style.css which will soon be created, HTMX and bootstrap 5.

Here's what the message.html file should look like:

<div id="messages" hx-swap-oob="beforeend">
    <p class="text-small">{{ .Text }}</p>
</div>

This message will be the response from the server, it will be swapped into our index.html code automatically in the browser with the help of HTMX.

Now, create a new folder named static. Inside it, create a new file style.css:

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.chat-window {
    width: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.messages {
    padding: 10px;
    overflow-y: scroll;
    height: 300px;
}

.message {
    margin-bottom: 10px;
}

.message p {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
    max-width: 80%;
}

.input-area {
    padding: 10px;
    display: flex;
}

.input-area input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
}

.input-area button {
    padding: 8px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.input-area button:hover {
    background-color: #45a049;
}

.input-area button:active {
    background-color: #3e8e41;
}

How to Configure Static Files

In your main.go file, you need to tell Fiber how to handle your static files, most especially the folder to check for HTML rendering. Update main.go as follow:

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html/v2"
)

func main() {


    // Create views engine
    viewsEngine := html.New("./views", ".html")


    // Start new fiber instance
    app := fiber.New(fiber.Config{
        Views: viewsEngine,
    })

    // Static route and directory
    app.Static("/static/", "./static")

    // Create a "ping" handler to test the server
    app.Get("/ping", func(ctx *fiber.Ctx) error{
        return ctx.SendString("Welcome to fiber")
    })

    // Start the http server
    app.Listen(":3000")

}

As seen above, a configuration was added to the app instance and also configured the static route to be /static/.

How to Create Handlers

Create a new file named handlers.go:

package handlers

import "github.com/gofiber/fiber/v2"

type AppHandler struct{}

func NewAppHandler() *AppHandler {
    return &AppHandler{}
}

func (a *AppHandler) HandleGetIndex(ctx *fiber.Ctx) error {
    context := fiber.Map{}
    return ctx.Render("index", context)
}

In the code above, we created a handler which received the AppHandler struct. This helps with abstractions in case the code gets bigger. The HandleGetIndex function takes in a pointer to the Fiber context and renders the index.html file.

In main.go:

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html/v2"
    "github.com/steelthedev/go-chat/handlers"
)

func main() {

    // Start new fiber instance
    app := fiber.New()

    // Create a "ping" handler to test the server
    app.Get("/ping", func(ctx *fiber.Ctx) error{
        return ctx.SendString("Welcome to fiber")
    })

    // create new App Handler
    appHandler := NewAppHandler()

    // Add appHandler routes
    app.Get("/, appHandler.HandleGetIndex)

    // Start the http server
    app.Listen(":3000")
}

Above, we created a new app handler and added the HandleGetIndex function in the routes. Run the go run main.go command. On localhost:3000, you should have a screen similar to this:

input box, send button, and chat display area on localhost:3000

messages.go File

Create a new file in the project directly and name it message.go. This file will host the message struct.

package main

type Message struct {
    Text       string `json:"text"`
}

websocket.go File

Create a new file in the project directory and name it websocket.go. This will house the main function creating the WebSocket server, reading through it and writing to all channels:

package main

import (
    "bytes"
    "encoding/json"
    "html/template"
    "log"

    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/websocket/v2"
)

type WebSocketServer struct {
    clients   map[*websocket.Conn]bool
    broadcast chan *Message
}

func NewWebSocket() *WebSocketServer {
    return &WebSocketServer{
        clients:   make(map[*websocket.Conn]bool),
        broadcast: make(chan *Message),
    }
}


func (s *WebSocketServer) HandleWebSocket(ctx *websocket.Conn) {

    // Register a new Client
    s.clients[ctx] = true
    defer func() {
        delete(s.clients, ctx)
        ctx.Close()
    }()

    for {
        _, msg, err := ctx.ReadMessage()
        if err != nil {
            log.Println("Read Error:", err)
            break
        }

        // send the message to the broadcast channel
        var message Message
        if err := json.Unmarshal(msg, &message); err != nil {
            log.Fatalf("Error Unmarshalling")
        }
        s.broadcast <- &message
    }
}

func (s *WebSocketServer) HandleMessages() {
    for {
        msg := <-s.broadcast

        // Send the message to all Clients

        for client := range s.clients {
            err := client.WriteMessage(websocket.TextMessage, getMessageTemplate(msg))
            if err != nil {
                log.Printf("Write  Error: %v ", err)
                client.Close()
                delete(s.clients, client)
            }

        }

    }
}

func getMessageTemplate(msg *Message) []byte {
    tmpl, err := template.ParseFiles("views/message.html")
    if err != nil {
        log.Fatalf("template parsing: %s", err)
    }

    // Render the template with the message as data.
    var renderedMessage bytes.Buffer
    err = tmpl.Execute(&renderedMessage, msg)
    if err != nil {
        log.Fatalf("template execution: %s", err)
    }

    return renderedMessage.Bytes()
}

The HandleWebSocket function adds the client, processes the messages into JSON and then adds the message into a channel for distribution to all clients by HandleMessage.

It also keeps the connection alive. getMessageTemplate basically process the message into the message.html, and then converts it to a byte. This byte can then be sent to the client as a response.

How to Add a WebSocket to Routes and HTMX

We need to add the WebSocket to our routes main.go:

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html/v2"
    "github.com/gofiber/websocket/v2"
    "github.com/steelthedev/go-chat/handlers"
)

func main() {

    // Start new fiber instance
    app := fiber.New()

    // Create a "ping" handler to test the server
    app.Get("/ping", func(ctx *fiber.Ctx) error{
        return ctx.SendString("Welcome to fiber")
    })

    // create new App Handler
    appHandler := NewAppHandler()

    // Add appHandler routes
    app.Get("/, appHandler.HandleGetIndex)

    // create new webscoket
    server := NewWebSocket()
    app.Get("/ws", websocket.New(func(ctx *websocket.Conn) {
        server.HandleWebSocket(ctx)
    }))

    go server.HandleMessages()


    // Start the http server
    app.Listen(":3000")
}

The WebSocket and its route has been added. The final step is to add the HTMX tags on the index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"
        integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
        crossorigin="anonymous"></script>
    <!-- HTMX Websockets extension https://htmx.org/extensions/web-sockets/ -->
    <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <div class="container">
        <div class="chat-window" hx-ext="ws" ws-connect="/ws">
            <div class="messages" id="messages" hx-swap="beforeend" hx-swap-oob="beforeend">
                <!-- Messages will be appended here -->
            </div>
            <form id="form" ws-send hx ">
                <div class="input-area">
                    <input type="text" name="text" min="1" id="messageInput" placeholder="Type a message...">
                    <button type="submit">Send</button>
                </div>
            </form>

        </div>
    </div>

</body>

</html>

The hx-ext tag and ws-connect tag point to the WebSocket URL /ws. The hx-swap tag was used to perform DOM manipulations which adds our messages into the #messages div.

After saving this, run go run main.go. You can open two different browser windows at localhost:3000

two browser windows used for sending and receiving messages

If the WebSocket is running perfectly, you should be able to send and receive messages from the two browsers in real-time as displayed in the picture.

Conclusion

In this tutorial, we have showcased how to create a simple WebSocket server using Go, Fiber and HTMX.

You can go on and improve this project by adding extra features such as ClientID, authentication and user management. You can visit the project repo here: github.com/steelthedev/go-chat

In this article, I'm going to show you how to build a real-time chat app using React.js and Firebase.

In the app, we will allow the user to log in with their Google account using Firebase's Google sign-in Authentication. We will also store and retrieve all the chatroom messages using Firebase's Cloud Firestore.

Prerequisites

You should have Node.js installed on your system. You should also have intermediate knowledge of CSS, JavaScript, and Reactjs. Finally, you should know how to use the command terminal. You do not need to know how to use Firebase.

What is Firebase?

Firebase is a Backend-as-a-Service (Baas). It is a Google-backed app development platform that allows developers to build iOS, Android, and web apps.

It provides tools for tracking analytics, reporting and fixing app crashes, and creating marketing and product experiments. These help developers develop quality apps, grow their user base, and make a profit.

We will be using two of their tools: Firebase Authentication and Cloud Firestore.

Firebase Authentication

Firebase Authentication (SDK) is a Firebase tool that supports different authentication methods like passwords, phone numbers, Google, Facebook, Twitter, Github, and more. In this app, we will be using the Google sign-in Authentication.

Cloud Firestore

Cloud Firestore is a cloud-based NoSQL database server for storing and syncing data. It stores data in documents as key-value pairs, and the documents are organized into collections.

The documents can also have sub-collections, allowing you to nest collections within collections. The data is also synchronized automatically among all devices listening for them.

Now that you have an idea of how Firebase and Cloud Firestore work, let's build our app.

Note: For this article's scope, I have already prewritten the CSS and prebuilt the components for the chat app. You can find the final project code on GitHub and the CSS and components in the setup folder. You can also view the final project with this live link.

How to Create Our React App

Clone this GitHub repo, delete the src folder in the root directory, and replace it with the src folder located in the setup folder.

Alternatively, you can create your React app by running the code in your terminal, npx create-react-app react-chat, to create it. Here, react-chat is the name of the app. Then you can run npm install firebase react-firebase-hooks to install firebase and react-firebase-hooks.

Delete the current src folder and replace it with the one from the setup folder to use the prewritten CSS and prebuilt components. (Optionally, you can write yours yourself.)

Your new src folder now contains the following:

• a components folder with a NavBar component having the Google sign-in and Sign Out button,
• a Welcome component that will be visible to the user not signed in,
• a Chatbox component that will be visible only when the user is signed in,
• the Message component for displaying a user’s message, and
• a SendMessage component so the user can input and send in their messages.

It also has:

• an img folder where the Google Sign-in image for the Sign-in button is stored,
• an App.css file with the prewritten CSS codes,
• the new App.js file with all our components imported into it,
• and the index.js file.

Run npm start to view the app in the browser. Our app should look like this:

Our React app

Now let's create a Firebase account and set up our Firebase project.

How to Set Up the Firebase Project

If you do not have a Firebase account already, you can open one using your Gmail (you can only use google mail). On the landing page, click on Get started and then, Add project.

How to setup a Firebase project

Fill out the Create a project form by providing a project name. If you want Google Analytics enabled for your project, leave it enabled. Otherwise, disable it. After that, click on Create project.

Create a project

Once created, click on Continue.

What you'll see while Firebase is creating your project.

Choose the type of app where you want to add Firebase. For this article, we chose the code icon because we are building a web app.

Choose the type of app to which you want to add Firestore

Enter a nickname for your app and click on Register app.

Register your app

Then select npm, copy the code snippet below it (we will be using it later), and click Continue to console.

Code snippet

How to Set Up Firebase Authentication

To set up Firebase Authentication, go to the menu on the left side of the screen, click on Build, and select Authentication from the dropdown.

Select authentication from dropdown

Click on Get started and select Google in the Sign-in method's tab.

Choose your authentication sign in method

Enable Google, choose your Project support email, and click Save.

How to Set Up Cloud Firestore

Again, go to the menu on the left side of the screen. Click on Build and select Firestore Database from the dropdown. Then click on Create database and fill out the form.

Setting up Cloud Firestore

Select which mode you want your database to run, production or test.

Test mode means that any client will have read/write access to your database for 30 days. Production mode means that no one will have read/write access to your database. You will have to edit your rules to grant access to specific clients.

Chose test mode or production mode (we choose production mode).

Select production mode and click Next.

Select a location where you want your Firestore to be stored and click Enable. It will default to the location closest to you.

Set a location (default is the location closest to you)

Next up, we edit our rules. Click on the Rules tab and edit the rules,

Edit the rules through the Rules tab

Rule to be replaced

Replace the current rule with the code below and click on Publish.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow create, update, delete, write: if request.auth != null;
    }
  }
}

The allow read: if true; means that anyone can read your database. The allow create, update, delete, write: if request.auth != null; means only authenticated clients can create, update, delete, and write to your database.

You can either start to add/create a collection in your database or create one automatically in your React app, which we will do later. If you want to create a collection in Cloud Firestore, go back to the data tab by clicking Data beside Rules and then click on Add Collection.

Enter the collection’s name, for example “messages”, and click Next.

Start a collection in Firestore

Now create a document for the Collection.

Creating a document for the collection

You can either click Auto_ID to generate an id for the doc or enter one yourself.

After that, create the key-value pairs of the Document. The Field input represents the key name, the Type defines what type of data it is (string, number, timesStamp, and so on), and the Value is the value of the key.

You can also add more documents by clicking the plus sign, otherwise, click Save to save your collection.

Our Firebase project is set. Let's go back to our React app.

How to Configure Firebase in React

In our src folder, create a file called firebase.js and paste the code we had copied into it.

Let's also import the getAuth and getFirestore services from Firebase's auth and firestore libraries, respectively, and export them. You can learn more about Firebase's available libraries from their documentation.

Our Firebase config should look like this:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: REACT_APP_API_KEY_GOES_HERE,
  authDomain: REACT_APP_AUTH_DOMAIN_GOES_HERE,
  projectId: REACT_APP_PROJECT_ID_GOES_HERE,
  storageBucket: REACT_APP_STORAGE_BUCKET_GOES_HERE,
  messagingSenderId: REACT_APP_MESSSAGING_SENDER_ID_GOES_HERE,
  appId: REACT_APP_APP_ID_GOES_HERE,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

How to Implement Firebase into our React App

How to Authenticate Users with Their Google Account

We want our users to have access to the chatroom and send messages if logged in. They should see the welcome page if they are not. They should also see the Sign Out button if logged in and the Google Sign-in button if not.

This authentication will be handed within our NavBar component, which holds our sign-in and sign-out buttons.

In our NavBar component, we currently import our Google sign-in image and store it as a const called GoogleSignin. We also have a state called user set to false, a googleSignIn function which sets the user state to true, and a signOut function which sets the user state to false.

We also have a nav element with an h1 tag representing our app's title and two buttons rendered conditionally based on the user's state.

import React, { useState } from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const NavBar = () => {
  const [user, setUser] = useState(false);
  const googleSignIn = () => {
    setUser(true);
  };
  const signOut = () => {
    setUser(false);
  };
  return (
    <nav className="nav-bar">
      <h1>React Chat</h1>
      {user ? (
        <button onClick={signOut} className="sign-out" type="button">
          Sign Out
        </button>
      ) : (
        <button className="sign-in">
          <img
            onClick={googleSignIn}
            src={GoogleSignin}
            alt="sign in with google"
            type="button"
          />
        </button>
      )}
    </nav>
  );
};
export default NavBar;

Let's make changes to the NavBar component. Import the following:

import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

Replace the user state with the code below:

const [user] = useAuthState(auth);

And edit the googleSignIn and signOut functions:

const googleSignIn = () => {
  const provider = new GoogleAuthProvider();
  signInWithRedirect(auth, provider);
};
const signOut = () => {
  auth.signOut();
};

The useAuthState function gets triggered when the user signs in or out, allowing us access to the user’s details. Currently, the user state is null. Once they are logged in, the user state will change to the data provided by the authentication method – in this case, Google.

In the googleSignIn function, we let Firebase know that the user wants to sign in with Google using the GoogleAuthProvider(). It also redirects them to Google’s sign-in page.

After the user successfully signs in, their data is saved in auth, and the user is redirected to our app. The signOut function clears the auth data, returning it to null. The new user state also determines which authentication buttons are rendered to the user.

Let's also add authentication to our App.js file. Import the following:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";

Add the new user state so we can use it to render the Welcome component if the user is not logged in or the Chatbox component if the user is logged in.

const [user] = useAuthState(auth);

The final code looks like this:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import "./App.css";
import NavBar from "./components/NavBar";
import ChatBox from "./components/ChatBox";
import Welcome from "./components/Welcome";

function App() {
  const [user] = useAuthState(auth);
  return (
    <div className="App">
      <NavBar />
      {!user ? <Welcome /> : <ChatBox />}
    </div>
  );
}
export default App;

Testing our new sign-in and sign-out functions, we see the following:

App demo

Now let's do the same for our Welcome Component, which currently has the following code:

import React from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const Welcome = () => {
  const googleSignIn = () => {};

  return (
    <main className="welcome">
      <h2>Welcome to React Chat.</h2>
      <img src="/logo512.png" alt="ReactJs logo" width={50} height={50} />
      <p>Sign in with Google to chat with with your fellow React Developers.</p>
      <button className="sign-in">
        <img
          onClick={googleSignIn}
          src={GoogleSignin}
          alt="sign in with google"
          type="button"
        />
      </button>
    </main>
  );
};
export default Welcome;

We import the following:

import { auth } from "../firebase";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

and also edit the googleSignIn function:

const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
};

Now we can also log in from the second Sign in button:

Updated app demo

How to Send and Store Messages in Firebase

Currently, we are displaying a dummy message from our Message Component, and the Send button also does not perform any action. When the user inputs a message and hit the Send button, we want the message to be seen immediately in the chatroom.

With our current SendMessage component having the code below, let's edit it:

import React from "react";

const SendMessage = () => {
  return (
    <form className="send-message">
      <label htmlFor="messageInput" hidden>
        Enter Message
      </label>
      <input
        id="messageInput"
        name="messageInput"
        type="text"
        className="form-input__input"
        placeholder="type message..."
      />
      <button type="submit">Send</button>
    </form>
  );
};
export default SendMessage;

First, we import useState from React, auth and db from our firebase configuration file, and addDoc, collection and serverTimestamp from the Firestore library.

import React, { useState } from "react";
import { auth, db } from "../firebase";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";

We create a state called message which is initially set to an empty string and passed as a value to the input tag. An onChange function is also added to the input, which sets the message state to whatever the user types in.

const SendMessage = () => {
  const [message, setMessage] = useState("");

  return (
    <form className="send-message">
      <input
        ...
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
};

We also create a function called sendMessage, and we add an onSubmit attribute to our form, which runs the sendMessage function when the user clicks on Send. Note that the button must have type="submit" for the onSubmit attribute to work.

 const sendMessage = async (event) => {
    event.preventDefault();
    if (message.trim() === "") {
      alert("Enter valid message");
      return;
    }
    const { uid, displayName, photoURL } = auth.currentUser;
    await addDoc(collection(db, "messages"), {
      text: message,
      name: displayName,
      avatar: photoURL,
      createdAt: serverTimestamp(),
      uid,
    });
    setMessage("");
  };

  return (
    <form onSubmit={(event) => sendMessage(event)} className="send-message">
...

The sendMessage function is an async function. It first checks if the user is trying to send an empty string or whitespace as a message and alerts the user.

If the message is not an empty string, it gets the user’s uid, displayName, and photoURL from the auth data provided when they log in. This corresponds to the user’s unique id, full name, and photo URL, respectively.

Once that is done, it then uses the addDoc() to create a document inside a collection called messages in our database, which we have access to via the db import. If the collection doesn't exist, it will create it for us.

It also creates key-value pairs, storing our message in text, displayName in name, storing the time the message was saved in our database in createdAt, and then the user’s uid.

These key-value pairs are what make up the data for our document. After this is done, it then resets the message state to an empty string.

How to Retrieve Messages from Our Database

After sending the user's message, we need to display it on the screen to the user. Going into our ChatBox component, we import the following:

import { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";

We create a useEffect hook that will run anytime changes are made in the chatroom, like sending or deleting a message.

useEffect(() => {
  const q = query(
    collection(db, "messages"),
    orderBy("createdAt", "desc"),
    limit(50)
  );
  const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
    const fetchedMessages = [];
    QuerySnapshot.forEach((doc) => {
      fetchedMessages.push({ ...doc.data(), id: doc.id });
    });
    const sortedMessages = fetchedMessages.sort(
      (a, b) => a.createdAt - b.createdAt
    );
    setMessages(sortedMessages);
  });
  return () => unsubscribe;
}, []);

In this useEffect hook, we have a const q, a Firebase query that queries our database looking for a message collection. It then orders the documents in the collection based on the createdAt key, and returns a maximum of 50 documents (messages saved).

The unsubscribe const represents the onSnapshot function which listens to changes in the document. It has an empty array called messages.

The forEach loop loops through all the documents from the collection and saves the data in the new array. It then sets the initial messages array to the new messages array.

We also use a map function on our messages array to render each message/document data in our Message component.

{messages?.map((message) => (
  <Message key={message.id} message={message} />
))}

The final code looks like this:

import React, { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";
import Message from "./Message";
import SendMessage from "./SendMessage";

const ChatBox = () => {
  const [messages, setMessages] = useState([]);
  const scroll = useRef();

  useEffect(() => {
    const q = query(
      collection(db, "messages"),
      orderBy("createdAt", "desc"),
      limit(50)
    );

    const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
      const fetchedMessages = [];
      QuerySnapshot.forEach((doc) => {
        fetchedMessages.push({ ...doc.data(), id: doc.id });
      });
      const sortedMessages = fetchedMessages.sort(
        (a, b) => a.createdAt - b.createdAt
      );
      setMessages(sortedMessages);
    });
    return () => unsubscribe;
  }, []);

  return (
    <main className="chat-box">
      <div className="messages-wrapper">
        {messages?.map((message) => (
          <Message key={message.id} message={message} />
        ))}
      </div>
      {/* when a new message enters the chat, the screen scrolls down to the scroll div */}
      <span ref={scroll}></span>
      <SendMessage scroll={scroll} />
    </main>
  );
};

export default ChatBox;

Going into our Message component, let's render the data passed into it in our browser.

import React from "react";
import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
const Message = ({ message }) => {
  const [user] = useAuthState(auth);

  return (
    <div
      className={`chat-bubble ${message.uid === user.uid ? "right" : ""}`}>
      <img
        className="chat-bubble__left"
        src={message.avatar}
        alt="user avatar"
      />
      <div className="chat-bubble__right">
        <p className="user-name">{message.name}</p>
        <p className="user-message">{message.text}</p>
      </div>
    </div>
  );
};
export default Message;

We imported auth and useAuthState, and stored the user details in user. We deconstructed the messages prop and passed the avatar into the img src attribute. We also replaced the dummy name and message with the one gotten from the message data.

We also conditioned a CSS style to take effect based on the uid of the message's author. So if the message’s author uid is the same as the uid of the person logged in, then the CSS styles stored in the selector right should be added to the div. Otherwise, no new style should be added.

Currently, all messages are positioned to the left, so if the logged user is the message’s author, their message should be positioned to the right. Let's view these changes in our browser:

Updated app demo

The message is sent and stored in our database. Then all the messages are retrieved, and the chatroom is updated in real-time with the new messages.

The name and avatar of the user are also present on the message card. But we can also see that the chat doesn't scroll to the bottom when a new message enters. Let's fix that.

How to Add Scroll to the Bottom

Going into our ChatBox.js, we import the useRef hook and create a const called scroll:

import React, { useEffect, useRef, useState } from "react";
...
const scroll = useRef();

We then create a span element with a ref attribute whose value is scroll, and also pass the scroll into our Messages component:

<main className="chat-box">
   ...
   {/* when a new message enters the chat, the screen scrolls dowwn to the scroll div */}
   <span ref={scroll}></span>
   <SendMessage scroll={scroll} />
</main>

We then go into the Messages component, access the scroll const, and add scroll.current.scrollIntoView({ behavior: "smooth" }) to the bottom of our sendMessage function.

This code tells the browser to let the scroll span be in view in the browser after sending a message. That is why the span tag was placed at the bottom of all the messages.

const SendMessage = ({ scroll }) => {

  const sendMessage = async (event) => {
   ...
    setMessage("");
    scroll.current.scrollIntoView({ behavior: "smooth" });
  };
  ...
};

Going back to the browser, we should see the chat scroll to the bottom when the user sends in a new message.

Demo showing chat scrolling to the bottom with a new message

How to Add Authorized Domains

When deploying our React app, it's essential to add our domain to the list of authorized domains in Firebase. This step ensures that our app communicates with the Firebase services correctly. Here's how you can do it:

In the Firebase console, navigate to the Authentication section from the left sidebar and click on the Settings tab. Scroll down to the Authorized Domains section, then click on the Add Domain button. Add the domain or domains that your React app will be deployed on.

For example, if you are deploying your app to https://my-react-chat-app.com, enter my-react-chat-app.com as an authorized domain. Click the Add button to apply the changes.

By adding your app's domain to the authorized domains list, you grant permission for Firebase services to be accessed from that domain. Without adding the domain, you may encounter errors when trying to establish connections or perform operations with Firebase.

Wrapping Up

And that's it on building a real-time chat app. Congrats!

In this tutorial, we learned how to use Firebase and React to build a real-time chat app. We also authenticated the users using Firebase Authentication’s Google sign-in method and stored the chat room messages in a database using Cloud Firestore. We also learned how to use some of Firebase’s services and libraries.

You can find the code for this project on GitHub, and you can explore the chat room using this live link.

If you enjoyed this article, consider sharing it to help other developers. You could also visit my blog to read more articles from me and you can connect with me on Twitter and LinkedIn.

Till next time guys, byeeeeee!

The recent release of GPT 3.5, and specifically the very new ChatGPT tool, is definitely a huge leap forward.

You may have read about people asking the AI to draw up real estate contracts and wills, and even generate programming code. This article approaches the tool from a slightly different perspective.

You can watch a video version of this article here if you'd like to use it to supplement your learning:

Experimenting with ChatGPT and Bash Scripting

I decided to see how ChatGPT handles Linux Bash scripting. But (spoiler alert!) as I worked through the tool's suggestions - both good code and bad code - I began to realize that there was an even more powerful benefit staring me in the face: an opportunity to pair-program with an eminently helpful partner.

The AI ultimately failed to solve my problem, but the way it failed was absolutely fascinating. And watching the AI searching for new answers was absolutely crazy.

First Attempt – ChatGPT Tries to Solve the Problem

So let's see how it all happened. Here, more or less, is the initial prompt I provided to the AI:

Write me a Bash script that prompts for the URL of a YouTube video and then uses the yt-dlp program to download from that URL. The script should then change the file name to "myvideo.mp4"

After a few seconds, the ChatGPT told me that a script was coming. Here's how that code looked:

#!/bin/bash

# Prompt user for YouTube video URL
read -p "Enter YouTube video URL: " url

# Download video from YouTube using yt-dlp
yt-dlp $url

# Get the name of the downloaded video file
yt-dlp $url

# Change the downloaded video filename to "myvideo.mkv"
mv video-filename.mp4 myvideo.mp4

The AI obviously knows what Bash scripts are and how to present code. It even did a great job commenting each line of code. The AI knows how to properly prompt the user for input and then how to import the input string into a variable called url.

It also knows about the yt-dlp program and how it works, appropriately feeding it the URL that was provided. Then it at least attempted to rename the downloaded video file to myvideo.mp4. But everything kind of broke down when it assumed that the download filename would be video-filename.mp4. Whoops.

At any rate, the AI helpfully showed me how to create the script from its code and then run it.

Second Attempt – ChatGPT Corrects Itself

My first follow-up prompt pointed out the obvious mistake and, after a few seconds, ChatGPT admitted it was wrong and offered an improvement.

You're right, the script I provided would not work as expected because it assumes that the downloaded video will be saved to a file with the name video-filename.mp4. However, this is not guaranteed to be the case. To fix this...

It's just mind-blowing how the AI is completely engaged in the process here. It remembers its first code, listens to and understands my complaint, and thinks through a solution. Here's that second attempt:

#!/bin/bash

# Prompt user for YouTube video URL
read -p "Enter YouTube video URL: " url

# Download video from YouTube using yt-dlp
yt-dlp $url

# Get the name of the downloaded video file
filename=$(basename $url)

# Change the downloaded video filename to "myvideo.mkv"
mv $filename.mp4 myvideo.mp4

Ok, so I can see how the solution kind of looked right. basename is a Linux tool that can strip out file system directories and leave nothing but the actual filename.

The problem is that the variable url doesn't contain a local filename, but an internet address. This one definitely isn't going to work.

Third Attempt – ChatGPT Tries Again

So I tried again, explaining how that wasn't the right tool for the job. And ChatGPT gives it another try.

#!/bin/bash

# Prompt user for YouTube video URL
read -p "Enter YouTube video URL: " url

# Extract the filename from the URL
filename=$(basename $url)

# Download the video using the yt-dlp tool and specify the filename
yt-dlp -o $filename $url

# Change the downloaded video filename to "myvideo.mkv"
mv $filename.mp4 myvideo.mp4

This time, it shows that it had familiarized itself with the yt-dlp documentation, suggesting that we use the -o argument to give the downloading video a name, against which basename should now work. With each iteration, the AI gives me this updated code for my cutting and pasting pleasure.

Of course, that wasn't going to work either. With the next attempt, I get the feeling that the AI is a bit desperate.

If At First You Don't Succeed...At Least You'll Learn Something

I'm going to skip past the next attempt or two, as we ran into a side problem: Videos coming from YouTube aren't always MP4s, they're sometimes MKVs or even WEBMs. That uncertainty could mess with the filenames we're working with, so I asked ChatGPT to work that into the code.

#!/bin/bash

# Prompt user for YouTube video URL
read -p "Enter YouTube video URL: " url

# Extract the filename from the URL
filename=$(basename $url)

# Download the video using the yt-dlp tool and specify the filename
yt-dlp -F mp4 -O $filename $url

# Change the downloaded video filename to "myvideo.mkv"
mv $filename.mp4 myvideo.mp4

When I reported how that, too, wouldn't work, the AI started to get confused. First it told me that the -F option was expecting a valid video format, but that "mp4" wasn't valid. Then it gives me valid options, including "mp4".

When nothing the AI suggested worked, it gave up, advising me to make sure that yt-dlp was actually installed on my machine and showing me how to do that.

I figured that was a good time to give up. It was a surprisingly good effort and, even if it didn't solve the problem, it did show me some useful syntax and got me thinking.

In case you're interested, by the way, here's how an actual working script would look.

#!/bin/bash

# Prompt user for YouTube video URL
read -p "Enter YouTube video URL: " url

# Download video from YouTube using yt-dlp
yt-dlp $url

# Get the name of the downloaded video file
original_filename=$(ls | awk '/mp4/ || /webm/ || /mkv/')

# Change the downloaded video filename to "myvideo.mkv"
mv "$original_filename" /home/ubuntu/vids/myvideo.mp4

The first two lines of code are just the way ChatGPT suggested. But I then isolate the filename by listing all the files in the current directory and using awk to filter for only filenames containing either mp4, webm, or mkv. (This assumes that there will never be more than one video file in the directory at a time.)

The filename will then be written to the original_filename variable. I'll then use that variable as part of a move command to rename the file myvideo.mp4 As far as I can tell, that'll work no matter what format was actually sent.

Wrapping Up

Artificial intelligence might not be quite ready for real-world programming tasks today, but I wouldn't want to bet against it getting there tomorrow...or some time next year.

In the meantime though, I would absolutely recommend engaging with tools like ChatGPT whenever you're faced with a challenging programming task.

Two minds are (almost) always better than one.

Besides my my YouTube channel (to which you can subscribe), my website links to all kinds of technology goodness available as articles, books, and courses.

Discord has to update often because the Discord team implements new features and bug fixes regularly.

In addition, the app itself must load new messages from chat rooms and DMs. Once the update fails, Discord gets stuck in an update failed loop.

In this guide, I will show you 4 ways you can fix the Discord update failed error on a Windows 10 computer.

What We'll Cover

• Double-check your Internet Connection
• Run Discord as an Administrator
• Rename Discord’s Update.exe File
• Temporarily Disable your Antivirus Program and VPN
• Uninstall and Reinstall Discord
• Conclusion

Solution 1: Double-check your Internet Connection

The first thing I would suggest you do is to check your internet connection.

That’s because Discord needs an internet connection to update, as the update has to be done over the internet. Once there’s no internet connection, the update won’t happen.

Make sure your Windows 10 PC is connected to the internet and the internet connection is strong enough.

Solution 2: Run Discord as an Administrator

A common solution to this issue is to run the Discord app as an admin.

This could fix the issue because any app you want to install needs admin privileges. Discord is not an exception, so granting it admin privileges can make it dig deeper into the issue and resolve it.

To run Discord as administrator, search for Discord and select Run as Administrator on the right:

Solution 3: Rename Discord’s Update.exe File

There’s a separate executable for updating Discord. This is the update.exe file in the Discord folder.

Renaming this file can force Discord to download a fresh one and subsequently fix the issue for you.

Follow these steps to rename Discord’s update.exe file Press WIN (Windows logo key) + R on your keyboard and type in %localappdata%.

Look for the Discord folder and open it.

Right-click on the Update.exe file and select rename. Then rename it to something like “Updater.exe”. You must not change the extension.

Open the app again and see if the problem gets fixed.

Solution 4: Temporarily Disable your Antivirus Program and VPN

Antivirus programs and VPNs are known for interfering with the normal functioning of computers and internet connections. So if you have one or both of them on your PC, it might be stopping Discord from updating.

To disable your antivirus and VPN, open Task Manager, right-click on WIN (Windows logo key) and select Task Manager.

Under processes, right-click on Discord and select “End Task”.

Solution 5: Uninstall and Reinstall Discord

If the solutions already discussed fail to work for you, the last resort is to uninstall Discord and reinstall it.

Step 1: Head over to Control Panel and select Uninstall a Program.

Step 2: Look for Discord, right-click on it and select uninstall.

Step 3: To completely remove Discord, press WIN + R on your keyboard, type %localappdata%, and click OK.

Step 4: Right-click on the Discord folder and select Delete.

Step 4: Download Discord again and install it.

Conclusion

I hope the solutions discussed above help you get Discord to update so you can start using it again.

Thank you for reading.

In a real-time chat application, the recipient can view the sender’s message almost immediately. This can either be in a one-on-one conversation between two parties or a group conversation.

And that's what we're going to build in this tutorial. For this application, we will be using Nuxt, the intuitive Vue framework.

Now that we know what we’re going to be building and the technology we’ll be using, let’s go over the chat API we’ll be using.

For this article, we’ll be going with Robin because of its minimal UI and how easy it is to integrate into our app. With that out of the way, let’s get started.

Step 1 – Create the Nuxt App

First, we need to create the Nuxt app with any of the following commands:

yarn create nuxt-app nuxt-chat-app
// OR
npx create-nuxt-app nuxt-chat-app
// OR
npm init nuxt-app nuxt-chat-app

Step 2 – Create a Robin Account

Now that our app is ready, we need to have a Robin account before we can use it. Head over to Robin’s signup page to create a 30-day free trial account.

Robin notifies you 7 days after you've created the account and you can remove your card before the billing date.

After filling out the signup form, you’ll be redirected to a billing page to fill in your card information. On the next page where it redirects you, Robin requests the name of the app you want to create and its authentication type. Feel free to use any name of your choice and either of the auth options.

Step 3 – Get Your Robin Credentials

Now that we have created an app on our Robin dashboard, there is something you should take note of. There are a couple of credentials you need when using Robin in your Nuxt app:

• API key,
• User token,
• User name,
• Users, and
• Keys

Let’s go over each of them individually.

• API key: Robin automatically creates the API key when you create an app. You can retrieve it from either the getting started or the API config page on your dashboard. It is unique for every application.
• User token: The user token is a unique identifier for every user of your Robin app. The token that should be passed to this property is yours since you’re the one using the app on your site. However, it is to be created by you, the user, typically on the server, and then used on the client side.
• User name: The User name is the name of the current user of your Robin app. In this case, it will be your name. If you wanted someone else to include your Robin chat on their site or web app (i.e another user of your Robin app), it should be their name.
• Users: Users is a list of the users on your Robin app. It usually contains their user tokens, profile images, and user names.
• Keys: This fundamentally exists to help us be flexible in describing the user tokens, profile images, and user names in our users list. Here’s an example. If our keys object looks like this:

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
}

Then our users array should describe the users’ tokens, profile images, and names with the values in the keys object.

Regardless of the users that would be using your Robin App, Robin requires a userToken, profileImage and a userName from them. Robin requires this for the display name and to identify each message sender and receiver uniquely on the platform.

users: [
  {
    'user_token': 'ABCDEF098765GH',
    'profile_image': 'https://url-to-image',
    'user_name': 'Article Reader'
  }
]

Step 4 – Install Robin in Your Nuxt App

Since we have everything we’ll need, we can go ahead and install Robin.

npm i robin-vue
// OR
yarn add robin-vue

Step 5 – Setup the Robin Plugin

In your plugins directory, create a robin.js file with the plugin setup:

import Vue from 'vue'
import RobinChat from 'robin-vue'
import 'robin-vue/dist/style.css'

Vue.use(RobinChat)

Note that we import the CSS because the RobinChat component does not include any CSS itself.

Step 6 – Register the Plugin

The plugins property in the nuxt.config.js file is to let our Nuxt app know about the plugins that it should use. So if we don’t include our Robin plugin there, it won’t be available in our app.

export default {
  // ...
  plugins: [
    { src: '~/plugins/robin.js', mode: 'client' }
  ]
}

Step 7 – Use the Plugin

Now what’s left is for us to include the RobinChat component anywhere in our app and pass those credentials we discussed earlier as props.

Once again, the credentials are:

• API key,
• User token,
• User name,
• Users, and
• Keys

In this list, what we currently don’t have is our user token and the tokens of the users on our app.

Recall that these tokens are usually created on the server. But we don’t have the luxury of that. So we can go ahead and create them with the help of Robin’s JavaScript SDK. The Vue SDK we previously installed depends on this JavaScript SDK. So we don’t need to install it since it already exists in our app.

How to Create the User Tokens

We can go ahead and create the tokens in the page we're going to include the chat UI. Because it’s for learning purposes, we can go ahead and create tokens for 5 users, ourselves included. We need to come up with usernames for each of them.

<template>
  <!-- ... -->
</template>


<script>
export default {
  data () {
    return {
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ],
    }
  }
}
</script>

Note that the keys in every user object in the users array have to be defined in the keys object that we’ll be passing as a prop to the Robin component.

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
},

Next, we use the SDK’s createUserToken() function to create the tokens after creating a Robin instance, as it says in Robin’s docs.

<template>
  <!-- ... -->
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        // ...
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin('API_KEY', true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
    }
  }
}
</script>

How to Use Credentials on the RobinChat Component

We now have everything we need to display the Robin chat UI on our app. Whew!
We can now go ahead and use the tokens and the other credentials.

<template>
  <!-- ... -->
  <RobinChat
    v-if="tokensAreAvailable"
    :api-key="apiKey"
    :user-token="users[0].user_token"
    user-name="Idorenyin Udoh"
    :keys="keys"
    :users="users"
  />
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      tokensAreAvailable: false,
      apiKey: 'API_KEY',
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin(this.apiKey, true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
      this.tokensAreAvailable = true
    }
  }
}
</script>

Note that we only display the RobinChat component when all the users’ tokens are available to avoid errors.

This is what the result looks like:

The app is available here.

Note that I used previously-created user tokens for this app because you wouldn’t be able to view messages if tokens are created every time the app loads. Permanent tokens are what make the messages on Robin persist.

Also, I created another app for the user Ayo. You can check it out too. This way, you can test the real-time communication between Idorenyin and Ayo.

Conclusion

You just learned how to implement real-time communication on a Nuxt application with Robin.

The ease of integration makes it super fast to implement a chat system in your app and focus on building/maintaining it.

If you make sure to create your users’ tokens on the server, then implementing the integration on the frontend wouldn't be too hard.

Happy building!

This will be a great project to learn how to put together fullstack apps, and how to create an app where the backend can communicate with the frontend in real time.

Normally, using HTTP requests, the server cannot push data to the client in real time. But using Socket.io, the server is able to push real time information to the client about some events that happened on the server.

The app that we'll be building will have two pages:

A join-a-chat-room page:

And a chat-room page:

Here's what we'll be using to build this app:

• Frontend: React (A frontend JavaScript framework for building interactive applications)
• Backend: Node and Express (Express is very popular NodeJS framework that allows us to easily create APIs and backends)
• Database: HarperDB (a data + application platform that allows you to query data using either SQL or NoSQL. HarperDB also has a built-in API, saving us from having to write a lot of backend code)
• Realtime communication: Socket.io (see below!)

Here is the source code (remember to give it a star ⭐).

Table of Contents

1. What is Socket.io?
2. Project Setup
3. How to Build the "Join a Room" Page
4. How to Set Up the Server
5. How to Create our First Socket.io Event Listener on the Server
6. How Rooms Work in Socket.io
7. How to Build the Chat Page
8. How to Create the Messages Component (B)
9. How to Create a Schema and Table in HarperDB
10. How to Create the Send Message Component (C)
11. How to Set Up HarperDB Environment Variables
12. How to Allow Users to Send Messages to Each Other with Socket.io
13. How to Get Messages from HarperDB
14. How to Display the Last 100 Messages on the Client
15. How to Display the Room and Users (A)
16. How to Remove a User from a Socket.io Room
17. How to Add the Socket.io Disconnect Event Listener

What is Socket.IO?

Socket.IO allows the server to push information to the client in real time, when events occur on the server.

For example, if you were playing a multiplayer game, an event could be your "friend" scoring a spectacular goal against you.

With Socket.IO, you'd know (almost) instantly about conceding a goal.

Without Socket.IO, the client would have to make multiple polling AJAX calls to verify that the event has occurred on the server. For example, the client could use JavaScript to check for an event on the server every 5 seconds.

Socket.IO means that the client doesn't have to make multiple polling AJAX calls to verify if some event has occurred on the server. Instead, the server sends the info to the client as soon as it gets it. Much better. 👌

So, Socket.IO allows us to easily build real time applications, such as chat apps and multiplayer games.

Project Setup

1. How to set up our folders

Start a new project in your text editor of choice (VS Code for me), and create two folders at the root called client and server.

We will create our frontend React application in the client folder, and our Node/Express backend in the server folder.

2. How to install our client dependencies

Open up a terminal in the root of the project (in VS Code, you can do this by pressing Ctrl+' or by going to terminal->new terminal)

Next, we will install React into our client directory:

$ npx create-react-app client

After React has installed, change directories into the client folder, and install the following dependencies:

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom will allow us to set up routes to our different React components – essentially creating different pages.

Socket.io-client is the client version of socket.io, that allows us to "emit" events to the server. Once received by the server, we can use the server version of socket.io to do stuff like sending messages to users in the same room as the sender, or join a user to a socket room.

You will gain a better understanding of this later when we come to implement these ideas with code.

3. How to boot up the React app

Let's check to make sure everything is working by running the following command from the client directory:

$ npm start

Webpack will build the React app and serve it to http://localhost:3000:

Let's now set up our HarperDB database that we will use to permanently save messages sent by users.

How to set up HarperDB

First, create an account with HarperDB.

Then create a new HarperDB cloud instance:

To make things easy, select the cloud instance:

Select the cloud provider (I chose AWS):

Name your cloud instance, and create your instance credentials:

HarperDB has a generous free tier that we can use for this project, so select that:

Check your details are correct, then create the instance.

It will take a few minutes to create the instance, so let's crack on and make our first React component!

How to Build the "Join a Room" Page

Our homepage is going to end up looking like this:

The user will enter a username, select a chat room from the dropdown, then click "Join Room". The user will then be taken to the chat room page.

So, let's make this homepage.

1. How to create the HTML form and add styles

Create a new file at src/pages/home/index.js.

We will add basic styling to our app using CSS modules, so create a new file: src/pages/home/styles.module.css.

Our folder structure should now look like this:

Now let's create the basic form HTML:

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    <div className={styles.container}>
      <div className={styles.formContainer}>
        <h1>{`<>DevRooms</>`}</h1>
        <input className={styles.input} placeholder='Username...' />

        <select className={styles.input}>
          <option>-- Select Room --</option>
          <option value='javascript'>JavaScript</option>
          <option value='node'>Node</option>
          <option value='express'>Express</option>
          <option value='react'>React</option>
        </select>

        <button className='btn btn-secondary'>Join Room</button>
      </div>
    </div>
  );
};

export default Home;

Above, we have a simple text input to capture the username, and a select dropdown with some default options for the user to select a chat room to join.

Let's now import this component into App.js, and set up a route for the component using the react-router-dom package. This will be our home page, so the path will just be "/":

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route path='/' element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Now let's add some base styles to make our app look more presentable:

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

Let's also add the styles specific to our home page component:

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

Let's also make the "Join Room" button full width by adding a style attribute:

// client/src/pages/home/index.js

<button className='btn btn-secondary' style={{ width: '100%' }}>Join Room</button>

Our home page is now looking solid:

2. How to add functionality to the Join Room form

Now we have a basic form and styling, so it's time to add some functionality.

Here's what we want to happen when the user clicks the "Join Room" button:

1. Check that the username and room fields are filled in.
2. If so, we emit a socket event to our server.
3. Redirect the user to the Chat page (which we will create later).

We are going to need to create some state to store username and room values. We also need to create a socket instance.

We could create these states directly within our home component, but our Chat page will also need access to username, room and socket. So we will lift the state up to App.js, where we can then pass these variables down to both the Homepage and Chat page components.

So, let's create our state and set up a socket in App.js, and pass these variables down as props to the component. We'll also pass the set state functions so we can alter state from :

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username} // Add this
                setUsername={setUsername} // Add this
                room={room} // Add this
                setRoom={setRoom} // Add this
                socket={socket} // Add this
              />
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

We can now access these props in our Home Component. We will use destructuring to get the props:

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

When the user types their username or selects a room, we need to update the username and room state variables:

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    <div className={styles.container}>
      // ...
        <input
          className={styles.input}
          placeholder='Username...'
          onChange={(e) => setUsername(e.target.value)} // Add this
        />

        <select
          className={styles.input}
          onChange={(e) => setRoom(e.target.value)} // Add this
        >
         // ...
        </select>

        // ...
    </div>
  );
};

export default Home;

Now we are capturing the data entered by the user, we can create a joinRoom() callback function for when the user clicks the "Join Room" button:

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {

  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    <div className={styles.container}>
      // ...

        <button
          className='btn btn-secondary'
          style={{ width: '100%' }}
          onClick={joinRoom} // Add this
        >
          Join Room
        </button>
      // ...
    </div>
  );
};

export default Home;

Above, when the user clicks the button, a socket event called _joinroom is emitted, along with an object containing the user's username and selected room. This event will be received by our server a little later on where we will do some magic.

To finish our home page component, we need to add a redirect at the bottom of our joinRoom() function to take the user to the /chat page:

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Add this

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Add this

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirect to /chat
    navigate('/chat', { replace: true }); // Add this
  };

 // ...

Test it out: type a username and select a room, then click Join Room. You should be taken to the route http://localhost:3000/chat – currently an empty page.

But before we create our Chat Page frontend, let's get some stuff running on the server.

How to Set Up the Server

On the server, we are going to listen out for socket events emitted from the frontend. Currently, we only have a join_room event being emitted from React, so we will add this event listener first.

But before that, we need to install our server dependencies and get the server up and running.

1. How to install the server dependencies

Open up a new terminal (in VS code: Terminal->New Terminal), change directory into our server folder, initialise a package.json file, and install the following dependencies:

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

• Axios is a commonly used package to easily make requests to APIs.
• Cors allows our client to make requests to other origins – necessary for socket.io to work properly. See What is CORS? if you haven't heard of CORS before.
• Express is a NodeJS framework that allows us to write our backend more easily with less code.
• Socket.io is a library that allows the client and server to communicate in realtime – which isn't possible with standard HTTP requests.
• Dotenv is a module that allows us to store private keys and passwords safely, and load them into our code when needed.

We will also install nodemon as a dev dependency, so we don't have to restart our server every time we make a change to the code – saving us time and energy:

$ npm i -D nodemon

2. How to boot up our server

Create a folder called index.js in the root of our server directory, and add the following code to get a server up and running:

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

Open up the package.json file on our server, and add a script that will allow us to use nodemon in development:

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

Now, let's boot up our server by running the following command:

$ npm run dev

We can quickly check that our server is running correctly by adding a get request handler:

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

// Add this
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'Server is running on port 3000');

Now go to http://localhost:4000/:

Our server is up and running. It's now time to do some server-side Socket.io stuff!

How to Create our First Socket.io Event Listener on the Server

Remember when we emitted a _joinroom event from the client? Well, we are soon going to be listening for that event on the server and adding the user to a socket room.

But first, we need to listen out for when a client connects to the server via socket.io-client.

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Add this

app.use(cors()); // Add cors middleware

const server = http.createServer(app); // Add this

// Add this
// Create an io server and allow for CORS from http://localhost:3000 with GET and POST methods
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // We can write our socket event listeners in here...
});

server.listen(4000, () => 'Server is running on port 3000');

Now, when the client connects from the frontend, the backend captures the connection event, and will log User connected with the unique socket id for that particular client.

Let's test if the server is now capturing the connection event from the client. Go to your React app at http://localhost:3000/ and refresh the page.

You should see the following log in your server terminal console:

Awesome, our client has connected to our server via socket.io. Our client and server can now communicate in real time!

How Rooms Work in Socket.io

From the Socket.io docs:

"A room is an arbitrary channel that sockets can join and leave. It can be used to broadcast events to a subset of clients."

So, we can join the user to a room, and then the server can send messages to all users in that room – allowing users to send messages to each other in real time. Cool!

How to join the user to a Socket.io room

Once the user has connected via Socket.io, we can add our socket event listeners on the server to listen for events emitted from the client. Also, we can emit events on the server, and listen for them on the client.

Let's now listen for the _joinroom event, capture the data (username and room), and add the user to a socket room:

// server/index.js

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add this
  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room
  });
});

How to send a message to users in a room

Let's now send a message to all users in the room, apart from the user that just joined, to notify them that a new user has joined:

// server/index.js

const CHAT_BOT = 'ChatBot'; // Add this
// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {
    const { username, room } = data; // Data sent from client when join_room event emitted
    socket.join(room); // Join the user to a socket room

    // Add this
    let __createdtime__ = Date.now(); // Current timestamp
    // Send message to all users currently in the room, apart from the user that just joined
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Above, we are emitting a receive_message event to all clients in the room the current user has just joined, along with some data: the message, username who sent the message, and the time the message was sent.

We will add an event listener in our React application a little later to capture this event, and output the message on the screen.

Let's also send a welcome message to the newly-joined user:

// server/index.js

io.on('connection', (socket) => {
  // ...

    // Add this
    // Send welcome msg to user that just joined chat only
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

When we add a user to a Socket.io room, Socket.io only stores the socket ids for each user. But we will need the usernames of everyone in the room, as well as the room name. So, let's store that data in variables on the server:

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Add this
let chatRoom = ''; // E.g. javascript, node,...
let allUsers = []; // All users in current chat room

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
    // ...

    // Add this
    // Save the new user to the room
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

Above, we are also sending an array of all the chatRoomUsers back to the client via the _chatroomusers event, so we can list all the usernames in the room on the frontend.

Before we add any more code to our server, let's go back to our frontend and create the Chat page – so we can test out if we are receiving the _receivemessage events.

How to Build the Chat Page

In your client folder, create two new files:

1. src/pages/chat/index.js
2. src/pages/chat/styles.module.css

Let's add some styles that we'll use in our chat page and components:

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

Now, let's see what our Chat page will end up looking like:

Adding all of the code and logic for this page in one file could get confusing and difficult to manage, so let's take advantage of the fact that we are using an awesome frontend framework (React) and split our page into components:

The chat page components:

A: Contains the room name, a list of users in that room, and a "Leave" button that removes the user from the room.

B: The sent messages. Upon initial render, the last 100 messages sent in that room will be fetched from the database and shown to the user.

C: An input and button to type and send a message.

We will first create component B, so we can display messages to the user.

How to Create the Messages Component (B)

Create a new file at src/pages/chat/messages.js and add the following code:

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    <div className={styles.messagesColumn}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

Above, we have a useEffect hook that runs whenever a socket event is received. We then get the message data passed into the _receivemessage event listener. From there, we set the messagesReceived state, which is an array of message objects containing the message, username of the sender, and the date the message was sent.

Let's import our new messages component into the Chat page, and then create a route for the Chat page in App.js:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
      </div>
    </div>
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username}
                setUsername={setUsername}
                room={room}
                setRoom={setRoom}
                socket={socket}
              />
            }
          />
          {/* Add this */}
          <Route
            path='/chat'
            element={<Chat username={username} room={room} socket={socket} />}
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Let's test this out: go to the home page and join a room:

We should be taken to the Chat page, and receive a welcome message from ChatBot:

Users can now see the messages they receive. Awesome!

Next up: setting up our database so we can permanently save messages.

How to Create a Schema and Table in HarperDB

Go back to your HarperDB dashboard, and click "browse". Then create a new schema called "realtime_chat_app". A schema is simply a group of tables.

Within that schema, create a table called "messages", with a hash attribute of "id".

We now have somewhere to store messages, so let's create the SendMessage component.

How to Create the Send Message Component (C)

Create the file src/pages/chat/send-message.js and add the following code:

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Send message to server. We can't specify who we send the message to from the frontend. We can only send to server. Server can then send message to rest of users in room
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    <div className={styles.sendMessageContainer}>
      <input
        className={styles.messageInput}
        placeholder='Message...'
        onChange={(e) => setMessage(e.target.value)}
        value={message}
      />
      <button className='btn btn-primary' onClick={sendMessage}>
        Send Message
      </button>
    </div>
  );
};

export default SendMessage;

Above, when the user clicks the "Send Message" button, a send_message socket event is emitted to the server, along with a message object. We will handle this event on the server shortly.

Import SendMessage into our Chat page:

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

The chat page now looks like this:

Next we need to set up our HarperDB environment variables so we can start interacting with the database.

How to Set Up HarperDB Environment Variables

In order for you to be able to save messages in HarperDB, you'll need your HarperDB instance URL, and your API password.

In your HarperDB dashboard, click on your instance, then go to "config". You will find your instance URL, and your instance API Auth Header – that is, your "super_user" password that allows you to make any request to the database – FOR YOUR EYES ONLY!

We will store these variables in a .env file. Warning: don't push the .env file to GitHub! This file should not be publicly visible. The variables are loaded in via the server behind the scenes.

Create the following files and add your HarperDB URL and password:

// server/.env

HARPERDB_URL="<your url goes here>"
HARPERDB_PW="Basic <your password here>"

We'll also create a .gitignore file to prevent the .env from being pushed to GitHub, along with the node_modules folder:

// server/.gitignore

.env
node_modules

Note: being good with Git and GitHub is a 100% must for all developers. Check out my Git workflows article if you need to up your Git game.

Or if you find yourself constantly having to look up the same Git commands, and want a quick way to look up, revise, and copy/paste commands -- check out my popular Git commands cheat sheet PDF and physical Git cheat sheet poster.

Finally, let's load our environment variables into our server by adding this code to the top of our main server file:

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // remove this after you've confirmed it working
const express = require('express');
// ...

How to Allow Users to Send Messages to Each Other with Socket.io

On the server, we'll listen for the _sendmessage event, then send the message to all users within the room:

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {

  // ...

  // Add this
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Send to all users in room, including sender
    harperSaveMessage(message, username, room, __createdtime__) // Save message in db
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'Server is running on port 3000');

We now need to create the harperSaveMessage function. Create a new file at server/services/harper-save-message.js, and add the following:

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

Above, saving the data may take a little time, so we are returning a promise which will be resolved if the data saves successfully, or rejected if not.

If you're wondering where I got the above code, HarperDB provides an awesome "code examples" section in their studio dashboard, which makes life much easier:

Time to test! Join a room as a user, then send a message. Then go to HarperDB and click on "browse", then click on the "messages" table. You should see your message in the database:

Cool 😎. So what next? Well, it'd be great if the last 100 messages sent in the room were loaded when a user joins a room, wouldn't it?

How to Get Messages from HarperDB

On the server, let's create a function that fetches the last 100 messages sent in a particular room (notice how HarperDB also allows us to use SQL queries 👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

We'll call this function whenever a user joins a room:

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Add a user to a room
  socket.on('join_room', (data) => {

    // ...

    // Add this
    // Get last 100 messages sent in the chat room
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('latest messages', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

Above, if the messages are fetched successfully, we emit a Socket.io event called _last_100messages. We'll now listen for this event on the frontend.

How to Display the Last 100 Messages on the Client

Below, we add a useEffect hook that contains a Socket.io event listener for the _last_100messages event. From there, the messages are sorted in date order, with most recent at the bottom, and the messagesReceived state is updated.

When messagesReceived is updated, a useEffect runs to scroll the messageColumn div to the most recent message. This improves the user experience of our app 👍.

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Runs whenever a socket event is recieved from the server
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Remove event listener on component unmount
    return () => socket.off('receive_message');
  }, [socket]);

  // Add this
  useEffect(() => {
    // Last 100 messages sent in the chat room (fetched from the db in backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Sort these messages by __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Add this
  // Scroll to the most recent message
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Add this
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Add ref to this div
    <div className={styles.messagesColumn} ref={messagesColumnRef}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

How to Display the Room and Users (A)

We've made components B and C, so let's finish things off by making A.

On the server, when a user joins a room, we emit a _chatroomusers event that sends all of the users in the room to all clients in that room. Let's listen for that event in a component called RoomAndUsers.

Below, there's also a "Leave" button that, when pressed, causes the emission of a _leaveroom event to the server. It then redirects the user back to the Home page.

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirect to home page
    navigate('/', { replace: true });
  };

  return (
    <div className={styles.roomAndUsersColumn}>
      <h2 className={styles.roomTitle}>{room}</h2>

      <div>
        {roomUsers.length > 0 && <h5 className={styles.usersTitle}>Users:</h5>}
        <ul className={styles.usersList}>
          {roomUsers.map((user) => (
            <li
              style={{
                fontWeight: `${user.username === username ? 'bold' : 'normal'}`,
              }}
              key={user.id}
            >
              {user.username}
            </li>
          ))}
        </ul>
      </div>

      <button className='btn btn-outline' onClick={leaveRoom}>
        Leave
      </button>
    </div>
  );
};

export default RoomAndUsers;

Let's import this component into the Chat page:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      {/* Add this */}
      <RoomAndUsersColumn socket={socket} username={username} room={room} />

      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

How to Remove a User from a Socket.io Room

Socket.io provides a leave() method that you can use to remove a user from a Socket.io room. We are also keeping track of our users in an array on server memory, so we'll remove the user from this array too:

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {

  // ...

  // Add this
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Remove user from memory
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'Server is running on port 3000');

We now need to create the leaveRoom() function:

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

Why put this short function in a separate utils folder, you ask? Because we'll be using it again later on and we don't want to repeat ourselves (keeping our code DRY).

Let's test things out: open up two windows side-by-side, and join the chat on both:

Then click the leave button on window 2:

The user is removed from the chat, and a message is sent to the other users – notifying them that they've left. Nice!

How to Add the Socket.io Disconnect Event Listener

What if the user is somehow disconnected from the server, like if their internet drops? Socket.io provides a built-in disconnect event listener for this. Let's add that into our server to remove a user from memory when they disconnect:

// server/index.js

// ...

// Listen for when the client connects via socket.io-client
io.on('connection', (socket) => {

  // ...

  // Add this
  socket.on('disconnect', () => {
    console.log('User disconnected from the chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} has disconnected from the chat.`,
      });
    }
  });
});

server.listen(4000, () => 'Server is running on port 3000');

And there you have it – you've just built a fullstack realtime chat application with a React frontend, a Node/Express backend, and a HarperDB database. Nice job!

Next time, I plan to check out HarperDB’s Custom Functions, which enable users to define their own API endpoints within HarperDB. This means that we can build our entire application in one place! See an example of how HarperDB is collapsing the stack in this article.

A challenge for you 💪

If you refresh the Chat page, the user's username and room will be lost. See if you can prevent this info from being lost when the user refreshes the page. Clue: local storage could be useful!

Thank you for reading!

If you found this article useful, you can:

• Subscribe to my YouTube channel. I will be uploading in-depth tutorials and project videos on React/NextJS/Node/Express.
• Follow me on Twitter where I tweet about my freelancing journey, side projects, and current learnings.
• Checkout my Gumroad store where I make useful and popular (8000 downloads as of writing) cheatsheets and posters.
• Checkout my web dev blog

If you have a personal blog, you might be using a comment system to manage your blog's discussions and comments. If so, it's time to think about updating your comment system.

You can take your blog's comments to the next level with the help of GitHub Discussions. In this article, I am going to explain how to integrate GitHub discussions into your blog and make most out of it.

What is "GitHub Discussions"?

GitHub Discussions

GitHub discussions is a forum that can be enabled on every GitHub repository. It makes it easy for developers to discuss new features, get feedback from the community, create polls, make announcements, and more.

GitHub Discussions is a one stop collaboration place for developers and community members.

How to Use GitHub Discussions as Chat System

To integrate GitHub Discussions into your blog, we are going to use giscus.

giscus

giscus is a GitHub Discussions-powered comment system. It lets you integrate discussions from your repository into your blog.

Your readers can leave comments on your blog, which will appear on both the blog and the discussions page of your repo.

Advantages of using Discussions as your blog chat system

• It's completely free
• There are no ads or tracking
• It's super powerful
• You have complete control over comments and full moderation authority.
• There are lots of themes
• It's quite customizable
• You can self-host on your own servers

Just keep in mind that this tool is mainly suited for dev blogs because mostly developers use GitHub.

How to Integrate giscus in Your Blog

Prerequisites

• A blog (you must have access to the source code)
• A GitHub account
• Your selected repository must be public

First, you'll need to enable discussions for your repo.

Go to the repo Settings -> Under the Features section -> Check the Discussions box.

Discussions enabled

Next, install the giscus app in your repo.

Go to https://github.com/apps/giscus, follow the prompts, and give access to only the selected repo.

Repository access

Now the important part: we need to configure the giscus widget.

First, go to giscus homepage and scroll to Configuration section.

Select your widget language. This is the language in which you want to display your widget.

Selecting language

Then type your repo name along with your username like username/reponame.

Typing repository name along with username

For Page ↔️ Discussions Mapping, I would recommended choosing "Discussion title contains page URL". But depending upon your needs choose the one that best suits you.

Page ↔️ Discussions Mapping

Next, create a category in your discussions page on your GitHub repo – something like "Comments" – or choose existing category.

Creating a discussion category

Choosing a category

Then enable the optional Features if you want.

Next, select the theme. And don't worry – you can programmatically toggle different themes.

Finally, copy and paste in the generated code.

Giscus will generate a script tag based on your settings, which you can paste into your code. But we will see how to use the giscus component.

How to use giscus-component

If your blog is built with React/Vue/Svelte or Web components then you can install the giscus component.

For example, to integrate giscus in React, do the following:

• Install the giscus package.

npm i @giscus/react

or

yarn add $giscus/react

• Then import giscus in your component and use it. Copy the attributes which we got in the last step, remove data- from all the attributes, and covert attributes into valid jsx attributes.

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

It's basically the same procedure for other frameworks.

Here's the Final Result

This is how the whole thing works:

Final result

Conclusion

In this article, we learnt the benefits of using GitHub discussions as a chat system. We also learned how to create and integrate the giscus widget in our website.

I hope you found this helpful. Make sure to ⭐ the giscus GitHub repo to support them.

Follow me on Twitter where I share random tips, resources, and my learnings around web development and technical writing.

But sometimes, when you're trying to establish a voice call connection, you'll get an error that says “RTC Connecting Discord”. This message will keep showing without any meaningful progress.

So what does this error mean?

Discord uses the Real-time Chat protocol (RTC) to run concurrent communication. So if you are experiencing the “RTC Connecting Discord” problem, it is a network issue.

In this article, I will show you 5 changes you can make to your network configurations to fix the RTC Connecting Discord issue. 3 of the fixes involve your computer network settings, while the remaining 2 happen right in your Discord app.

How to Fix RTC Connecting Discord by Updating your Network Driver

If your device relies on an outdated network adapter driver for internet connections, it could have a negative effect on your internet experience – and could cause this issue as well.

So, updating your network driver can fix the issue.

The steps below take you through how you can update your network adapter driver.

Step 1: Click on Start (Windows logo) and search for "device manager". Hit ENTER to open the first search result – which is always Device Manager. You can click on the "Device Manager" search result, too.

Step 2: Expand "Network Adapters."

Step 3: Look for the adapter in use, right-click on it and select "update driver".

Step 4: Select "Search automatically for drivers".

Windows will now search the internet for an updated driver and install it for you.

How to Fix RTC Connecting Discord by Changing your Domain Name Server

A domain name server (DNS) is assigned to you by your ISP (Internet Service Provider). Domain name servers make it possible to reach websites by typing addresses (URLs) to the browser instead of some unreadable numbers.

Changing this DNS to a widely used DNS like that of Google or Cloudflare can help you fix the RTC Connecting Discord issue.

To change your DNS to Google’s, follow the steps below.

Step 1: Right-click on Start and choose “Run” to open the Run dialogue.

Step 2: Type in “Control ncpa.cpl” (without quotes) and hit ENTER. This will open up your network connection devices.

Step 3: Right-click on your current network and select “Properties”.

Step 4: Look for Internet Protocol Version 4 (TCP/IPv4) and double-click it.

Step 5: Click on the “Use the following DNS server address” radio button and type in the following values:

• 8.8.8.8 for Preferred DNS Server
• 8.8.4.4 for Alternate DNS Server

Step 6: Click Ok.

Complete the setup with the next fix.

How to Fix RTC Connecting Discord by Clearing your Computer Network Cache in the Command Line

If you’re using the web-based Discord, this fix can work for you.

You can clear your network cache on your browser, but a more effective way to do it is to clear it right on your Windows 10 computer in the command line.

The steps below show you how to do it.

Step 1: Hit the WIN (Windows logo) key on your keyboard and search for "cmd".

You have to use the Command Prompt as an administrator, so you should select "Run as Administrator" on the right instead of just hitting ENTER to open it.

Step 2: Enter and execute the following commands one after the other:

• ipconfig /release
• ipconfig /flushdns
• ipconfig /renew

Step 3: Restart your computer.

How to Fix RTC Connecting Discord by Disabling QoS

Discord’s QoS (Quality of Service) communicates to your router that the units of data being transmitted are of high priority. This could make your router misbehave, and cause the RTC Connecting Discord issue.

So, disabling the QoS might fix it for you in case you have it enabled.

Follow the steps below to disable QoS on Discord.

Step 1: Launch Discord, then click on Settings on the bottom left corner.

Step 2: Select Voice and Video on the left panel.

Step 3: Scroll down to the QoS section and disable it.

Step 4: Restart the Discord app.

How to Fix RTC Connecting Discord by Changing the Audio Subsystem in Discord

In Discord, the Legacy audio subsystem has always been suggested as the best because it is the highest quality compared to the Standard and Experimental audio subsystems.

Changing your Audio subsystem to Legacy can make you establish quality audio – which can end up fixing the RTC Connecting Discord issue.

These steps take you through how to change your Audio subsystem to Legacy.

Step 1: Open Discord and click on Settings on the bottom left corner.

Step 2: Select Voice and Video.

Step 3: Scroll down to the Audio Subsystem dropdown and select “Legacy”.

Step 4: Restart Discord.

Conclusion

This article showed you how you can fix the RTC Connecting Discord problem you might experience when you are trying to use Discord's audio call feature.

Apart from the solutions explained in this article, you can try other minor fixes such as:

• Restarting your devices – computer and router
• Double-checking internet connection
• Using a VPN

Thanks a lot for reading this article. If you find it helpful, share it with your friends and loved ones.

Discord was originally created for gamers, but many other people now use it these days. It has become an alternative to Slack for many users – especially for those who want to have an online community.

But sometimes, Discord might not open when you launch it. This could be due to pending updates, running games, and other causes.

In this article, I will show you 5 quick ways you can make Discord open again on a Windows 10 computer.

Table of Contents

• How to Fix Discord Not Opening in the Command Line
• How to Fix Discord Not Opening by Clearing AppData
• How to Fix Discord Not Opening by Clearing LocalAppData
• How to Fix Discord Not Opening by Closing Background Applications
• How to Fix Discord Not Opening with the Task Manager
• Conclusion

How to Fix Discord Not Opening in the Command Line

The number one fix I would recommend to make Discord open again is to kill the Discord task with the Command Prompt.

This is how to do it:

Step 1: Click on Start or press WIN (Windows key) on your keyboard, then search for "cmd".

Step 2: Hit ENTER or select the first search result to open the Command Prompt.

Step: Type in taskkill /F /IM discord.exe and hit ENTER.

You should get a message that the Discord process has been terminated.

How to Fix Discord Not Opening by Clearing AppData

When you clear an app's AppData, all cache files are cleared – which can fix some problems, including loading.

Go through the following steps to clear your Discord's AppData:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%appdata%" (without quotes) and press ENTER on your keyboard. This will open up the AppData folder.

Step 3: Locate the Discord folder and delete it. Delete it from your Recycle Bin too.

How to Fix Discord Not Opening by Clearing LocalAppData

Clearing the Discord's LocalAppData can make it open again. It can also fix the common JavaScript error associated with Discord as well.

To clear LocalAppData, follow these steps:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%localappdata%" (without quotes) and press ENTER on your keyboard. This will open up the LocalAppData folder.

Step 3: Look for the Discord folder and delete it. Go to your Recycle Bin and delete it too.

Note that you might have to reinstall Discord to get it running again after clearing its LocalAppData. I can attest that this solves the issue as I recently had to do it.

How to Fix Discord Not Opening by Closing Background Applications

A lot of games run in the background and this could have a negative effect on your Discord app.

Use the steps below to fix the issue only if you don't have useful apps running in the background.

Step 1: Click on Start or press WIN (Windows key) on your keyboard and select Settings.

Step 2: Select "Privacy".

Step 3: Click on Background apps on the left, then turn off the toggle under "Let apps run in the background".

How to Fix Discord Not Opening with the Task Manager

Stopping the Discord process with the Task Manager can make Discord open again as this refreshes the app.

Step 1: Press CTRL + SHIFT + ESC to open the Task Manager

Step 2: Make sure you are under the Processes. Right-click on Discord and select "End Task".

Conclusion

In this article, you learned how to fix Discord when it won't open in a few different ways.

Apart from the methods discussed in this guide, you can also fix the issue by uninstalling and reinstalling Discord.

Note that you can also fix another popular issue with Discord – JavaScript error – by using one of the fixes suggested in this article – clearing LocalAppData. I've had to do this myself.

Thanks a lot for reading. If you find this article helpful, consider sharing it with your friends. That's very much appreciated.

Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.

The curved arrow is something that I have always really liked and have wanted to replicate for a long time.

After a lot of trial and error, I was finally able to find a workaround to build a similar version of iMessage's chat bubble. In this article, I'll take you through the steps required to build a chat bubble that looks like Apple's iMessage.

If you're building a chat application or intending to display information in the form of a message, I'd definitely recommend that you try out this style as it makes your app look cool and professional.

Prerequisites

This article assumes that you know the basics of:

• JSX
• React Native
• HTML & CSS

What is a Chat Bubble?

A chat bubble is basically a container that holds text. Chat bubbles are mostly used in Instant Messaging apps to display chat logs effectively.

The conventional method is that sent messages are displayed on the right side of the screen and received messages are shown on the left, with different colors used to differentiate between sent and received message(s).

Most messaging apps have a basic chat bubble which is a regular container with rounded corners. The main differentiating factor between other apps and iMessage is the presence of a small curved-like arrow anchoring the text container, which looks like this:

How to Build a Chat Bubble that Looks like iMessage

If we look at the above image carefully, we can see that the iMessage chat bubble is a combination of a regular chat bubble with an added arrow in the corner.

The main challenge lies in tying the arrow to the text container.

Before directly hopping into the code, I'd want you to know how this arrow-like element is created and added.

First, check out this code, which shows how to implementation this arrow using HTML & CSS. Below is its code snippet.

p {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position: relative;
    padding: 10px 20px;
  border-radius: 25px;

  &:before, &:after {
    content: "";
        position: absolute;
    bottom: 0;
    height: 25px;
  }
}

.from-me {
    color: white; 
    background: #0B93F6;
    align-self: flex-end;

    &:before {
        right: -7px;
    width: 20px;
    background-color: #0B93F6;
        border-bottom-left-radius: 16px 14px;
    }

    &:after {
        right: -26px;
    width: 26px;
    background-color: white;
        border-bottom-left-radius: 10px;
    }
}
.from-them {
    background: #E5E5EA;
    color: black;
  align-self: flex-start;

    &:before {
        left: -7px;
    width: 20px;
    background-color: #E5E5EA;
        border-bottom-right-radius: 16px;
    }

    &:after {
        left: -26px;
    width: 26px;
    background-color: white;
        border-bottom-right-radius: 10px;
    }
}

If you just browse straight through the code it might seem quite awful. So let's break it down at an atomic level and later glue it all back together.

The <**p>** tag includes style constraints such as margin-bottom, position, padding and so on. Note that the max-width used here is 255px, which is a static value. But we'll be using a dynamic approach, as the chat bubbles need to be responsive across various screen sizes.

The &:before and &:after within the <p> style defines two elements with no content in it. They're positioned absolute with respect to the <p> tag (text container), and are placed at the bottom. They have a height of 25px (the height of the arrow).

Going further, the .from-me (sent messages) style defines that the text be white, background blue (#0b936f), and that it's placed at the right side of the screen (align-self: flex-end).

Now comes the important part – extending the &:before and &:after, which is the actual implementation of the arrow.

The &:before has a width of 20px and is placed at 7 pixels negative to the right. It has a border-bottom-left radius of 16px, which is what gives the curved look to the arrow.

Similarly, the &:after has a width of 26px and is placed at 26 pixels negative to the right. Since -7px > -26px, &:after is placed right side of the &:before element and partially overlaps it.

If you still feel confused, don't worry – just refer to the images below to gain a clearer insight into what I've been talking about.

&:before with black background and bottom-left-radius

&:after overlapping &:before with green background

&:after background changed to white to match the background of the chat screen.

&:before background updated to #0b93f6 to match chat bubble color.

So basically the arrowhead is created by overlapping two elements at the bottom corner of the chat bubble and adjusting the background colors to match those of the chat bubble and chat screen.

Further ahead, the translation of CSS and HTML into JSX is fairly simple, as most of the things are quite straightforward.

How to Build the React Native Version

Before starting, I want to note that this works best with FlatList, and I recommend that you use it, and not other components or functions such as map (which lacked consistency across different screens and devices).

The three steps we're going to follow here are:

1. Create chat bubble with arrow head
2. Add styles to chat bubble and arrow head
3. Embed chat bubble in FlatList

So let's get started.

First, we'll create the chat bubble with the arrow head, like this:

<View style={{
                    backgroundColor: "#0078fe",
                    padding:10,
                    marginLeft: '45%',
                    borderRadius: 5,
                    //marginBottom: 15,
                    marginTop: 5,
                    marginRight: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-end',
                    //maxWidth: 500,

                    borderRadius: 20,
                  }} key={index}>


                    <Text style={{ fontSize: 16, color: "#fff", }} key={index}>{item.text}</Text>

                      <View style={styles.rightArrow}></View>

                      <View style={styles.rightArrowOverlap}></View>



</View>


//Recevied Message
      <View style={{
                    backgroundColor: "#dedede",
                    padding:10,
                    borderRadius: 5,
                    marginTop: 5,
                    marginLeft: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-start',
                    //maxWidth: 500,
                    //padding: 14,

                    //alignItems:"center",
                    borderRadius: 20,
                  }} key={index}>



                      <Text style={{ fontSize: 16, color: "#000",justifyContent:"center" }} key={index}> {item.text}</Text>
                      <View style={styles.leftArrow}>

                      </View>
                      <View style={styles.leftArrowOverlap}></View>



                    </View>

The Outermost <View> tag acts as the 'p' tag in comparison with the HTML version. The remaining two <View> tags act as &:before and &:after.

Next, we'll add styles to the chat bubble and arrow head like this:

const styles = StyleSheet.create({
rightArrow: {
  position: "absolute",
  backgroundColor: "#0078fe",
  //backgroundColor:"red",
  width: 20,
  height: 25,
  bottom: 0,
  borderBottomLeftRadius: 25,
  right: -10
},

rightArrowOverlap: {
  position: "absolute",
  backgroundColor: "#eeeeee",
  //backgroundColor:"green",
  width: 20,
  height: 35,
  bottom: -6,
  borderBottomLeftRadius: 18,
  right: -20

},

/*Arrow head for recevied messages*/
leftArrow: {
    position: "absolute",
    backgroundColor: "#dedede",
    //backgroundColor:"red",
    width: 20,
    height: 25,
    bottom: 0,
    borderBottomRightRadius: 25,
    left: -10
},

leftArrowOverlap: {
    position: "absolute",
    backgroundColor: "#eeeeee",
    //backgroundColor:"green",
    width: 20,
    height: 35,
    bottom: -6,
    borderBottomRightRadius: 18,
    left: -20

},
})

Then we'll embed it into FlatList:

<FlatList
        //inverted
        style={{backgroundColor:"#eeeeee"}}
        data={this.state.chat_log}
        ref={ref => (this.FlatListRef = ref)} // assign the flatlist's ref to your component's FlatListRef...


        renderItem = {({item,index})=>{

          rowId={index}

            if (SENT_MESSAGE) { //change as per your code logic



                return (

                  <View style={{
                    backgroundColor: "#0078fe",
                    padding:10,
                    marginLeft: '45%',
                    borderRadius: 5,

                    marginTop: 5,
                    marginRight: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-end',
                    borderRadius: 20,
                  }} key={index}>


                    <Text style={{ fontSize: 16, color: "#fff", }} key={index}> {item.text}</Text>

                      <View style={styles.rightArrow}>

                      </View>
                      <View style={styles.rightArrowOverlap}></View>



                  </View>
                )




            } else {


                return (
                  <View style={{
                    backgroundColor: "#dedede",
                    padding:10,
                    borderRadius: 5,
                    marginTop: 5,
                    marginLeft: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-start',
                    //maxWidth: 500,
                    //padding: 14,

                    //alignItems:"center",
                    borderRadius: 20,
                  }} key={index}>



                      <Text style={{ fontSize: 16, color: "#000",justifyContent:"center" }} key={index}> {item.text}</Text>
                      <View style={styles.leftArrow}>

                      </View>
                      <View style={styles.leftArrowOverlap}></View>



                  </View>
                )


            }



        }

        keyExtractor={(item,index)=>index.toString()}
        />

Values such as borderRadius, padding, margin, and backgroundColor are arbitrary values and can be changed if you wish. So feel free to play around and make those changes to best fit your requirements.

The result of the above code looks like this:

Chat bubble appearance, as tested on several devices(Android).

Looks cool, doesn't it ? ;)

Conclusion

Congratulations! You've built a chat bubble that looks just like the one iMessage uses.

I hope you found this article helpful. If so, do share it with your friends and colleagues.

Still have questions? Don't hesitate to get in touch with me, and I'll respond to you as soon as possible.

You could also connect with me on LinkedIn / Instagram.

Chat applications have become one of the easiest ways to communicate over the internet. As such, many applications incorporate chat features in them so that users can interact and engage in social communications.

These applications have made the world smaller with their powerful end to end audio/video and text-based communication. On top of that, other features such as sharing stories, sending attachments, and more have made these apps even more engaging and useful.

Most apps also have a stories feature. It lets users share their experiences in brief and the story disappears after a certain amount of time. These features get users hooked to that app and make them want to share their thoughts, ideas, memories, and experiences.

Facebook Messenger is one of the most widely-used chat applications. It is just behind WhatsApp in overall usage across the world.

In this tutorial, we are going to replicate the Messenger UI using the Flutter mobile application development framework. We'll also explore widget-based UI development using Flutter coding. This will get us familiar with the Flutter ecosystem as well as best practices for writing Flutter code.

Here, we are going to implement the main conversation home screen of the messenger app which will contain a top app bar, a search bar, a stories section, and a conversation list section.

Through this process, we will see how Flutter makes the UI development easier and we'll get a messenger clone chat application out of it.

So, let's get started!

Create a new Flutter project

First, we need to create a new Flutter project. To do that, make sure that the Flutter SDK and other Flutter app development-related requirements are properly installed.

If everything is properly set up, then to create a project we can simply run the following command in the desired local directory:

flutter create messengerUI

After the project has been set up, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

After a successful build, we will get the following result in the emulator screen:

Now, we need to replace the default template with our own project structure template.

First, we need to create a folder called ./screens inside the ./lib folder. Then, inside the ./lib/screens folder, we need to create a new file called conversations.dart.

Inside conversation.dart, we are going to implement a simple Stateful widget class returning a Scaffold widget with a basic App bar and an empty Container body. The code for conversations.dart is shown in the code snippet below:

import 'package:flutter/material.dart';

class Conversations extends StatefulWidget {
  @override
  _ConversationsState createState() => _ConversationsState();
}

class _ConversationsState extends State<Conversations> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat"),
      ),
      body: Container(),
    );
  }
}

Now, we need to replace the default template in the main.dart file and call the Conversations screen in the home option of MaterialApp widget as shown in the code snippet below:

import 'package:flutter/material.dart';
import 'package:messangerUI/screens/conversations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Messenger Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Conversations(),
    );
  }
}

We get the result as shown in the image below:

How to Add the AppBar

Now, we are going to customize the App bar at the top. Since the app bar needs to be scrollable, we are not going to use the appBar option provided by Scaffold widget. We are simply going to use the ListView widget in the body option of Scaffold and keep all other widgets as children of the ListView widget.

The overall implementation of the custom app bar is provided in the code snippet below:

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 15),
        child: ListView(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: NetworkImage(
                              "<https://randomuser.me/api/portraits/men/11.jpg>"),
                          fit: BoxFit.cover)),
                ),
                Text(
                  "Chats",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
                Icon(Icons.edit)
              ],
            ),
          ],
        ),
      )),
    );
  }

For the app bar UI, we have used a Row widget inside the ListView widget. Inside the Row widget, we have placed a Container widget with NetworkImage as a child, a Text widget, and an Icon widget.

Hence, we will get the result as shown in the image below:

How to Add the Search Bar

Now, we are going to add a search input field just below the app bar. It will contain an InputField widget decorated with styles and a search icon.

Since we need a text controller for the InputField widget we need to initialize it first as shown in the code snippet below:

TextEditingController _searchController = new TextEditingController();

Now, we are going to implement the UI for the search bar just below the Row widget which is inside the parent ListView widget. We'll use the SizedBox widget to give a tiny separation between the two sections.

The overall implementation of search bar using a TextField widget inside a Container widget with decoration is shown in the code snippet below:

body: SafeArea(
          child: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 15),
        child: ListView(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: NetworkImage(
                              "<https://randomuser.me/api/portraits/men/11.jpg>"),
                          fit: BoxFit.cover)),
                ),
                Text(
                  "Chats",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
                Icon(Icons.edit)
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Container(
              width: double.infinity,
              height: 40,
              decoration: BoxDecoration(
                  color: Color(0xFFe9eaec),
                  borderRadius: BorderRadius.circular(15)),
              child: TextField(
                cursorColor: Color(0xFF000000),
                controller: _searchController,
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color(0xFF000000).withOpacity(0.5),
                    ),
                    hintText: "Search",
                    border: InputBorder.none),
              ),
            ),
          ],
        ),
      )),
    );

Hence, we will get the search bar as shown in the image below:

How to Implement the Stories Section

Now it is time to implement the stories section. Stories are popular feature in every social app these days. We are going to implement it just below the search bar.

This section will contain an image of the user with their name at the bottom. The users who have stories will have a blue circular ring around their image whereas others don't.

But first, we need to prepare a list of mock users to show them in the stories section.

For that, we are going to initialize a List called storyList. We'll keep some objects containing the user's information such as name, imageUrl, isOnline (to check if the user is online), and hasStory (to check it the user has a story).

The mock list data is provided in the code snippet below:

List storyList = [
    {
      "name": "Novac",
      "imageUrl": "<https://randomuser.me/api/portraits/men/31.jpg>",
      "isOnline": true,
      "hasStory": true,
    },
    {
      "name": "Derick",
      "imageUrl": "<https://randomuser.me/api/portraits/men/81.jpg>",
      "isOnline": false,
      "hasStory": false,
    },
    {
      "name": "Mevis",
      "imageUrl": "<https://randomuser.me/api/portraits/women/49.jpg>",
      "isOnline": true,
      "hasStory": false,
    },
    {
      "name": "Emannual",
      "imageUrl": "<https://randomuser.me/api/portraits/men/35.jpg>",
      "isOnline": true,
      "hasStory": true,
    },
    {
      "name": "Gracy",
      "imageUrl": "<https://randomuser.me/api/portraits/women/56.jpg>",
      "isOnline": false,
      "hasStory": false,
    },
    {
      "name": "Robert",
      "imageUrl": "<https://randomuser.me/api/portraits/men/36.jpg>",
      "isOnline": false,
      "hasStory": true,
    }
  ];

Now, we are going to implement a separate function that returns the overall UI for the Stories section. The implementation is provided in the code snippet below:

_stories() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 20),
            child: Column(
              children: <Widget>[
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Color(0xFFe9eaec)),
                  child: Center(
                    child: Icon(
                      Icons.add,
                      size: 33,
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                SizedBox(
                  width: 75,
                  child: Align(
                      child: Text(
                    'Your Story',
                    overflow: TextOverflow.ellipsis,
                  )),
                )
              ],
            ),
          ),
          Row(
              children: List.generate(storyList.length, (index) {
            return Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Column(
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    child: Stack(
                      children: <Widget>[
                        storyList[index]['hasStory']
                            ? Container(
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    border: Border.all(
                                        color: Colors.blueAccent, width: 3)),
                                child: Padding(
                                  padding: const EdgeInsets.all(3.0),
                                  child: Container(
                                    width: 75,
                                    height: 75,
                                    decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        image: DecorationImage(
                                            image: NetworkImage(
                                                storyList[index]['imageUrl']),
                                            fit: BoxFit.cover)),
                                  ),
                                ),
                              )
                            : Container(
                                width: 70,
                                height: 70,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                        image: NetworkImage(
                                            storyList[index]['imageUrl']),
                                        fit: BoxFit.cover)),
                              ),
                        storyList[index]['isOnline']
                            ? Positioned(
                                top: 38,
                                left: 42,
                                child: Container(
                                  width: 20,
                                  height: 20,
                                  decoration: BoxDecoration(
                                      color: Color(0xFF66BB6A),
                                      shape: BoxShape.circle,
                                      border: Border.all(
                                          color: Color(0xFFFFFFFF), width: 3)),
                                ),
                              )
                            : Container()
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  SizedBox(
                    width: 75,
                    child: Align(
                        child: Text(
                      storyList[index]['name'],
                      overflow: TextOverflow.ellipsis,
                    )),
                  )
                ],
              ),
            );
          }))
        ],
      ),
    );
  }

Here, we returned a SingleChildScrollView as a parent widget with an option for horizontal scrolling.

Then, we used the List.generate widget inside the Row widget to iterate through our storyList array. For each item in the list, a template inside the List.generate is returned. The conditional rendering is used for online users and those users who have stories.

Now, we need to call the function inside the ListView children just below the InputField making a separation using the SizedBox widget as shown in the code snippet below:

body: SafeArea(
          child: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 15),
        child: ListView(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: NetworkImage(
                              "<https://randomuser.me/api/portraits/men/11.jpg>"),
                          fit: BoxFit.cover)),
                ),
                Text(
                  "Chats",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
                Icon(Icons.edit)
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Container(
              width: double.infinity,
              height: 40,
              decoration: BoxDecoration(
                  color: Color(0xFFe9eaec),
                  borderRadius: BorderRadius.circular(15)),
              child: TextField(
                cursorColor: Color(0xFF000000),
                controller: _searchController,
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color(0xFF000000).withOpacity(0.5),
                    ),
                    hintText: "Search",
                    border: InputBorder.none),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            _stories(),
          ],
        ),
      )),
    );

We will get the result as shown in the demo below:

As you can see, the stories section is scrollable horizontally.

How to Create the Conversation List Section

Now, we are going to create a list of conversations just below the Stories section. It will contain an image of the user, their name, message, and time.

For the conversation list as well we are going to create some mock data. The list is similar to storiesList but has two extra pieces of information for message and time. The mock data list conversationList is shown in the code snippet below:

List conversationList = [
    {
      "name": "Novac",
      "imageUrl": "<https://randomuser.me/api/portraits/men/31.jpg>",
      "isOnline": true,
      "hasStory": true,
      "message": "Where are you?",
      "time": "5:00 pm"
    },
    {
      "name": "Derick",
      "imageUrl": "<https://randomuser.me/api/portraits/men/81.jpg>",
      "isOnline": false,
      "hasStory": false,
      "message": "It's good!!",
      "time": "7:00 am"
    },
    {
      "name": "Mevis",
      "imageUrl": "<https://randomuser.me/api/portraits/women/49.jpg>",
      "isOnline": true,
      "hasStory": false,
      "message": "I love You too!",
      "time": "6:50 am"
    },
    {
      "name": "Emannual",
      "imageUrl": "<https://randomuser.me/api/portraits/men/35.jpg>",
      "isOnline": true,
      "hasStory": true,
      "message": "Got to go!! Bye!!",
      "time": "yesterday"
    },
    {
      "name": "Gracy",
      "imageUrl": "<https://randomuser.me/api/portraits/women/56.jpg>",
      "isOnline": false,
      "hasStory": false,
      "message": "Sorry, I forgot!",
      "time": "2nd Feb"
    },
    {
      "name": "Robert",
      "imageUrl": "<https://randomuser.me/api/portraits/men/36.jpg>",
      "isOnline": false,
      "hasStory": true,
      "message": "No, I won't go!",
      "time": "28th Jan"
    },
    {
      "name": "Lucy",
      "imageUrl": "<https://randomuser.me/api/portraits/women/56.jpg>",
      "isOnline": false,
      "hasStory": false,
      "message": "Hahahahahaha",
      "time": "25th Jan"
    },
    {
      "name": "Emma",
      "imageUrl": "<https://randomuser.me/api/portraits/women/56.jpg>",
      "isOnline": false,
      "hasStory": false,
      "message": "Been a while!",
      "time": "15th Jan"
    }
  ];

Similar to the stories section, we are going to build the conversation list section as a separate function.

As a parent widget, we have returned the Column widget. The child of the Column widget contains the List.generate widget that iterates through the conversationList array and provides the UI for each item in the conversation list.

We use conditional rendering for online users and those users who have stories. The overall implementation of the function is provided in the code snippet below:

_conversations(BuildContext context) {
    return Column(
      children: List.generate(conversationList.length, (index) {
        return InkWell(
          child: Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: Row(
              children: <Widget>[
                Container(
                  width: 60,
                  height: 60,
                  child: Stack(
                    children: <Widget>[
                      conversationList[index]['hasStory'] ? 
                      Container(
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border:
                                Border.all(color: Colors.blueAccent, width: 3)),
                        child: Padding(
                          padding: const EdgeInsets.all(3.0),
                          child: Container(
                            width: 75,
                            height: 75,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    image: NetworkImage(
                                        conversationList[index]['imageUrl']),
                                    fit: BoxFit.cover)),
                          ),
                        ),
                      )
                      : Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                                image: NetworkImage(
                                    conversationList[index]['imageUrl']),
                                fit: BoxFit.cover)),
                      ),
                      conversationList[index]['isOnline']
                          ? Positioned(
                              top: 38,
                              left: 42,
                              child: Container(
                                width: 20,
                                height: 20,
                                decoration: BoxDecoration(
                                    color: Color(0xFF66BB6A),
                                    shape: BoxShape.circle,
                                    border: Border.all(color: Color(0xFFFFFFFF), width: 3)),
                              ),
                            )
                          : Container()
                    ],
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      conversationList[index]['name'],
                      style:
                          TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    SizedBox(
                      width: MediaQuery.of(context).size.width - 135,
                      child: Text(
                        conversationList[index]['message'] +
                            " - " +
                            conversationList[index]['time'],
                        style: TextStyle(
                            fontSize: 15, color: Color(0xFF000000).withOpacity(0.7)),
                        overflow: TextOverflow.ellipsis,
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        );
      }),
    );
  }

Now we need to call the _converstions() function in the in ListView of Scaffold just below the Stories function as shown in the code snippet below:

body: SafeArea(
          child: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 15),
        child: ListView(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: NetworkImage(
                              "<https://randomuser.me/api/portraits/men/11.jpg>"),
                          fit: BoxFit.cover)),
                ),
                Text(
                  "Chats",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
                Icon(Icons.edit)
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Container(
              width: double.infinity,
              height: 40,
              decoration: BoxDecoration(
                  color: Color(0xFFe9eaec),
                  borderRadius: BorderRadius.circular(15)),
              child: TextField(
                cursorColor: Color(0xFF000000),
                controller: _searchController,
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color(0xFF000000).withOpacity(0.5),
                    ),
                    hintText: "Search",
                    border: InputBorder.none),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            _stories(),
            SizedBox(
              height: 20,
            ),
            **_conversations(context)**
          ],
        ),
      )),
    );
  }

We will get the result as shown in the demo below:

As you can see, the overall screen is scrollable vertically with Conversation List view and the Stories section is scrollable horizontally.

Finally, we have successfully created the home screen of a messenger app using Flutter.

Conclusion

The main objective of this tutorial was to show you how to build a UI like Facebook messenger using the Flutter ecosystem.

If you look closely at the code, you'll see that most of the implementation was pretty easy because of the flexibility and structured layout build that Flutter provides.

With only a few widgets, we can place every component in the UI in the correct position. Along with this beautiful UI creation, you can also learn basic coding patterns for Flutter development.

Separating large sections of code into separate functions helps simplify and clean up our code. This demonstrated a best coding practice for UI development in Flutter.

The tutorial also highlights how some widgets in Flutter make things easier for us, such as horizontal scrolling and placement icons and images with styles. You can definitely take this information and use it to build your own chat application in the future.

Moreover, you can also get inspiration from state of the art Flutter chat app templates out there that provide beautiful UIs as well as powerful features. And in case you want to check out chat application templates built using other mobile application development frameworks, you peruse these React Native Chat app templates as well.

These days, many people use chat applications to communicate with team members, friends, and family via their smart phones. This makes these messaging applications an essential medium of communication.

There is also high demand for intuitive and powerful user interfaces with state of the art features. The user interface (or UI) is the most impactful aspect of the overall user experience, so it's important to get right.

Flutter app development has taken the world by storm in terms of cross-platform mobile application development. You can use it to create pixel-perfect UIs, and many development companies use Flutter today.

In this tutorial, I am going to introduce you to a mix of both: we're going to build a chat app UI entirely on the Flutter/Dart coding environment. Along with learning the awesome Chat UI implementation in Flutter, we will also learn how its coding workflows and structures work.

So, let's get started!

How to Create a New Flutter Project

First, we need to create a new Flutter project. For that, make sure that you've installed the Flutter SDK and other Flutter app development-related requirements.

If everything is properly set up, then in order to create a project we can simply run the following command in our desired local directory:

flutter create ChatApp

After we've set up the project, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

After it's been successfully built, we will get the following result in the emulator screen:

How to Create the Main Home Screen UI

Now, we are going to start building the UI for our chat application. The Main Home Screen will contain 2 sections:

• the conversation screen, which we are going to implement as a separate page, and
• a bottom navigation bar.

First, we need to make some simple configurations to the default boilerplate code in the main.dart file. We'll remove some default code and add the simple MaterialApp pointing to the empty Container as a home page for now:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Container(),
    );
  }
}

Now in place of the empty Container widget, we are going to call the HomePage screen widget. But first, we need to implement the screen.

How to Build the Main Home Screen

Inside the ./lib directory of our root project folder, we need to create a folder called ./screens. This folder will hold all the dart files for different screens.

Inside ./lib/screens/ directory, we need to create a file called homePage.dart. Inside the homePage.dart file, we need to add the basic Stateless widget code as shown in the code snippet below:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),

    );
  }
}

Now, we need to call the HomePage class widget in the main.dart file as shown in the code snippet below:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Now we will get the result as shown in the emulator screenshot below:

How to Build the Bottom Navigator Bar

Now, we are going to place a Bottom Navigation menu on the HomePage screen. For that, we are going to use the BottomNavigationBar widget in the bottomNavigationBar parameter provided by the Scaffold widget.

Here's the overall code implementation:

return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey.shade600,
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("Chats"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group_work),
            title: Text("Channels"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            title: Text("Profile"),
          ),
        ],
      ),
    );

Here, we have configured BottomNavigationBar with various style parameters and kept our Navigation menu item in the items parameter. For the body parameter, we have just used a simple Container with a Text widget.

Now we will get the bottom navbar as shown in the emulator screenshot below:

Now that the bottom navigation is done, we can go ahead and implement the conversation list section just above the bottom navbar.

How to Build the Conversation List Screen

Here, we are going to create the conversation list section which will contain a header section, a search bar, and the conversation list view.

First, inside the ./lib/screens folder, we need to create a new dart file called chatPage.dart. Then, add a simple stateful widget class template inside as shown in the code snippet below:

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(child: Text("Chat")),
      ),
    );
  }
}

Now, we need to call the chatPage class widget in place of the Container widget in homePage.dart as shown in the code snippet below:

return Scaffold(
      body: ChatPage(),
      bottomNavigationBar: BottomNavigationBar(

This will give us the following result as shown in the emulator below:

How to Build a Conversation List Page Header

Now, we are going to add the header to the Conversation list section which will have a text header and a button. The complete UI implementation code is provided in the code snippet below:

return Scaffold(
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SafeArea(
              child: Padding(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text("Conversations",style: TextStyle(fontSize: 32,fontWeight: FontWeight.bold),),
                    Container(
                      padding: EdgeInsets.only(left: 8,right: 8,top: 2,bottom: 2),
                      height: 30,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.pink[50],
                      ),
                      child: Row(
                        children: <Widget>[
                          Icon(Icons.add,color: Colors.pink,size: 20,),
                          SizedBox(width: 2,),
                          Text("Add New",style: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Here, we have used the SingleChildScrollView so that the body section of the chatPage.dart is entirely scrollable.

Then, we have used the BouncingScrollPhysics instance to give the bouncing effect when a user's scrolling reaches the end or beginning.

Next, we have added a Text widget and a Container to display the bottom at the right-hand side.

Lastly, we have a Column widget as a child of the SingleChildScrollView widget so everything will appear vertically on the screen.

This will give us the following result as shown in the emulator below:

Now, we are going to add a search bar just below the Header section.

How to Add the Search Bar

In the Column widget from before, we are going to add a Search bar widget just below the Header UI section. So, as a second child of the Column widget, we need to insert the following code provided in the code snippet below:

Padding(
  padding: EdgeInsets.only(top: 16,left: 16,right: 16),
  child: TextField(
    decoration: InputDecoration(
      hintText: "Search...",
      hintStyle: TextStyle(color: Colors.grey.shade600),
      prefixIcon: Icon(Icons.search,color: Colors.grey.shade600, size: 20,),
      filled: true,
      fillColor: Colors.grey.shade100,
      contentPadding: EdgeInsets.all(8),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: BorderSide(
              color: Colors.grey.shade100
          )
      ),
    ),
  ),
),

This will give us the following result as shown in the emulator below:

How to Build the Conversation List

Now that we have the Header section and a Search bar, we are going to implement the conversation list section.

For that, we need to implement a class object model to store the instances of conversation lists.

So inside the ./lib folder, we need to create a new folder called ./models. Inside ./models, we need to create a file called chatUsersModel.dart.

In the model file, we need to create a model object class as shown in the code snippet below:

import 'package:flutter/cupertino.dart';

class ChatUsers{
  String name;
  String messageText;
  String imageURL;
  String time;
  ChatUsers({@required this.name,@required this.messageText,@required this.imageURL,@required this.time});
}

The object will house the user's name, text message, image URL, and time.

Next we need to create a list of users inside the chatPage.dart as shown in the code snippet below:

class _ChatPageState extends State<ChatPage> {
  List<ChatUsers> chatUsers = [
    ChatUsers(text: "Jane Russel", secondaryText: "Awesome Setup", image: "images/userImage1.jpeg", time: "Now"),
    ChatUsers(text: "Glady's Murphy", secondaryText: "That's Great", image: "images/userImage2.jpeg", time: "Yesterday"),
    ChatUsers(text: "Jorge Henry", secondaryText: "Hey where are you?", image: "images/userImage3.jpeg", time: "31 Mar"),
    ChatUsers(text: "Philip Fox", secondaryText: "Busy! Call me in 20 mins", image: "images/userImage4.jpeg", time: "28 Mar"),
    ChatUsers(text: "Debra Hawkins", secondaryText: "Thankyou, It's awesome", image: "images/userImage5.jpeg", time: "23 Mar"),
    ChatUsers(text: "Jacob Pena", secondaryText: "will update you in evening", image: "images/userImage6.jpeg", time: "17 Mar"),
    ChatUsers(text: "Andrey Jones", secondaryText: "Can you please share the file?", image: "images/userImage7.jpeg", time: "24 Feb"),
    ChatUsers(text: "John Wick", secondaryText: "How are you?", image: "images/userImage8.jpeg", time: "18 Feb"),
  ];

Now that we have the mock users' conversation list data, we can apply it to the conversation list to create a list view.

How to Make a Separate Class Widget for Individual Conversation

Here, we are going to make a separate component widget for the individual items in the conversation list view.

For that, inside ./lib create a folder called ./widgets. And inside ./widgets we need to create a file called conversationList.dart. Inside the new widget file, we can use the code from the following code snippet:

import 'package:flutter/material.dart';

class ConversationList extends StatefulWidget{
  String name;
  String messageText;
  String imageUrl;
  String time;
  bool isMessageRead;
  ConversationList({@required this.name,@required this.messageText,@required this.imageUrl,@required this.time,@required this.isMessageRead});
  @override
  _ConversationListState createState() => _ConversationListState();
}

class _ConversationListState extends State<ConversationList> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
      },
      child: Container(
        padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Row(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(widget.imageUrl),
                    maxRadius: 30,
                  ),
                  SizedBox(width: 16,),
                  Expanded(
                    child: Container(
                      color: Colors.transparent,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(widget.name, style: TextStyle(fontSize: 16),),
                          SizedBox(height: 6,),
                          Text(widget.messageText,style: TextStyle(fontSize: 13,color: Colors.grey.shade600, fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(widget.time,style: TextStyle(fontSize: 12,fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
          ],
        ),
      ),
    );
  }
}

This widget file takes the user's name, text message, image URL, time, and a Boolean message type value as parameters. And it returns the template containing the values.

In the chatPage.dart, inside the ListView widget, we need to call the ConversationList widget by passing the required parameters as shown in the code snippet below:

ListView.builder(
  itemCount: chatUsers.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 16),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return ConversationList(
      name: chatUsers[index].name,
      messageText: chatUsers[index].messageText,
      imageUrl: chatUsers[index].imageURL,
      time: chatUsers[index].time,
      isMessageRead: (index == 0 || index == 3)?true:false,
    );
  },
),

Note that this ListView widget is to keep as the first child of the Column widget in the chatPage screen.

This will give us the following result as shown in the emulator below:

This completes the UI implementation of our Conversation List Screen and Main Home page screen as a whole. Now, we'll move on to the implementation of the chat details screen.

How to Build a Chat Detail Screen

Now, we are going to create a chat detail screen. For that, we need to create a new file called chatDetailPage.dart inside the ./lib/screens/ folder. For now, we are just going to add the basic code as shown in the code snippet below:

import 'package:flutter/material.dart';

class ChatDetailPage extends StatefulWidget{
  @override
  _ChatDetailPageState createState() => _ChatDetailPageState();
}

class _ChatDetailPageState extends State<ChatDetailPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat Detail"),
      ),
      body: Container()
    );
  }
}

Here, we have returned a basic AppBar with Text and an empty Container as the body of the Scaffold widget.

Now, we are going to add navigation to ChatDetailPage on the GestureHandler widget's onTap method in the conversationList.dart widget file as shown in the code snippet below:

GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(builder: (context){
          return ChatDetailPage();
        }));
      },

We can now navigate to the Chat detail screen as shown in the emulator demo below:

How to Build a Custom App Bar for Chat Detail Screen

Here, we are going to add a custom App bar at the top of the chat detail screen. For that, we are going to use the AppBar widget with various parameter configurations as shown in the code snippet below:

return Scaffold(
      appBar: AppBar(
        elevation: 0,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        flexibleSpace: SafeArea(
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  icon: Icon(Icons.arrow_back,color: Colors.black,),
                ),
                SizedBox(width: 2,),
                CircleAvatar(
                  backgroundImage: NetworkImage("<https://randomuser.me/api/portraits/men/5.jpg>"),
                  maxRadius: 20,
                ),
                SizedBox(width: 12,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Kriss Benwat",style: TextStyle( fontSize: 16 ,fontWeight: FontWeight.w600),),
                      SizedBox(height: 6,),
                      Text("Online",style: TextStyle(color: Colors.grey.shade600, fontSize: 13),),
                    ],
                  ),
                ),
                Icon(Icons.settings,color: Colors.black54,),
              ],
            ),
          ),
        ),
      ),
      body: Container()
    );

This will give us the following result as shown in the emulator below:

How to Implement the Bottom Text Box

At the bottom of the chat detail screen, we need to add a messaging section that will contain a text editor and a button to send the message.

For this, we are going to use the Align widget and align the child inside the widget with the bottom of the screen. The overall code is provided in the code snippet below:

body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              padding: EdgeInsets.only(left: 10,bottom: 10,top: 10),
              height: 60,
              width: double.infinity,
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: (){
                    },
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                        color: Colors.lightBlue,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: Icon(Icons.add, color: Colors.white, size: 20, ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: "Write message...",
                        hintStyle: TextStyle(color: Colors.black54),
                        border: InputBorder.none
                      ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.send,color: Colors.white,size: 18,),
                    backgroundColor: Colors.blue,
                    elevation: 0,
                  ),
                ],

              ),
            ),
          ),
        ],
      ),

This will give us a messaging section with a text field to type the messages and a button to send the messages:

We also have a button to the left which we can use to add other menu options for messaging.

How to Set Up the Messages List Section in Chat Screen

Now, we are going to create the UI for messages appearing in the chat detail screen.

First, we need to create a model that reflects the message instance object.

For that, we need to create a file called chatMessageModel.dart inside the ./models folder and define the class object as follows:

import 'package:flutter/cupertino.dart';

class ChatMessage{
  String messageContent;
  String messageType;
  ChatMessage({@required this.messageContent, @required this.messageType});
}

The class object accepts the message content and message type (whether sender or receiver as instance values.

Now in the chatDetailPage.dart, we need to create a list of messages to display as shown in the code snippet below:

List<ChatMessage> messages = [
    ChatMessage(messageContent: "Hello, Will", messageType: "receiver"),
    ChatMessage(messageContent: "How have you been?", messageType: "receiver"),
    ChatMessage(messageContent: "Hey Kriss, I am doing fine dude. wbu?", messageType: "sender"),
    ChatMessage(messageContent: "ehhhh, doing OK.", messageType: "receiver"),
    ChatMessage(messageContent: "Is there any thing wrong?", messageType: "sender"),
  ];

Next, we are going to create a list view for the messages on top of the Stack widget's children, above the Align widget, as shown in the code snippet below:

body: Stack(
        children: <Widget>[
          ListView.builder(
            itemCount: messages.length,
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 10,bottom: 10),
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index){
              return Container(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
                child: Text(messages[index].messageContent),
              );
            },
          ),
          Align(

Now the messages will appear in list form as shown in the emulator screenshot below:

Now, we have the messages appearing on the screen but they are not styled the way we want in the chatting screen.

How to Style and Position the Messages Based on Sender and Receiver

Now, we are going to style the message list so that it appears as a chat message bubble. We're also going to position them based on the message type using the Align widget as shown in the code snippet below:

ListView.builder(
  itemCount: messages.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 10,bottom: 10),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return Container(
      padding: EdgeInsets.only(left: 14,right: 14,top: 10,bottom: 10),
      child: Align(
        alignment: (messages[index].messageType == "receiver"?Alignment.topLeft:Alignment.topRight),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: (messages[index].messageType  == "receiver"?Colors.grey.shade200:Colors.blue[200]),
          ),
          padding: EdgeInsets.all(16),
          child: Text(messages[index].messageContent, style: TextStyle(fontSize: 15),),
        ),
      ),
    );
  },
),

This will give us the following result as shown in the emulator below:

You can see an overall demo of the app's entire UI below:

Congrats! We have built an intuitive and modern chat app UI entirely in the Flutter and Dart ecosystem.

Recap

Social messaging applications are an essential communication medium nowadays. Equipped with state of the art and powerful chat interfaces with audio and video calling, image and file attachments, and many more, these chat applications have made communication much more efficient. These apps have made the world smaller for us.

The major objective of this article was to show you how to develop a simple intuitive UI for chat applications with a modern design in the Flutter ecosystem. The step-by-step implementation provided a detailed showcase of the app's UI and also gave an overview of the Flutter coding environment.

I hope this tutorial helps you create your next chat application using Flutter.

You can also get inspiration for a chat app UI and feature development from top Flutter chat app templates out there in the market. Make sure to check them out as well.

This is the same process I used to build freeCodeCamp's moderation chat bot for our community's self-hosted chat server. This code is now running in production, and lots of people are using it.

How to Set up a Rocket.Chat Server

Your first step is to get an instance of Rocket.Chat running locally – you will need this to test the bot's functionality.

You can use freeCodeCamp's docker file, which will spin up both Rocket.Chat and MongoDB automatically for a development environment. This will save you a lot of time.

You can either clone this repository, or manually create your own docker file based on our configuration. This tutorial will assume that you are using our existing docker file.

Note: If you do not have docker installed, you will need to install it. The installation process is different for each operating system. I personally use Windows 10, so I installed the Docker desktop client and had to enable hardware virtualisation in my BIOS.

Within your Rocket.Chat directory, create a .env file and insert the following contents:

COMPOSE_FILE=docker-compose.dev.yml
PORT=3000
ROOT_URL=http://localhost:3000
ROCKETCHAT_VERSION=latest

Then open your terminal pointed at that same directory and run:

docker-compose up -d

You should see three success messages in your terminal:

Image showing the console output for the docker-compose up -d command. Three docker images were created, and each shows done.

Now if you open your browser and navigate to localhost:3000 you should see your local Rocket.Chat instance. The first screen you see will be the Setup Wizard, which will walk you through creating your Admin account.

Most developers use the Admin account for root-level access to configure their chat. Because this is a local instance, your credentials' security is less important than in a live instance.

Fill in your information to create the admin account:

Image showing the Admin Info modal, with inputs for Name set to Nicholas Carrigan, Username set to nhcarrigan, Organization Email set to nick@freecodecamp.org, and Password which is obfuscated. Below the input fields is a button labelled Continue.

The next screen is the Organization Info screen. This information is optional. For this tutorial, we will leave this information blank.

Clicking Continue will take you to the Server Info page. Here you set the name for your chat server (which will appear in the title metadata), your default language, the server type, and the 2FA setting.

Be sure to turn off the automatic 2FA setup for your local instance or you could be locked out of your own server.

Image showing Server Info modal, with inputs for Site Name set to fCC ChatBot tutorial, Language set to Default, Server Type with no selection made, and Auto opt in new users for Two Factor via Email set to No. Below the input fields are buttons labelled "Back" and "Continue".

The final step is to optionally register your server and gain access to Rocket.Chat's services such as push notifications. Note that these are paid services.

For the purpose of this tutorial, you can select the Keep standalone option. Then you can decide whether you want any paid services later.

After clicking Continue, you'll see a modal indicating that your workspace is ready to use. Then you should see your new chat room. The default channel created by the Setup Wizard is general.

Image showing Rocket.Chat after completing the setup wizard. Sidebar on the left shows a general channel, and primary windows shows a system message that "nhcarrigan has joined the channel".

If you see this, congratulations. You are half way there and now have a functional chat server.

How to Set up a Bot Account in Rocket.Chat

Now we need to create a bot user in our local chat server for our code to connect to.

Select the three dots at the top of the sidebar and choose Administration. Then select Users from the new sidebar that appears, and click the +New button in the top right. This opens a pane for creating a new user account.

Fill in the information and credentials for your bot account.

A few key things to note:

• Leave Require password change and Set random password and send by email set to off.
• Leave Send welcome email set to off.
• Select bot from the Roles dropdown menu.

Image showing the Rocket.Chat settings screen. The left sidebar shows the list of settings - Users has been selected. The center screen shows a list of user accounts - nhcarrigan and Rocket.Cat. The right sidebar shows the Add User interface, with inputs for Name set to Tutorial Bot, Username set to tutorial-bot, Email set to nhcarrigan@gmail.com, Verified toggled off, Status Message with no value, Bio with no value, Nickname with no value, Password which is obfuscated, Require Password Change which is toggled off, Set random password and send by email which is toggled off, Roles with "bot" selected, Join default channels which is toggled on, and Send Welcome Email which is toggled off.

Rocket.cat is a built-in account used for system notifications (i.e. Rocket.Chat updates).

Save the changes, and your bot account should now be created! Keep a note of the username and password, as we will need these for the code.

How to Code your Rocket.Chat Chatbot

Now it's time to create the code. Start with a new, empty folder for your project.

Initial Rocket.Chat Chatbot Project Setup

We will begin with initializing a node.js project. You are welcome to use npm init to generate a package.json, or you may create one manually.

Either way, you will need to add some specific values to the scripts section:

  "scripts": {
    "prebuild": "rm -rf ./prod",
    "build": "tsc",
    "start": "node ./prod/bot.js"
  },

Next you will install your necessary dependencies. First, install the development dependencies:

npm install --save-dev typescript @types/node

Then, install your primary dependencies:

npm install @rocket.chat/sdk dotenv

Your next step is to set up the TypeScript configuration.

If you have installed TypeScript globally, you'll be able to call tsc --init and automatically generate a configuration file. Otherwise, you'll need to manually create a tsconfig.json file in your project's root directory.

Either way, these are the settings you will need for this project:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./prod",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noImplicitAny": false,
  }
}

If you are using git for version control, you will need to create a .gitignore file. This file tells git which files/folders to ignore. In this case, you want to ignore:

• the compiled JavaScript in prod
• your Node modules
• your .env secrets.

Add these to your .gitignore:

/node_modules/
/prod/
.env

Speaking of secrets, you should set those up now. Create a .env file, and add the following values:

ROCKETCHAT_URL="localhost:3000"
ROCKETCHAT_USER="tutorial-bot"
ROCKETCHAT_PASSWORD="********"
ROCKETCHAT_USE_SSL=""

View the code at this point.

How to Write the Primary Rocket.Chat ChatBot Code

Now it is time to write the initial bot code. Create a src folder within your project directory, and inside that src folder create a bot.ts file. Your file structure should now look like this:

_Image showing a file tree. From top to bottom: A node_modules folder, which is collapsed, a src folder which contains a bot.ts file, a .env file, a .gitignore file, a .package-lock.json file, a package.json file, and a tsconfig.json file. The files show they are being tracked by git, except the node_modules folder and .env file._

The package-lock.json file is created/updated by npm whenever you run install. This should be committed to your repository too, as it is required for the npm ci command.

Within your bot.ts file you will write the basic code that powers your bot. Start with your necessary imports:

import { api, driver } from "@rocket.chat/sdk";
import dotenv from "dotenv";

Because node doesn't load environment variables automatically, you need to call dotenv's config() method to bring your .env values into the node process:

dotenv.config();

Now you can extract those variables from the node environment. Use destructuring to grab the values:

const {
  ROCKETCHAT_URL,
  ROCKETCHAT_USER,
  ROCKETCHAT_PASSWORD,
  ROCKETCHAT_USE_SSL,
} = process.env;

Aside from ROCKETCHAT_USE_SSH, these environment values are required. Missing one will cause the code you write to error out, so you need to add a step to verify that all of these values are present.

if (!ROCKETCHAT_URL || !ROCKETCHAT_USER || ROCKETCHAT_PASSWORD) {
  console.error("Missing required environment variables.");
  process.exit(1);
}

Now you can use the Rocket.Chat SDK to connect your bot to the account you created.

Because the methods in the SDK are asynchronous, you will use an anonymous immediately-invoked function expression (IIFE) to enable async/await features.

(async () => {
  // Nothing here yet
})();

These next steps will be written inside this function.

First, determine if your bot should use SSL to connect to the chat server. If your chat server uses HTTPS://, this should be set to true. Because you are developing locally, this is set to false as localhost does not have an HTTPS protocol.

To ensure your code would work in a production environment as well, you can dynamically set this value based on your environment variables:

const ssl = !!ROCKETCHAT_USE_SSL;

Next, use the SDK driver to interface with your chat server. Connect the driver to your server:

await driver.connect({ host: ROCKETCHAT_URL, useSsl: ssl });

Login as the bot account:

await driver.login({
    username: ROCKETCHAT_USER,
    password: ROCKETCHAT_PASSWORD,
  });
await api.login({ username: ROCKETCHAT_USER, password: ROCKETCHAT_PASSWORD });

Have the bot join your general room, to handle instances where the bot isn't already in the room. Also tell the bot to listen for messages with the subscribeToMessages() method.

  await driver.joinRooms(["general"]);
  await driver.subscribeToMessages();

Finally, have the bot send a message when it comes online (so you can confirm connection status).

  await driver.sendToRoom("I am alive!", "general");

Now, build and run the code. Call these necessary scripts in your terminal:

npm run build
npm run start

After some built-in logging from the SDK, you should see the bot send its online message in your chat server.

Image depicting a Rocket.Chat message. The message was sent by tutorial-bot, which has the bot role by its name. The message text reads I am alive!.

View the code at this point.

How to Write the Command Handler

Your bot will now connect to the chat server and listen for messages, but it does not have any functions.

Before you can add commands, you need to build the infrastructure to handle those commands.

First, tell the bot to handle messages. Just after your subscribeToMessages() call, add a line to handle responding to messages:

driver.reactToMessages();

You'll see an error in your Intellisense, because the reactToMessages() method expects a callback function.

You could write the callback function within this method directly, but instead you will modularise your code and create an exported handler. This keeps your code cleaner and more maintainable.

Create a folder called commands within your src folder, and add two files: CommandHandler.ts and CommandList.ts. Within the CommandList.ts file, we are going to add a single line for now:

export const CommandList = [];

As you build commands, you will add them to this array to be able to iterate through them in our handler.

Now you need to write your handler's logic in the CommandHandler.ts file.

Start with your required imports:

import { driver } from "@rocket.chat/sdk";
import { IMessage } from "@rocket.chat/sdk/dist/config/messageInterfaces";
import { CommandList } from "./CommandList";

Define the command handler function:

export const CommandHandler = async (
    err: unknown,
    messages: IMessage[]
): Promise<void> => {
    // Code will go here.
}

Add some error handling.

  if (err) {
    console.error(err);
    return;
  }
  const message = messages[0];
  if (!message.msg || !message.rid) {
    return;
  }

If you see an error in the err parameter, you need to return early.

The messages parameter takes an array of messages, but you want to react to the first message, so we extract it from that array as message.

Then, for TypeScript's assertion handling, you need to exit early if certain properties are missing or undefined. In this case, message.msg is the text content of the message, and message.rid is the ID of the room the message was received in.

For cleaner/more readable code, you can destructure some values out of the message object. Get the room's name from the rid value - the SDK includes a method for doing just this. Also get the prefix and the command that is called.

  const roomName = await driver.getRoomName(message.rid);
  const [prefix, commandName] = message.msg.split(" ");

Add the logic to iterate through our array of commands. TypeScript will identify some errors due to missing structures, but you can ignore those for now as you have not written the commands yet.

  if (prefix === "!fCC") {
    for (const Command of CommandList) {
      if (commandName === Command.name) {
        await Command.command(message, roomName);
        return;
      }
    }
    await driver.sendToRoom(
      `I am sorry, but \`${commandName}\` is not a valid command.`,
      roomName
    );
  }

This block of code might be a bit confusing as we have not established how commands work yet.

First, the bot determines if the message begins with the correct prefix. If it does not, the bot will ignore the message.

Then the bot iterates through the list of commands, and if it finds a command for which the name value matches the command name sent in the message, it will run that command.

If it does not find any matching commands, it will send a response in the room that the command was not valid.

Before you move on to a command, head back to the reactToMessages() call in the bot.ts file and pass your new handler as the callback:

  driver.reactToMessages(CommandHandler);

You may need to manually import it:

import { CommandHandler } from "./commands/CommandHandler";

View the code at this point.

How to Write a Command

TypeScript offers an interface feature which can be used to define an object structure.

In your src folder, create an interfaces folder, and create a CommandInt.ts file.

Inside that file, you will define your command type. First, import the message type again.

import { IMessage } from "@rocket.chat/sdk/dist/config/messageInterfaces";

Now build the exported interface for the command definitions.

export interface CommandInt {
    name: string;
    description: string;
    command: (message: IMessage, room: string) => Promise<void>
}

Congratulations! You are now ready to build the ping command.

Within your src/commands folder, create a ping.ts file. Start with your necessary imports: the Rocket.Chat driver and your new command interface.

import { driver } from "@rocket.chat/sdk";
import { CommandInt } from "../interfaces/CommandInt";

Define and export the command:

export const ping: CommandInt = {
    name: "ping",
    description: "Pings the bot.",
    command: async (message, room) => {
        // Code will go here.
    }
}

Let's have the bot respond with "Pong!" when this command is called. Inside the function, replace the comment with:

await driver.sendToRoom("Pong!", room);

Now, load this command in your list of commands. Open the CommandList.ts file, where you will import our new command and include it in the array.

import { ping } from "./ping";

export const CommandList = [ping];

With this, you should see the errors in the CommandHandler.ts file disappear as well, because TypeScript is inferring that the CommandList array contains CommandInt types.

For extra type safety, and to ensure you do not accidentally add values to your CommandList that aren't proper CommandInt objects, explicitly type this variable.

import { CommandInt } from "../interfaces/CommandInt";
import { ping } from "./ping";

export const CommandList: CommandInt[] = [ping];

Run your build and start scripts again to test this new feature.

Call your ping command in the chat room. You should see a successful response:

Image depicting a Rocket.Chat conversation. The first message was sent by nhcarrigan, who has the Admin role by his name. The first message content reads "!fCC ping". The second message was sent by tutorial-bot, which has the Bot role by its name. The second message content reads "Pong!".

Call a pong command. You should see that the bot identifies it is not a valid command:

Image depicting a Rocket.Chat conversation. The first message was sent by nhcarrigan, who has the Admin role by his name. The first message content reads "!fCC pong". The second message was sent by tutorial-bot, which has the Bot role by its name. The second message content reads "I am sorry, but pong is not a valid command".

View our final code.

Further Exploration

Congratulations! You have now successfully built a basic Rocket.Chat chatbot.

If you would like to explore further features and command implementations, feel free to browse our live bot's codebase.