Chat App - potatoscript/websocket GitHub Wiki

💬 Building a Real-time Chat App with WebSockets

In this tutorial, we will build a real-time chat application using WebSockets, Node.js, Express, and HTML/JavaScript. By the end, you’ll have a fully functional chat app that allows multiple users to send and receive messages instantly.

🎯 What You’ll Learn

✅ Setting up a WebSocket server
✅ Creating a simple HTML chat interface
✅ Handling multiple clients
✅ Sending and receiving messages
✅ Broadcasting messages to all clients

🚀 1. Setting Up the Project

First, create a new project folder and initialize it:

mkdir websocket-chat
cd websocket-chat
npm init -y

Then, install the required dependencies:

npm install express ws

🖥 2. Creating the WebSocket Server

Create a new file called server.js and add the following code:

const express = require("express");
const WebSocket = require("ws");
const http = require("http");

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

app.use(express.static("public")); // Serve frontend files

wss.on("connection", (ws) => {
    console.log("🔗 A user connected");

    ws.on("message", (message) => {
        console.log("📩 Received:", message);

        // Broadcast message to all clients
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on("close", () => console.log("🔴 A user disconnected"));
});

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

🎨 3. Creating the Chat UI (Frontend)

Create a folder public and inside it, create a file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        #chat-box { width: 300px; height: 300px; border: 1px solid black; overflow-y: auto; margin: auto; padding: 10px; }
        #message { width: 200px; }
    </style>
</head>
<body>
    <h2>💬 WebSocket Chat</h2>
    <div id="chat-box"></div>
    <input type="text" id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const ws = new WebSocket("ws://localhost:3000");
        const chatBox = document.getElementById("chat-box");

        ws.onmessage = (event) => {
            const message = document.createElement("p");
            message.textContent = event.data;
            chatBox.appendChild(message);
            chatBox.scrollTop = chatBox.scrollHeight;
        };

        function sendMessage() {
            const input = document.getElementById("message");
            if (input.value.trim() !== "") {
                ws.send(input.value);
                input.value = "";
            }
        }
    </script>
</body>
</html>

🔥 4. Running and Testing the Chat App

1️⃣ Start the server:

node server.js

2️⃣ Open http://localhost:3000 in multiple browser tabs
3️⃣ Type messages and see them appear instantly in all tabs!

🌍 5. Deploying the Chat App

Follow these steps to deploy your chat app:

1️⃣ Use Railway.app or Heroku for easy deployment
2️⃣ Use AWS EC2 + Nginx for advanced deployment
3️⃣ Secure with SSL (HTTPS & WSS) using Certbot

🎯 6. Summary

✅ WebSockets enable real-time communication
✅ Built a simple WebSocket chat app
✅ Handled multiple clients and broadcasting
✅ Created a frontend using HTML & JavaScript
✅ Deployed the app for real-world use

⚠️ **GitHub.com Fallback** ⚠️