broadcast-server-cli 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Harshadd diwate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# 🎙️ Broadcast Server
+
+A real-time WebSocket chat server with a beautiful web client interface.
+
+## 🚀 Features
+
+- Real-time messaging via WebSocket
+- Random anime protagonist usernames
+- Color-coded users
+- Beautiful, responsive web interface
+- Works on any device with a browser
+- No installation required for clients
+
+## 📦 Installation
+
+### For Users (Recommended)
+
+Install globally via npm to use the CLI anywhere:
+
+```bash
+npm install -g broadcast-server-cli
+```
+
+After installation, you can use the `broadcast-server` command from anywhere!
+
+### For Developers
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/yourusername/broadcast-server.git
+cd broadcast-server
+npm install
+```
+
+## 🎯 Usage
+
+### Starting the Server
+
+**If installed globally via npm:**
+```bash
+broadcast-server start
+```
+
+**If running locally (for developers):**
+```bash
+npm start
+# or
+node cli/cli.js start
+```
+
+The server will start on port 8080 (or the PORT environment variable if set).
+
+**On Render (or other platforms):**
+The server automatically uses the `PORT` environment variable provided by the hosting platform.
+
+### Connecting to the Server
+
+#### Option 1: Web Browser (Recommended) ✨
+
+Simply open your browser and navigate to:
+- **Local:** `http://localhost:8080`
+- **Deployed:** `https://broadcastserver.onrender.com`
+
+The web interface will load automatically. Click "Connect" to join the chat!
+
+#### Option 2: CLI Client (For Developers)
+
+**If installed globally:**
+```bash
+broadcast-server connect wss://broadcastserver.onrender.com
+```
+
+**If running locally:**
+```bash
+node cli/cli.js connect wss://broadcastserver.onrender.com
+# or for local server
+node cli/cli.js connect ws://localhost:8080
+```
+
+## 🌐 Deployment
+
+### Render.com
+
+1. Push your code to GitHub
+2. Create a new Web Service on Render
+3. Connect your repository
+4. Render will automatically detect the build and start commands from `package.json`
+5. Your service will be available at `https://your-service-name.onrender.com`
+
+**Important:** The web client will be accessible at the root URL (`https://your-service-name.onrender.com`), and the WebSocket server runs on the same URL with the `wss://` protocol.
+
+## 📱 Sharing with Others
+
+To let others join your chat:
+
+1. **If deployed on Render:** Share the URL `https://broadcastserver.onrender.com`
+2. **If running locally:** 
+   - Find your local IP address (e.g., `192.168.1.100`)
+   - Share `http://YOUR_IP:8080` with people on the same network
+   - They can open it in any browser (phone, tablet, computer)
+
+## 🎨 Features of the Web Client
+
+- **Modern UI:** Beautiful gradient design with smooth animations
+- **Real-time Status:** See connection status at a glance
+- **User Identity:** Each user gets a unique anime protagonist name and color
+- **Message History:** Scroll through previous messages
+- **Responsive:** Works on desktop, tablet, and mobile
+- **No Installation:** Just open in a browser!
+
+## 🛠️ Technical Details
+
+- **Backend:** Node.js with `ws` WebSocket library
+- **Frontend:** Pure HTML/CSS/JavaScript (no frameworks needed)
+- **Protocol:** WebSocket (ws:// for local, wss:// for production)
+- **Port:** Configurable via environment variable or defaults to 8080
+
+## 📝 Commands
+
+- **Start server:** `npm start` or `node cli/cli.js start`
+- **Connect via CLI:** `node cli/cli.js connect <websocket-url>`
+- **Exit CLI client:** Type `/exit`
+
+## 🐛 Troubleshooting
+
+### "Cannot connect to server"
+- Make sure the server is running
+- Check that you're using the correct protocol (`ws://` for local, `wss://` for deployed)
+- Verify the URL is correct
+
+### "broadcast-server command not found"
+- Use `node cli/cli.js` instead of `broadcast-server`
+- Or install globally: `npm install -g .` (from the project directory)
+
+### Web client not loading
+- Ensure the `public/index.html` file exists
+- Check server logs for errors
+- Try accessing `/index.html` explicitly
+
+## 📄 License
+
+MIT

package/app/app.js

@@ -0,0 +1,37 @@
+import WebSocket from "ws";
+import readline from "readline";
+
+export function startClient(url) {
+  
+  
+  const ws = new WebSocket(url);
+
+  ws.on("open", () => {
+    console.log("🟢 Connected to server");
+    console.log("Type messages. Use /exit to quit.\n");
+
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+
+    rl.on("line", (input) => {
+      if (input === "/exit") {
+        rl.close();
+        ws.close();
+        process.exit(0);
+      }
+
+      ws.send(input);
+    });
+  });
+
+  ws.on("message", (msg) => {
+    console.log(msg.toString());
+  });
+
+  ws.on("close", () => {
+    console.log("🔴 Disconnected from server");
+    process.exit(0);
+  });
+}

package/app/usernames.js

@@ -0,0 +1,93 @@
+export const animeProtagonists = [
+  "Naruto Uzumaki",
+  "Monkey D. Luffy",
+  "Ichigo Kurosaki",
+  "Goku",
+  "Eren Yeager",
+  "Light Yagami",
+  "Edward Elric",
+  "Tanjiro Kamado",
+  "Izuku Midoriya",
+  "Yuji Itadori",
+  "Saitama",
+  "Kenshin Himura",
+  "Gon Freecss",
+  "Killua Zoldyck",
+  "Lelouch Lamperouge",
+  "Natsu Dragneel",
+  "Asta",
+  "Meliodas",
+  "Kaneki Ken",
+  "Shinji Ikari",
+  "Spike Spiegel",
+  "Vash the Stampede",
+  "Thorfinn",
+  "Denji",
+  "Subaru Natsuki",
+  "Kirito",
+  "Asuna Yuuki",
+  "Inuyasha",
+  "Yusuke Urameshi",
+  "Mob",
+  "Reigen Arataka",
+  "Ash Ketchum",
+  "Joestar Jonathan",
+  "Joseph Joestar",
+  "Jotaro Kujo",
+  "Josuke Higashikata",
+  "Giorno Giovanna",
+  "Gintoki Sakata",
+  "Rintarou Okabe",
+  "Senku Ishigami",
+  "Hyakkimaru",
+  "Alucard",
+  "Akira Fudo",
+  "Simon",
+  "Kamina",
+  "Shoyo Hinata",
+  "Kageyama Tobio",
+  "Ippo Makunouchi",
+  "Sakura Kinomoto",
+  "Usagi Tsukino",
+  "Soma Yukihira",
+  "Erza Scarlet",
+  "Mikasa Ackerman",
+  "Armin Arlert",
+  "Boruto Uzumaki",
+  "Tatsumi",
+  "Esdeath",
+  "Rimuru Tempest",
+  "Naofumi Iwatani",
+  "Kazuma Satou",
+  "Shigeo Kageyama",
+  "Hachiman Hikigaya",
+  "Oreki Houtarou",
+  "Zero Two",
+  "Shiro",
+  "Sora",
+  "Ichimatsu",
+  "Osomatsu",
+  "Deku",
+  "Black Star",
+  "Maka Albarn",
+  "Allen Walker",
+  "Koro Sensei",
+  "Akame",
+  "Tanjirou Kamado",
+  "Yato",
+  "Nagisa Shiota",
+  "Shinra Kusakabe",
+  "Lain Iwakura",
+  "Tomoya Okazaki",
+  "Taichi Yagami",
+  "Takemichi Hanagaki",
+  "Draken",
+  "Mikey",
+  "Aang",
+  "Korra",
+  "Arata Kaizaki",
+  "Chisaki Hiradaira",
+  "Violet Evergarden",
+  "Mash Burnedead",
+  "Frieren"
+];

package/cli/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+import { startServer } from "../server/server.js";
+import { startClient } from "../app/app.js";
+
+const args = process.argv.slice(2);
+
+
+const command = args[0];
+const url = args[1] || process.env.PORT || 8080;
+
+switch (command) {
+  case "start":
+    startServer(url);
+    break;
+
+  case "connect":
+     
+    startClient(url);
+    break;
+
+  default:
+    console.log(`
+Usage:
+  broadcast-server start (to start the server)
+  broadcast-server connect (to connect to server)
+`);
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "broadcast-server-cli",
+  "version": "1.0.0",
+  "description": "A real-time WebSocket chat server with a beautiful web client interface and CLI tools",
+  "type": "module",
+  "main": "server/server.js",
+  "bin": {
+    "broadcast-server": "cli/cli.js"
+  },
+  "scripts": {
+    "start": "node cli/cli.js start"
+  },
+  "keywords": [
+    "websocket",
+    "chat",
+    "real-time",
+    "broadcast",
+    "server",
+    "cli",
+    "messaging",
+    "chat-server"
+  ],
+  "author": "Harshad <diwateavdhoot@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://broadcastserver.onrender.com",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "ws": "^8.19.0"
+  },
+  "files": [
+    "cli/",
+    "server/",
+    "app/",
+    "public/",
+    "README.md"
+  ]
+}

package/public/index.html

@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Broadcast Chat</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            width: 100%;
+            max-width: 600px;
+            height: 700px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+            position: relative;
+        }
+
+        .header h1 {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+
+        .status {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 14px;
+            margin-top: 10px;
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.connected {
+            background: #4ade80;
+        }
+
+        .status-dot.disconnected {
+            background: #ef4444;
+            animation: none;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.7;
+                transform: scale(1.1);
+            }
+        }
+
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: #f8fafc;
+        }
+
+        .message {
+            margin-bottom: 15px;
+            animation: slideIn 0.3s ease-out;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message.system {
+            text-align: center;
+            color: #64748b;
+            font-style: italic;
+            font-size: 14px;
+        }
+
+        .message.user .username {
+            font-weight: bold;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .user-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+
+        .message.user .text {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            word-wrap: break-word;
+        }
+
+        .input-area {
+            padding: 20px;
+            background: white;
+            border-top: 1px solid #e2e8f0;
+        }
+
+        .input-container {
+            display: flex;
+            gap: 10px;
+        }
+
+        #messageInput {
+            flex: 1;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            font-size: 16px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+
+        #messageInput:focus {
+            border-color: #667eea;
+        }
+
+        #sendButton {
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        #sendButton:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        #sendButton:active {
+            transform: translateY(0);
+        }
+
+        #sendButton:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .messages::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .messages::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        .messages::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+
+        .messages::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+
+        .connection-form {
+            padding: 20px;
+            text-align: center;
+        }
+
+        .connection-form input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            font-size: 16px;
+            margin-bottom: 15px;
+            outline: none;
+        }
+
+        .connection-form input:focus {
+            border-color: #667eea;
+        }
+
+        .connection-form button {
+            width: 100%;
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        .connection-form button:hover {
+            transform: translateY(-2px);
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎙️ Broadcast Chat</h1>
+            <div class="status">
+                <span class="status-dot disconnected" id="statusDot"></span>
+                <span id="statusText">Disconnected</span>
+            </div>
+        </div>
+
+        <div id="connectionForm" class="connection-form">
+            <h2 style="margin-bottom: 20px; color: #1e293b;">Connect to Server</h2>
+            <input 
+                type="text" 
+                id="serverUrl" 
+                placeholder="wss://broadcastserver.onrender.com"
+                value="wss://broadcastserver.onrender.com"
+            />
+            <button onclick="connect()">Connect</button>
+        </div>
+
+        <div id="chatArea" class="hidden">
+            <div class="messages" id="messages"></div>
+            <div class="input-area">
+                <div class="input-container">
+                    <input 
+                        type="text" 
+                        id="messageInput" 
+                        placeholder="Type your message..."
+                        onkeypress="handleKeyPress(event)"
+                    />
+                    <button id="sendButton" onclick="sendMessage()">Send</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let ws = null;
+        let username = null;
+        let userColor = null;
+
+        const colorMap = {
+            '31': '#ef4444', // Red
+            '32': '#22c55e', // Green
+            '33': '#eab308', // Yellow
+            '34': '#3b82f6', // Blue
+            '35': '#a855f7', // Magenta
+            '36': '#06b6d4', // Cyan
+        };
+
+        function connect() {
+            const url = document.getElementById('serverUrl').value.trim();
+            
+            if (!url) {
+                alert('Please enter a server URL');
+                return;
+            }
+
+            try {
+                ws = new WebSocket(url);
+
+                ws.onopen = () => {
+                    updateStatus(true);
+                    document.getElementById('connectionForm').classList.add('hidden');
+                    document.getElementById('chatArea').classList.remove('hidden');
+                    addSystemMessage('Connected to server');
+                };
+
+                ws.onmessage = (event) => {
+                    const message = event.data;
+                    
+                    // Check if it's a welcome message
+                    if (message.startsWith('Welcome! You are ')) {
+                        const match = message.match(/Welcome! You are (\w+) \x1b\[(\d+)m●\x1b\[0m/);
+                        if (match) {
+                            username = match[1];
+                            const colorCode = match[2];
+                            userColor = colorMap[colorCode] || '#64748b';
+                            addSystemMessage(`You are ${username}`);
+                        }
+                    } else {
+                        // Parse regular messages
+                        const match = message.match(/(\w+) \x1b\[(\d+)m●\x1b\[0m : (.+)/);
+                        if (match) {
+                            const [, user, colorCode, text] = match;
+                            const color = colorMap[colorCode] || '#64748b';
+                            addUserMessage(user, text, color);
+                        } else {
+                            addSystemMessage(message);
+                        }
+                    }
+                };
+
+                ws.onclose = () => {
+                    updateStatus(false);
+                    addSystemMessage('Disconnected from server');
+                    document.getElementById('connectionForm').classList.remove('hidden');
+                    document.getElementById('chatArea').classList.add('hidden');
+                };
+
+                ws.onerror = (error) => {
+                    console.error('WebSocket error:', error);
+                    addSystemMessage('Connection error occurred');
+                };
+
+            } catch (error) {
+                alert('Failed to connect: ' + error.message);
+            }
+        }
+
+        function sendMessage() {
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
+
+            if (message && ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(message);
+                
+                // Display own message
+                addOwnMessage(message);
+                input.value = '';
+            }
+        }
+
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        }
+
+        function updateStatus(connected) {
+            const statusDot = document.getElementById('statusDot');
+            const statusText = document.getElementById('statusText');
+            const sendButton = document.getElementById('sendButton');
+
+            if (connected) {
+                statusDot.classList.remove('disconnected');
+                statusDot.classList.add('connected');
+                statusText.textContent = 'Connected';
+                sendButton.disabled = false;
+            } else {
+                statusDot.classList.remove('connected');
+                statusDot.classList.add('disconnected');
+                statusText.textContent = 'Disconnected';
+                sendButton.disabled = true;
+            }
+        }
+
+        function addSystemMessage(text) {
+            const messagesDiv = document.getElementById('messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message system';
+            messageDiv.textContent = text;
+            messagesDiv.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        function addUserMessage(user, text, color) {
+            const messagesDiv = document.getElementById('messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message user';
+            messageDiv.innerHTML = `
+                <div class="username">
+                    <span class="user-dot" style="background: ${color}"></span>
+                    ${user}
+                </div>
+                <div class="text">${escapeHtml(text)}</div>
+            `;
+            messagesDiv.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        function addOwnMessage(text) {
+            const messagesDiv = document.getElementById('messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message user';
+            messageDiv.innerHTML = `
+                <div class="username" style="justify-content: flex-end;">
+                    <span class="user-dot" style="background: ${userColor}"></span>
+                    ${username} (You)
+                </div>
+                <div class="text" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
+                    ${escapeHtml(text)}
+                </div>
+            `;
+            messagesDiv.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function scrollToBottom() {
+            const messagesDiv = document.getElementById('messages');
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+        }
+
+        // Auto-connect on load if URL is pre-filled
+        window.addEventListener('load', () => {
+            const urlInput = document.getElementById('serverUrl');
+            if (urlInput.value.trim()) {
+                // Optional: auto-connect
+                // connect();
+            }
+        });
+    </script>
+</body>
+</html>

package/server/server.js

@@ -0,0 +1,53 @@
+import http from "http";
+import WebSocket, { WebSocketServer } from "ws";
+import { animeProtagonists } from "../app/usernames.js";
+
+export function startServer(port = 8080) {
+  const server = http.createServer();
+  const wss = new WebSocketServer({ server });
+  const clients = new Set();
+
+  const colors = [
+    "\x1b[31m", // Red
+    "\x1b[32m", // Green
+    "\x1b[33m", // Yellow
+    "\x1b[34m", // Blue
+    "\x1b[35m", // Magenta
+    "\x1b[36m", // Cyan
+  ];
+  const resetColor = "\x1b[0m";
+
+  function sendMessages(data, ws) {
+    for (const client of clients) {
+      if (client !== ws && client.readyState === WebSocket.OPEN) {
+        client.send(`${ws.username} ${ws.color}●${resetColor} : ${data.toString()}`);
+      }
+    }
+  }
+
+  wss.on("connection", (ws) => {
+    ws.username = animeProtagonists[Math.floor(Math.random() * animeProtagonists.length)];
+    ws.color = colors[Math.floor(Math.random() * colors.length)];
+    
+    clients.add(ws);
+    console.log(`${ws.username} ${ws.color}●${resetColor} connected`);
+    
+    // Inform the user of their identity
+    ws.send(`Welcome! You are ${ws.username} ${ws.color}●${resetColor}`);
+
+    ws.on("message", (data) => {
+      sendMessages(data, ws);
+    });
+
+    ws.on("close", () => {
+      clients.delete(ws);
+      console.log(`${ws.username} \x1b[31m●${resetColor} Disconnected`);
+    });
+  });
+
+const PORT = process.env.PORT || 8000;
+
+  server.listen(PORT, () => {
+    console.log(`🟢 Server running on port ${PORT}`);
+  });
+}