📡 Introduction to WebSockets

🚀 What is WebSocket?

WebSocket is a special communication system that lets computers talk to each other instantly without waiting!

💡 Imagine:

HTTP (old way) 📨 → Like sending a letter to a friend and waiting for a reply.
WebSocket (new way) 🔄 → Like talking on the phone – instant messages!

🔥 Why Use WebSockets?

✅ Fast – Messages are sent in real-time (no delays!)
✅ Lightweight – Uses fewer resources than HTTP
✅ Two-way Communication – The server and the client can send messages anytime!
✅ Great for Real-time Apps – Chat apps, multiplayer games, stock price updates

🏗 Step 1: Setting Up a WebSocket Server

📌 Let's create a simple WebSocket server using Node.js!

📌 1️⃣ Install Node.js

🔹 First, make sure you have Node.js installed.
🔹 Download it from here and install it.

To check if it's installed, open your terminal (Command Prompt or Terminal) and type:

node -v

If it shows a version number, you're ready! ✅

📌 2️⃣ Create a New Project

Now, let’s create a folder for our WebSocket project:

mkdir websocket-demo
cd websocket-demo

Inside this folder, initialize a Node.js project:

npm init -y

This will create a file called package.json (it keeps track of our project settings).

📌 3️⃣ Install WebSocket Library

We need a special tool to create WebSockets in Node.js. Let’s install it:

npm install ws

🔌 Step 2: Create the WebSocket Server

📌 Now, let's create our WebSocket server!

1️⃣ Inside your websocket-demo folder, create a new file called server.js.
2️⃣ Open it and add this code:

// 1️⃣ Import the WebSocket library
const WebSocket = require('ws');

// 2️⃣ Create a WebSocket Server on port 8080
const wss = new WebSocket.Server({ port: 8080 });

console.log("📡 WebSocket Server is running on ws://localhost:8080");

// 3️⃣ Handle new connections
wss.on('connection', (ws) => {
    console.log("✅ A new client connected!");

    // 4️⃣ Send a welcome message to the client
    ws.send("🎉 Welcome to the WebSocket Server!");

    // 5️⃣ Listen for messages from the client
    ws.on('message', (message) => {
        console.log(`📩 Received: ${message}`);
        
        // 6️⃣ Send back a reply
        ws.send(`📝 Server says: You said "${message}"`);
    });

    // 7️⃣ Handle client disconnection
    ws.on('close', () => {
        console.log("❌ A client disconnected");
    });
});

🔍 Explanation:
✔ We create a WebSocket server on port 8080.
✔ When a client connects, we send a welcome message.
✔ When the client sends a message, the server replies.
✔ If the client disconnects, we log it.

✅ Now, run the WebSocket server in the terminal:

node server.js

🎉 Your WebSocket server is now running!

💻 Step 3: Create a WebSocket Client (in the Browser)

📌 Let’s connect to our WebSocket server using a web page!

1️⃣ Create a new file called index.html inside your websocket-demo folder.
2️⃣ Open it and add this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Demo</title>
</head>
<body>
    <h1>📡 WebSocket Client</h1>
    <p>Status: <span id="status">🔴 Disconnected</span></p>
    <input type="text" id="messageInput" placeholder="Type a message..." />
    <button onclick="sendMessage()">🚀 Send</button>
    <ul id="messages"></ul>

    <script>
        // 1️⃣ Connect to WebSocket Server
        const socket = new WebSocket("ws://localhost:8080");

        // 2️⃣ Update status when connected
        socket.onopen = () => {
            document.getElementById("status").textContent = "🟢 Connected";
        };

        // 3️⃣ Receive messages from the server
        socket.onmessage = (event) => {
            const messageList = document.getElementById("messages");
            const newMessage = document.createElement("li");
            newMessage.textContent = `📩 ${event.data}`;
            messageList.appendChild(newMessage);
        };

        // 4️⃣ Send a message to the server
        function sendMessage() {
            const input = document.getElementById("messageInput");
            const message = input.value;
            socket.send(message);
            input.value = "";
        }

        // 5️⃣ Handle disconnection
        socket.onclose = () => {
            document.getElementById("status").textContent = "🔴 Disconnected";
        };
    </script>
</body>
</html>

✅ Now, open index.html in a browser and test your WebSocket!

Type a message and click "Send" → The server will reply instantly!
If the server is stopped, the status will turn red 🔴.

🎯 Step 4: Test Everything!

1️⃣ Start the WebSocket server:

node server.js

2️⃣ Open index.html in a browser.
3️⃣ Send messages! 🎉

🎮 Bonus: What Can You Build with WebSockets?

✔ Real-time Chat Apps 💬
✔ Multiplayer Games 🎮
✔ Live Stock Market Updates 📈
✔ IoT Device Communication 🤖

🎯 Final Thoughts

Congratulations! 🎉 You have learned:
✅ What WebSocket is 📡
✅ How to create a WebSocket server ⚡
✅ How to connect from a browser 🌐
✅ How to send & receive messages ✉

Introduction - potatoscript/websocket GitHub Wiki

📡 Introduction to WebSockets

🚀 What is WebSocket?

🔥 Why Use WebSockets?

🏗 Step 1: Setting Up a WebSocket Server

📌 1️⃣ Install Node.js

📌 2️⃣ Create a New Project

📌 3️⃣ Install WebSocket Library

🔌 Step 2: Create the WebSocket Server

💻 Step 3: Create a WebSocket Client (in the Browser)

🎯 Step 4: Test Everything!

🎮 Bonus: What Can You Build with WebSockets?

🎯 Final Thoughts

⚠️ GitHub.com Fallback ⚠️

Introduction - potatoscript/websocket GitHub Wiki

📡 Introduction to WebSockets

🚀 What is WebSocket?

🔥 Why Use WebSockets?

🏗 Step 1: Setting Up a WebSocket Server

📌 1️⃣ Install Node.js

📌 2️⃣ Create a New Project

📌 3️⃣ Install WebSocket Library

🔌 Step 2: Create the WebSocket Server

💻 Step 3: Create a WebSocket Client (in the Browser)

🎯 Step 4: Test Everything!

🎮 Bonus: What Can You Build with WebSockets?

🎯 Final Thoughts

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

⚠️ GitHub.com Fallback ⚠️