{"id":26198138,"url":"https://github.com/maryehb/websocket-chat-application","last_synced_at":"2026-04-29T05:04:43.213Z","repository":{"id":279953309,"uuid":"940559736","full_name":"MaryEhb/WebSocket-Chat-Application","owner":"MaryEhb","description":"WebSocket Chat Application (Console-Based). The application consists of a WebSocket server and clients that can send and receive messages in real-time via the console.","archived":false,"fork":false,"pushed_at":"2025-02-28T11:55:50.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T18:15:44.170Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaryEhb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-28T11:46:56.000Z","updated_at":"2025-02-28T13:52:41.000Z","dependencies_parsed_at":"2025-02-28T18:15:51.261Z","dependency_job_id":"081a01b4-b5af-45d0-921f-01442bbbb280","html_url":"https://github.com/MaryEhb/WebSocket-Chat-Application","commit_stats":null,"previous_names":["maryehb/websocket-chat-application"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaryEhb%2FWebSocket-Chat-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaryEhb%2FWebSocket-Chat-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaryEhb%2FWebSocket-Chat-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaryEhb%2FWebSocket-Chat-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaryEhb","download_url":"https://codeload.github.com/MaryEhb/WebSocket-Chat-Application/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243147257,"owners_count":20243745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-12T02:50:11.986Z","updated_at":"2025-12-26T05:02:03.855Z","avatar_url":"https://github.com/MaryEhb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 WebSocket Chat Application (Console-Based)\n\nWelcome to the **WebSocket Chat Application (Console-Based)**! This project demonstrates a simple chat application using WebSockets for real-time communication. The application consists of a WebSocket server and a client that can send and receive messages in real-time via the console.\n\n## 📋 Table of Contents\n\n- [🌐 WebSocket Chat Application (Console-Based)](#-websocket-chat-application-console-based)\n  - [📋 Table of Contents](#-table-of-contents)\n  - [📁 Project Structure](#-project-structure)\n  - [🚀 Getting Started](#-getting-started)\n    - [1. Clone the Repository](#1-clone-the-repository)\n    - [2. Install Dependencies](#2-install-dependencies)\n    - [3. Run the WebSocket Server](#3-run-the-websocket-server)\n    - [4. Run the WebSocket Client](#4-run-the-websocket-client)\n  - [💬 Usage](#-usage)\n  - [📚 Understanding WebSockets](#-understanding-websockets)\n    - [Key Features of WebSockets](#key-features-of-websockets)\n  - [🛠️ Project Details](#️-project-details)\n    - [Server (`src/server/server.js`)](#server-srcserverserverjs)\n    - [Client (`src/client/client.js`)](#client-srcclientclientjs)\n  - [🔄 Connection Flow](#-connection-flow)\n    - [Single Client Connection](#single-client-connection)\n    - [Multiple Clients Connection](#multiple-clients-connection)\n  - [📜 License](#-license)\n\n## 📁 Project Structure\n\n```\n├── src\n│   ├── client\n│   │   └── client.js\n│   └── server\n│       └── server.js\n├── package.json\n├── yarn.lock\n└── README.md\n```\n\n## 🚀 Getting Started\n\nFollow these steps to set up and run the WebSocket Chat Application on your local machine.\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/MaryEhb/WebSocket-Chat-Application\ncd WebSocket-Chat-Application\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Run the WebSocket Server\n\n```bash\nnpm start\n```\n\nThis command will start the WebSocket server on `ws://localhost:8080`.\n\n### 4. Run the WebSocket Client\n\nOpen a new terminal window and run:\n\n```bash\nnpm run client\n```\n\nThis command will start the WebSocket client and connect it to the server.\n\n## 💬 Usage\n\n- Once the server is running, you can open multiple instances of the client in different terminal windows.\n- Type your messages in the client console and press Enter to send them.\n- All connected clients will receive the messages in real-time.\n- The server will prompt you to enter your username upon connection, which will be displayed with each message you send.\n\n## 📚 Understanding WebSockets\n\nWebSockets provide a full-duplex communication channel over a single, long-lived connection. This makes them ideal for applications that require real-time data transfer, such as chat applications, online gaming, and live updates.\n\n### Key Features of WebSockets\n\n- **Full-Duplex Communication**: Allows simultaneous two-way communication between the client and server.\n- **Low Latency**: Reduces the delay in message delivery compared to traditional HTTP requests.\n- **Persistent Connection**: Maintains a single connection for continuous data exchange.\n\n## 🛠️ Project Details\n\n### Server (`src/server/server.js`)\n\n- Uses the `ws` library to create a WebSocket server.\n- Manages client connections and broadcasts messages to all connected clients.\n- Assigns unique identifiers and colors to clients for easy identification.\n- Prompts clients for a username upon connection and notifies other clients when a user joins or leaves.\n\n### Client (`src/client/client.js`)\n\n- Connects to the WebSocket server using the `ws` library.\n- Sends user input to the server and displays incoming messages with colored output using the `chalk` library.\n- The first message sent by the client is used as the username.\n\n## 🔄 Connection Flow\n\n### Single Client Connection\n\n1. **Client connects to the server:**\n\n```\nClient          Server\n  |               |\n  |---(connect)--\u003e|  Client connects to the WebSocket server.\n  |               |\n```\n\n*Description*: When a client initiates a connection to the server, the server accepts the connection and establishes a WebSocket session.\n\n2. **Server prompts for username:**\n\n```\nClient          Server\n  |               |\n  |\u003c---(prompt)---|  Server sends a message prompting the client to enter a username.\n  |    username   |\n  |               |\n```\n\n*Description*: Upon successful connection, the server sends a message to the client asking for a username. This is the first interaction between the client and server.\n\n3. **Client sends username:**\n\n```\nClient          Server\n  |               |\n  |---(username)-\u003e|  Client sends the username to the server.\n  |               |\n```\n\n*Description*: The client responds with a username, which the server will use to identify the client in subsequent communications.\n\n4. **Server acknowledges and broadcasts:**\n\n```\nClient          Server\n  |               |\n  |\u003c---(welcome)--|  Server acknowledges the username and sends a welcome message.\n  |               |\n```\n\n*Description*: The server acknowledges the received username by sending a welcome message to the client.\n\n### Multiple Clients Connection\n\n1. **Client1 is already connected to the server:**\n\n```\nClient1         Server\n  |               |\n  |---(connected)-|  Client1 is already connected to the WebSocket server.\n  |               |\n```\n\n*Description*: Client1 has already established a WebSocket session with the server.\n\n2. **Another client (Client2) connects to the server:**\n\n```\nClient1         Server         Client2\n  |               |               |\n  |               |\u003c---(connect)--|\n  |               |               |\n```\n\n*Description*: Client2 initiates a connection to the server, and the server accepts the connection, establishing a WebSocket session.\n\n3. **Server prompts Client2 for username:**\n\n```\nClient1         Server         Client2\n  |               |               |\n  |               |---(prompt)---\u003e|\n  |               |    username   |\n```\n\n*Description*: The server sends a message to Client2 prompting for a username.\n\n4. **Client2 sends username:**\n\n```\nClient1         Server         Client2\n  |               |               |\n  |               |\u003c--(username)--|\n  |               |               |\n```\n\n*Description*: Client2 responds with a username, which the server will use to identify Client2 in subsequent communications.\n\n5. **Server acknowledges and broadcasts:**\n\n```\nClient1         Server         Client2\n  |               |               |\n  |\u003c--(broadcast)-|---(welcome)--\u003e|\n  |               |               |\n  |               |               |\n  |               |               |\n```\n\n*Description*: The server acknowledges Client2's username by sending a welcome message. It also broadcasts a message to all connected clients to inform them of the new user.\n\n6. **Client2 sends a message:**\n\n```\nClient1         Server         Client2\n  |               |               |\n  |\u003c---(message)--|\u003c--(message)---|\n  |               |               |\n```\n\n*Description*: Client2 sends a message to the server. The server then broadcasts this message to all connected clients.\n\nIn this scenario, the server acknowledges each new client and broadcasts the new user information to all connected clients.\n\n## 📜 License\n\nThis project is licensed under the MIT License.\n\n---\n\nMade with ❤️ by Mariem\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaryehb%2Fwebsocket-chat-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaryehb%2Fwebsocket-chat-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaryehb%2Fwebsocket-chat-application/lists"}