{"id":21171474,"url":"https://github.com/tebogoyungmercykay/brand_race-local_nodejs_socket_server","last_synced_at":"2026-02-15T13:34:53.801Z","repository":{"id":168630363,"uuid":"633830347","full_name":"TebogoYungMercykay/Brand_Race-Local_NodeJS_Socket_Server","owner":"TebogoYungMercykay","description":"This Implementation makes use of Web Sockets Connection, It's a game which will be played in real-time by users per 1 vs 1 per Game Loop. The general idea of the game is to guess the logo of a car brand quicker than an opponent.","archived":false,"fork":false,"pushed_at":"2024-07-30T09:14:33.000Z","size":7147,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T10:40:59.637Z","etag":null,"topics":["api","brand","client-side-code","databases","express-js","intervals","javascript","local-server","mysql","nodejs","php","phpmyadmin","port","runtime","server","singleton","userinput","web-sockets"],"latest_commit_sha":null,"homepage":"","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/TebogoYungMercykay.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":"2023-04-28T11:31:04.000Z","updated_at":"2024-08-26T20:08:12.000Z","dependencies_parsed_at":"2024-07-30T12:39:24.151Z","dependency_job_id":null,"html_url":"https://github.com/TebogoYungMercykay/Brand_Race-Local_NodeJS_Socket_Server","commit_stats":null,"previous_names":["tebogoyungmercykay/the_brand_race","tebogoyungmercykay/the_brand_race---nodejs_multiuser_server","tebogoyungmercykay/brand_race-local_nodejs_socket_server"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TebogoYungMercykay/Brand_Race-Local_NodeJS_Socket_Server","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FBrand_Race-Local_NodeJS_Socket_Server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FBrand_Race-Local_NodeJS_Socket_Server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FBrand_Race-Local_NodeJS_Socket_Server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FBrand_Race-Local_NodeJS_Socket_Server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TebogoYungMercykay","download_url":"https://codeload.github.com/TebogoYungMercykay/Brand_Race-Local_NodeJS_Socket_Server/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TebogoYungMercykay%2FBrand_Race-Local_NodeJS_Socket_Server/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29479929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T11:35:25.641Z","status":"ssl_error","status_checked_at":"2026-02-15T11:34:57.128Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["api","brand","client-side-code","databases","express-js","intervals","javascript","local-server","mysql","nodejs","php","phpmyadmin","port","runtime","server","singleton","userinput","web-sockets"],"created_at":"2024-11-20T16:06:27.690Z","updated_at":"2026-02-15T13:34:53.780Z","avatar_url":"https://github.com/TebogoYungMercykay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- # \u003cp align=center\u003eBrand Race\u003c/p\u003e --\u003e\n# Brand Race\n---\n### CONTRIBUTORS:\n- Sello Selepe - Nickname (Tebogo)\n---\n### INTRODUCTION:\n- We  will be Implementing `Web Sockets`, We will create a game which will be played in real-time by 2-users per `Game Loop`. This game will be called `BrandRace`. The general idea of the game is to `guess` the logo of a `car brand` quicker than your `opponent`. More details of the game and its rules will be explained below.\n- Game Must Contain:\n    - A `PHP API` hosted off Wheatley that pulls from a `MYSQL DB`.\n    - Random Example, `config.php` Database Connection File.\n        ```php\n        class ImagesDatabase{\n            private $Host = 'localhost';\n            private $DatabaseName = 'images_db';\n            private $Username = 'username';\n            private $Password = 'p@ssw0rd';\n            private $initConnection = null;\n            // Creating an instance of the ImagesDatabase class\n            public static function instance(){\n                static $instance = null;\n                if ($instance === null){\n                    $instance = new ImagesDatabase();\n                }\n                return $instance;\n            }\n            // Method for Closing the database connection\n            private function close($connection) {\n                $connection-\u003eclose();\n            }\n            // The Constructor for the ImagesDatabase class\n            private function __construct(){\n                if ($this-\u003einitConnection !== null){\n                    if (mysqli_ping($this-\u003einitConnection)){\n                        $this-\u003einitConnection-\u003eclose();\n                    }\n                }\n                // Initializing the Connection object\n                $this-\u003einitConnection = new mysqli($this-\u003eHost, $this-\u003eUsername, $this-\u003ePassword);\n                // Checking if Connection was successful\n                if ($this-\u003einitConnection-\u003econnect_error){\n                    die(\"Connection to the Database failed: \" . $this-\u003einitConnection-\u003econnect_error);\n                }\n                else{\n                    $this-\u003einitConnection-\u003eselect_db($this-\u003eDatabaseName);\n                }\n            }\n            // The Destructor for the ImagesDatabase class\n            public function __destruct(){\n                // Check if the connection is still open and close it\n                if (mysqli_ping($this-\u003einitConnection)){\n                    $this-\u003einitConnection-\u003eclose();\n                }\n            }\n            // Getting the Car image and brand_name\n            public function getImage($random_number){\n                $UserQueryExecution = $this-\u003einitConnection-\u003eprepare(\"SELECT image,brand_name FROM race WHERE id = ?\");\n                $UserQueryExecution-\u003ebind_param(\"i\", $random_number);\n                $UserQueryExecution-\u003eexecute();\n                $result = $UserQueryExecution-\u003eget_result();\n                if ($result-\u003enum_rows \u003e 0){\n                    $row = $result-\u003efetch_assoc();\n                    // Do Something\n                }\n                else {\n                    return \"No Image Found With ID: \" + $random_number;\n                }\n            }\n        }\n        ```\n    - Random Example: Database Dumb For The `race` Table\n        ```sql\n        CREATE TABLE IF NOT EXISTS `race` (\n            `id` int(11) NOT NULL AUTO_INCREMENT,\n            `brand_name`\tvarchar(255),\n            `image`\tvarchar(255),\n            PRIMARY KEY (`id`),\n            UNIQUE KEY `brand_name` (`brand_name`)\n        ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;\n    - A `local NodeJS socket server` polling your `PHP API` from Wheatley.\n    - Random Example. Local NodeJS socket server =\u003e `Socket.io`\n        ```javascript\n        socket.on(\"joinGame\", ({ username, game_loop }) =\u003e {\n            const user = userJoin(socket.id, username, game_loop);\n            socket.join(user.game_loop);\n            // Welcome current user\n            socket.emit(\"message\", formatMessage(botName, \"Welcome to BrandRace!\"));\n            // Broadcast when a user connects\n            socket.broadcast\n            .to(user.game_loop)\n            .emit(\n                \"message\",\n                formatMessage(botName, `${user.username} has joined the game`)\n            );\n            // Send users and game_loop info\n            io.to(user.game_loop).emit(\"Competitors\", {\n            game_loop: user.game_loop,\n            users: getCompetitors(user.game_loop),\n            });\n        });\n        ```\n    - A `Web client` that connects to your `NodeJS socket` server and will act as the `Front End`.\n    - Random Example. `index.html`\n        ```html\n        \u003c!DOCTYPE html\u003e\n        \u003chtml lang=\"en\"\u003e\n            \u003chead\u003e\n                \u003ctitle\u003eBrand Race\u003c/title\u003e\n                \u003cmeta charset=\"UTF-8\"\u003e\n                \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n                \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n                \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\" crossorigin=\"anonymous\"/\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n                \u003cdiv class=\"join-container\"\u003e\n                    \u003cheader class=\"join-header\"\u003e\n                        \u003ch1\u003e\u003ci class=\"fas fa-smile\"\u003e\u003c/i\u003eBrand Race\u003c/h1\u003e\n                    \u003c/header\u003e\n                    \u003cmain class=\"join-main\"\u003e\n                        \u003cform action=\"game_loop.html\"\u003e\n                            \u003cdiv class=\"form-control\"\u003e\n                                \u003clabel for=\"username\"\u003eUsername\u003c/label\u003e\n                                \u003cinput type=\"text\" name=\"username\" id=\"username\" placeholder=\"Enter username...\" required/\u003e\n                            \u003c/div\u003e\n                            \u003cdiv class=\"form-control\"\u003e\n                                \u003clabel for=\"game_loop\"\u003eGame Loop\u003c/label\u003e\n                                \u003cselect name=\"game_loop\" id=\"game_loop\"\u003e\n                                    \u003coption value=\"game_loop\"\u003eGame Loop 1\u003c/option\u003e\n                                \u003c/select\u003e\n                            \u003c/div\u003e\n                            \u003cbutton type=\"submit\" class=\"btn\"\u003eGame Loop 1\u003c/button\u003e\n                        \u003c/form\u003e\n                    \u003c/main\u003e\n                \u003c/div\u003e\n            \u003c/body\u003e\n        \u003c/html\u003e\n        ```\n- ### LANGUAGE CONSTRAINS:\n    - NodeJS\n    - JS\n    - HTML \u0026 CSS (Bootstrap)\n    - PHP\n- ###### The API and Database should be hosted off Wheatley, the NodeJS server should be hosted locally.\n---\n- ### ADDITIONAL RESOURCES:\n    - ### `NodeJS`:\n        - [w3schools](https://www.w3schools.com/nodejs/)\n        - [tutorialspoint](https://www.tutorialspoint.com/nodejs/index.htm)\n    - ### `ExpressJS`:\n        - [tutorialspoint](https://www.tutorialspoint.com/expressjs/index.htm)\n        - [expressjs](https://expressjs.com/)\n        - [developer.mozill](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs)\n    - ### `Web Sockets`:\n        - [Example Socket](socket)\n        - [developer.mozill](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)\n        - [wikipedia](https://en.wikipedia.org/wiki/WebSocket)\n        - [github](https://github.com/websockets/ws)\n        - [socket.io](https://socket.io/)\n        - [npmjs](https://www.npmjs.com/package/websocket)\n    - ### `Base 64`:\n        - [w3docs](https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html)\n        - [base64](https://www.base64-image.de)\n        - [base64decode](https://www.base64decode.org/)\n    - ### `DOM Manipulation`:\n        - [w3schools](https://www.w3schools.com/js/js_htmldom.asp)\n---\n- # TASKS:\n    - ### Remove `(*)` for Completed Tasks.\n    - ### Task 1 - PHP API \u0026 DB\n        - `MySQL` DB\n        - Ability to `store` images in the `DB`\n        - Ability to `retrieve` images from an `endpoint`\n        - The `image(s)` should be random every API Call\n        - ReadMe explanation, `1 vs 5` images at a time\n        - ReadMe explanation, `Base64` vs `Link`\n    - ### Task 2 - Multi-User server `(*)`\n        - `Task Pending`.\n        - `Port` can be `chosen`at `run-time`\n        - `Reserved Ports` cannot be chosen\n        - Server can accept `multiple` clients `simultaneously`\n        - `'LIST'` command is implemented and fully functioning\n        - `'KILL'` command is implemented and fully functioning\n        - `'QUIT'` command is implemented and fully functioning\n        - `'GAMES'` command is implemented and fully functioning\n        - If `connection` is `closed` on the client the `server closes` the `socket`\n        - Server keeps `track` of usernames\n        - Server can `detect` When a game should `start` and start the game on the `user` side\n        - Server can `send` through `Images` to the client using `sockets` and the `API`\n        - Server can `generate` a `unique` `GameID`\n        - Server implements the `flow` of the `GameLoop` correctly\n    - ### Task 3 - Web Client `(*)`\n        - The client can `connect` to a server through a `socket`\n        - The client allows the user to `choose` a `username`\n        - The client allows user to `enter` OR `generate` GameID `from` the server\n        - The client starts the Game Loop on the user side on `cue` from the server\n        - Error `Messages`(Username taken, Socket disconnected, Opponent Gets a point, etc.)\n        - The ability to implement the Game loop correctly\n    - ### Security Requirements Must Be Met!!\n---\n- ## OVERVIEW:\n- ###### To understand the flow of how this all works please consult the diagram below.\n  \u003cimg src=\"Images/Overview.png\" height=\"500\" width=\"600\"\u003e\n\n---\n- ## GAME DETAILS:\n    - The aim of `BrandRace`, is to guess a `Car Brand Logo` faster then your opponent. There will be a `total` of `5 rounds`, in each round the players will see a `new` Logo on `screen` and need to `enter` the correct name to get the point, whoever does this the quickest `wins` the round. The `winner` is the player that has won the `most` rounds. However you are also racing against the `clock`, each player will have `limited time` each round and if time runs out before any player guesses the correct logo then `no one` gets the point.\n    - To make the game a bit easier to follow please consult the `diagram below`. The Area highlighted in `Red` will be referred to as the `Game Loop` and is referenced throughout the specification. Before the game begins a user `chooses` a `username` and has the option to either `generate` a `GameID` or `enter` in a `GameID`. When a `valid` `GameID` is entered it `automatically` starts the `Game Loop` After a `5 seconds` countdown on both screens.\n    - This is a `2 player` game `(1 vs 1)`, if someone else enters in a GameID that is `already in progress` (game started) they `should not` be allowed to join in the game and an appropriate `error message` should be shown.\n\n        \u003cimg src=\"Images/Game_Loop.png\" height=\"500\" width=\"600\"\u003e\n\n---\n- ## INSTRUCTIONS:\n    - #### Task 1: PHP API + Database:\n        - We will create a PHP API that is hosted off Wheatley as well as a `MYSQL DB` along with it. This `API` should have one endpoint, `GetRandomBrands`. In this endpoint we will choose between returning 5 `random` Car brand logos with their `names` OR 1 `random` Car brand logo with its `name` that should be retrieved from the `MYSQL` Database. There are 2 options when dealing with images. Since images themselves cannot be transferred through an API we will store the images in `Base64` format in the database and return the `Base64 String`. (Consult the resources about working with Base64 at the top of the doc) OR Alternatively we can send through a `link` to the image that is hosted somewhere on the `internet` which we will then display. We will populate the DB `manually` with `PHPMyAdmin` for this assignment. Below is a summary of what is mentioned above:\n        - We have 2 options of how we can set up the API. There is no incorrect answer here, We shall motivate our choices\n            - `(5 At once)` - This option will return an array of 5 different Car Brand Logos + Names in a single API Call\n            - `(1 At a time)` - This option will only return 1 Car Brand Logo + Name at a time\n        - We will write a short explanation of our choice and why we believe its the better option. We have 2 Options of how we can transfer images. There is no incorrect answer/choice here, but we need to back up our choice\n            - #### `Base64` - We will store images in base64 and decode them client side\n                - Encryption method in PHP: `base64_encode()`\n                - Encryption method in PHP: `base64_decode()`\n            - #### `Link` - Wou will use a link to an external image.\n                - `Example`. https://images.pexels.com/photos/63294/autos-technology-vw-multi-storey-car-park-63294.jpeg?auto=compress\u0026cs=tinysrgb\u0026w=1260\u0026h=750\u0026dpr=2\n                - `Example Image`:\n                    \u003cimg src=\"https://images.pexels.com/photos/63294/autos-technology-vw-multi-storey-car-park-63294.jpeg?auto=compress\u0026cs=tinysrgb\u0026w=1260\u0026h=750\u0026dpr=2\" height=\"500\" width=\"600\"\u003e\n\n        - We will write a `short` explanation of our choice and why we believe its the `better` option.\n    - #### Task 2: Multi-User NodeJS server:\n        - For this task we will create a `Multi-User` socket server `(on localhost)`. The server will coded in `NodeJS` locally and not off wheatley. We will use `libraries` for this. Note: Wheatley is a web server that follows the `LAMP` stack and installing other applications on it brings security issues. We will therefore use `localhost` for this since the `NodeJS server` needs to run on an open `port` and it would be difficult to allow the server to be run on Wheatley as the chances of multiple people using the same port would be high.\n        - #### `The server must have the following functionality`:\n            -  Be able to `specify` a port that the `server` will `listen` on at `run-time` (create the socket), using input arguments or prompts. It is good practice to `block` the user from using `reserved` ports (Ports that have been reserved for other task). However there is still a chance we can choose a port in use, but we will just try a different port instead. The ports we will use ports from `1024` to `49151`, make sure the user can only `choose a port in this range`. If you are curious about why this is the case, you can read up about it at https://www.techtarget.com/searchnetworking/definition/port-number.\n            - ###### `Definition`: A port number is a way to identify a specific process to which an internet or other network message is to be forwarded when it arrives at a server. All network-connected devices come equipped with standardized ports that have an assigned number. These numbers are reserved for certain protocols and their associated function. Hypertext Transfer Protocol (`HTTP`) messages, for example, always go to port 80 -- one of the most commonly used ports.\n        - `Block` the user from attempting to open a Reserved Port (Explained above).\n        - Accept `multiple` client connections and interact with the clients `concurrently` through sockets.\n        - The server must utilize functionality of the `PHP API` we developed in `Task 1`. That means our server should `contact` our PHP API to get the car brands for the game based on the options we chose.\n        - The server should have a `KILL` command to `close` a connection based on their `username`. This also means that we need to keep track of which `socket ID` corresponds to which Username since we need the SocketID to `close` a `socket connection`.\n        - The server needs to `account` for `lost` sockets (when a socket was created and the client `[HTML web page]` has `closed/disconnected`). These lost sockets should be closed in order to allow for new connections. If that user was `in a game` then the `game should be stopped` and the other `user` notified (`This check can be done in the game loop`).\n        - The server should have a `LIST` command to `list all` the connections it currently has, be sure to list the `usernames` and their respective `SocketIDs`.\n        - The server should have a `QUIT` command that `sends` a `broadcast` to all connections notifying that the server will now go `off-line`, thereafter closing all connections.\n        - The server should have a `GAMES` command that `shows all games` in `session` or `created`, The `GameID` and the `players usernames`.\n        - The server should be able to `keep track`of `usernames`, i.e a when a user requests a username the server `determines` if its `in use`, prompting for a `different username`.\n        - The server should be able to `generate` a `Unique GameID`. This should be a random `10` Character `AlphaNumeric` String.\n        - The server should be able to start the game loop automatically if a user enters in another users `GameID` (remember the `5 second countdown`).\n        - The `Game loop`, Once the game loop has started take note of the following from the `server side`:\n            - The server should `notify` the user when the game is `about to start`\n            - The server should `keep track` how many `rounds` each user has `won`\n            - `Detect` if one `opponent disconnects` and `end` the loop and notify the other\n            - The server should be able to implement what is shown in the `Flowchart` under `Game Details`\n        - Since Wheatley is password protected, Include login details in the URL as follows:\n            - `username:password@wheatley.cs.up.ac.za/uXXXXXXXX/path/to/api`\n        - ###### To `test` the functionality of the server will use https://www.piesocket.com/websocket-tester as the client `before` proceeding to Task 3.\n\n    - #### Task 3: Web Client:\n        - For this task we will `develop` a `web page/web site` that will `interact` with our `server` (that runs on our local machine `[localhost]`) we wrote for Task 2. The web client must be implemented in `HTML`, `CSS` and `JS` using `Web Sockets`. The client should also be on `localhost`. Note: We will use some client side `library` of our choice `(e.g. WebSockets, Socket.io, etc.)`. To make the changes we can/should make use of `DOM Manipulation` with `javascript`, that way we do not need to `redirect` to a new page every time which might disconnect the socket.\n        - #### `The client must have the following functionality`:\n            - The user should be able to `enter` in their username. If that username is `not available` then an `error` should be shown, and be `allowed` to enter in a `new username`.\n            - After the user has `received` a username they have 2 options\n                - `Enter` in a `GameID`. If the GameID `exists` and the game in not im `progress` should `trigger` the game loop.\n                - `Generate` a `GameID` (From the server) start the game loop when another user enters in the `GameID`.\n            - #### `The Game Loop`\n                - Once the server starts the game loop the `screen` should `update` to show the logo with a `elapsed timer`, and the ability for a user to enter in the `brand name`. Here we are free to chose how the user inputs the name.\n                - The user should be able to guess the `logo` and be `notified` if they get it `right` or `wrong`(remember this needs to happen in `real-time`). When a user gets it `wrong`, they should be allowed to `try again`, provided their opponent has not got it correct, and `vice versa`.\n                - The user should be `notified` if their opponent `gets it right` and what the `correct answer` was before moving onto the next logo. To `aid` user experience use a `countdown` timer `before` moving to the next logo.\n            - At the `end` of the game both users should be `notified` of the `winner` unless it was a `draw`.\n---\n## REQUIREMENTS BEFORE RUNNING THE CODES:\n\n- ### `A text editor`:\n    - A text editor is required to create, write and edit code.\n    - There are many free and paid text editors available online such as Visual Studio Code, Sublime Text, Notepad++, and Atom.\n  - VS Code Instalation Guide: https://www.youtube.com/watch?v=4zVObKFZ6fA\u0026ab_channel=TheCodeholic\n- ### `Web server` - Optional (To Test PHP Code And The Database):\n    - A web server is required to serve web pages to users.\n    - You can use an existing web server like Apache or Nginx, or you can use a package like XAMPP or WAMP which comes with an integrated web server.\n    - ##### `Xampp Instalation Guide`:\n        - [Windows 10](https://www.youtube.com/watch?v=-f8N4FEQWyY\u0026ab_channel=edureka%21)\n        - [Windows 11](https://www.youtube.com/watch?v=VQpATELDSEI\u0026ab_channel=ProgrammingKnowledge2)\n    - Once `Xampp` is available:\n        - Copy the souce code to the httdoc directory\n        - Run `Apache` and `MySQL` server\n        - url:  `\"http://localhost/path/to/code/login.php\"`\n- ### `HTML`:\n    - Hypertext Markup Language is used to create the structure and content of web pages.\n    - You need a text editor to create HTML files with an \".html\" extension.\n- ### `CSS`:\n    - Cascading Style Sheets are used to style the HTML content.\n    - You need a text editor to create CSS files with a \".css\" extension.\n- ### `JavaScript`:\n    - JavaScript is used to add interactivity and functionality to web pages.\n    - You need a text editor to create JavaScript files with a \".js\" extension.\n- ### `PHP`:\n    - PHP is a server-side scripting language used for dynamic web content.\n    - You need a web server that supports PHP to run PHP scripts.\n- ### `jQuery`:\n    - jQuery is a JavaScript library that simplifies HTML document manipulation, event handling, and animation.\n    - You need to include jQuery in your HTML file by linking to it in your code.\n    - The Same AJAX Example Using jQuery Just For Control\n        ```php\n            \u003c!DOCTYPE html\u003e\n        \u003chtml\u003e\n        \u003chead\u003e\n            \u003ctitle\u003eAJAX Example For Control\u003c/title\u003e\n            \u003c!-- Including jQuery Library in out file --\u003e\n            \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js\"\u003e\u003c/script\u003e\n            \u003cscript\u003e\n                $(document).ready(function() {\n                    $(\"#exampleButton\").click(function() {\n                        $.get(\"URL\", function(data) {\n                            // DOM Manipulation\n                            $(\"#example_id\").html(data);\n                        });\n                    });\n                });\n            \u003c/script\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n            \u003ch1\u003eAJAX Example For Control\u003c/h1\u003e\n            \u003cbutton type=\"button\" id=\"exampleButton\"\u003eLoad Data\u003c/button\u003e\n            \u003cp id=\"example_id\"\u003e\u003c/p\u003e\n        \u003c/body\u003e\n        \u003c/html\u003e\n        ```\n- ### `Web Browsers`:\n    - A web browser is necessary to render and display web pages.\n    - Popular web browsers include:\n        - Google Chrome\n        - Mozilla Firefox\n        - Safari\n        - Microsoft Edge\n        - Brave\n        - Opera Mini\n        - Not Recommended: Tor (Onion Routing)\n---\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftebogoyungmercykay%2Fbrand_race-local_nodejs_socket_server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftebogoyungmercykay%2Fbrand_race-local_nodejs_socket_server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftebogoyungmercykay%2Fbrand_race-local_nodejs_socket_server/lists"}