{"id":23131149,"url":"https://github.com/guillaumebouchetepitech/all-cpp-websocket-client-server","last_synced_at":"2025-07-11T08:10:14.393Z","repository":{"id":81405624,"uuid":"603912481","full_name":"GuillaumeBouchetEpitech/all-cpp-websocket-client-server","owner":"GuillaumeBouchetEpitech","description":"all C++ webSocket client server application","archived":false,"fork":false,"pushed_at":"2025-01-03T11:57:47.000Z","size":1049,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-09T18:34:50.463Z","etag":null,"topics":["boost-asio","boost-beast","cpp","cpp20","linux","network-programming","wasm","websocket"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuillaumeBouchetEpitech.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-02-19T23:08:50.000Z","updated_at":"2025-01-03T11:57:51.000Z","dependencies_parsed_at":"2024-05-12T05:26:10.992Z","dependency_job_id":"72ef229c-8abe-47d0-a5f5-c521e3531d57","html_url":"https://github.com/GuillaumeBouchetEpitech/all-cpp-websocket-client-server","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeBouchetEpitech%2Fall-cpp-websocket-client-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeBouchetEpitech%2Fall-cpp-websocket-client-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeBouchetEpitech%2Fall-cpp-websocket-client-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeBouchetEpitech%2Fall-cpp-websocket-client-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuillaumeBouchetEpitech","download_url":"https://codeload.github.com/GuillaumeBouchetEpitech/all-cpp-websocket-client-server/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247137646,"owners_count":20889906,"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":["boost-asio","boost-beast","cpp","cpp20","linux","network-programming","wasm","websocket"],"created_at":"2024-12-17T11:12:11.266Z","updated_at":"2025-04-04T07:27:29.517Z","avatar_url":"https://github.com/GuillaumeBouchetEpitech.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# All C++ WebSocket Client Server\n\n## Table of Contents\n- [All C++ WebSocket Client Server](#all-c-websocket-client-server)\n  - [Table of Contents](#table-of-contents)\n- [Description](#description)\n  - [The Client Side:](#the-client-side)\n  - [The Server Side:](#the-server-side)\n    - [Http Server:](#http-server)\n    - [WebSocket Server:](#websocket-server)\n  - [ The Network Wrapper:](#-the-network-wrapper)\n- [Dependencies](#dependencies)\n  - [Client-Side:](#client-side)\n  - [Server-Side: zlib, boost](#server-side-zlib-boost)\n- [How to Build](#how-to-build)\n  - [Build Everything (client + server side, also run the server)](#build-everything-client--server-side-also-run-the-server)\n- [How to Run](#how-to-run)\n  - [Step 1 - Run The Server](#step-1---run-the-server)\n  - [Step 2 - Load The Client](#step-2---load-the-client)\n- [Thanks for watching!](#thanks-for-watching)\n\n# Description\n\nC++ Client-Server example\n\n## The Client Side:\n* is written in C++ and compiled to WebAssembly\n  * which offer the (currently) highest performance possible within a browser\n    * `1.7x slower than native speed`\n    * `or ~5-6 times faster than JavaScript` (also devoid of GC slowdown)\n* will connect to the server with a websocket inside the WebAssembly logic\n  * the connection is established using a config fetched from the server-side (easily configured if needed)\n* `a native version` of the client is also available\n  * `mostly for` faster development and `debug purpose`:\n    * tools like gdb and valgrind become available\n* the network part rely on the [Network Wrapper](#network-wrapper-anchor)\n\n```mermaid\n\n%%{\n  init: {\n    'theme': 'base',\n    'themeVariables': {\n      'primaryColor': '#242424',\n      'primaryTextColor': '#DDD',\n      'primaryBorderColor': '#000',\n      'lineColor': '#A0A0A0',\n      'secondaryColor': '#454545',\n      'tertiaryColor': '#353535'\n    }\n  }\n}%%\n\n  flowchart TB\n\n    subgraph client-side [Client Side]\n\n      browser[Browser]\n\n      subgraph client-js-app [Web Js App]\n\n        direction TB\n\n        file_index_html[index.html]\n        file_bundle_js[bundle.js]\n\n        file_index_html -..-\u003e file_bundle_js\n      end\n\n      subgraph client-wasm-app [Web Wasm App]\n\n        direction TB\n\n        file_index_js[index.js]\n        file_index_wasm[index.wasm]\n        file_index_data[index.data]\n\n        file_index_js -..-\u003e file_index_wasm\n        file_index_js -..-\u003e file_index_data\n\n      end\n\n      subgraph real-time-client-app [\"Real Time Client App (Example)\"]\n\n        direction LR\n\n        ws_client[WebSocket\u003cbr\u003eClient]\n        client_game_logic[Game Logic]\n        client_physic_logic[Physic]\n        client_graphic_logic[Graphic]\n\n        client_game_logic \u003c---\u003e ws_client\n        client_game_logic \u003c-.-\u003e client_physic_logic\n        client_game_logic \u003c-.-\u003e client_graphic_logic\n      end\n\n      browser --- client-js-app\n      client-js-app --\u003e client-wasm-app\n      client-wasm-app --- real-time-client-app\n\n      client_http_get((HTTP GET))\n      client_websocket((WebSocket))\n\n      client-js-app --- client_http_get\n      client-wasm-app --- client_http_get\n      real-time-client-app --- client_websocket\n\n    end\n\n\n\n```\n\n## The Server Side:\n* is written in C++ and compiled to a native binary\n* the network rely on the [Network Wrapper](#network-wrapper-anchor)\n* the number of thread(s) used can be configured by command line arguments\n\n### Http Server:\n* recursively explore an asset folder\n  * open every files (when possible)\n  * compress the opened files (when possible)\n  * cache in-memory (hash map)\n    * compressed files must be smaller to be kept in the cache\n* accept and reply to HTTP request (GET)\n  * handle any custom requests\n    * used to reply the \"web-socket-config.json\"\n  * retrieve the requested file from the cache\n    * reply the requested file\n      * if available and supported, will reply the compressed payload\n    * will set the appropriate content-type header (when supported)\n  * 404 status if the requested file is missing from the in-memory cache\n\n\n```mermaid\n\n%%{\n  init: {\n    'theme': 'base',\n    'themeVariables': {\n      'primaryColor': '#242424',\n      'primaryTextColor': '#DDD',\n      'primaryBorderColor': '#000',\n      'lineColor': '#A0A0A0',\n      'secondaryColor': '#454545',\n      'tertiaryColor': '#353535'\n    }\n  }\n}%%\n\n  flowchart TD\n\n    subgraph server-side [Server Side]\n\n      direction LR\n\n      server_http_get((HTTP GET))\n\n      subgraph server-files [File Server]\n\n        http_server[HTTP Server]\n\n        direction LR\n\n        server_file_cache[File Cache]\n        server_file_disk[Disk]\n\n        http_server \u003c---\u003e server_file_cache\n        server_file_cache \u003c-.-\u003e server_file_disk\n\n      end\n\n      server_http_get --- server-files\n\n    end\n\n```\n\n### WebSocket Server:\n* event(s)\n  * accept connection(s)\n    * register the new user\n    * broadcast \"new user\" to all users\n  * new message(s)\n    * read messages\n    * broadcast \"new message\" to all users\n  * disconnection\n    * remove the lost user\n    * broadcast \"disconnected user\" to all users\n* a thread safe session manager is included\n  * a `shared mutex` is used\n    * multiple read will rely on `shared lock(s)`\n    * unique write will rely on `unique lock(s)`\n\n\n\n```mermaid\n\n%%{\n  init: {\n    'theme': 'base',\n    'themeVariables': {\n      'primaryColor': '#242424',\n      'primaryTextColor': '#DDD',\n      'primaryBorderColor': '#000',\n      'lineColor': '#A0A0A0',\n      'secondaryColor': '#454545',\n      'tertiaryColor': '#353535'\n    }\n  }\n}%%\n\n  flowchart TD\n\n    subgraph server-side [Server Side]\n\n      direction LR\n\n      server_websocket((WebSocket))\n\n      subgraph real-time-server-app [\"Real Time Server App (Example)\"]\n\n        direction LR\n\n        ws_server[WebSocket\u003cbr\u003eServer]\n        server_game_logic[Game Logic]\n        server_physic_logic[Physic]\n\n        ws_server \u003c---\u003e server_game_logic\n        server_game_logic \u003c-.-\u003e server_physic_logic\n\n      end\n\n      server_websocket --- real-time-server-app\n\n    end\n\n\n\n\n```\n\n## \u003ca name=\"network-wrapper-anchor\"\u003e\u003c/a\u003e The Network Wrapper:\n* is written in C++ and compiled to a native archive or a wasm bytecode\n  * the native part contains\n    * an abstracted http server\n      * host, port, total-threads (boost::strand if 2 or more threads)\n    * an abstracted websocket server\n      * host, port, total-threads (boost::strand if 2 or more threads)\n    * an abstracted websocket client\n      * rely on boost beast websocket\n      * use a worker thread\n  * the wasm part contains\n    * an abstracted websocket client\n      * rely on emscripten websocket\n* the native parts rely on boost Asio beast\n  * rely on boost executor(s)\n    * which in turn, rely on boost strand\n      * [which is a more efficient way to use multi-threading](https://www.crazygaze.com/blog/2016/03/17/how-strands-work-and-why-you-should-use-them/)\n* benefit(s) of the wrapper\n  * easily reusable\n  * make boost (very) slow compilation happens only once\n  * allow the client-side to work in native and wasm with nearly the same code\n\n\n* all of the network code is abstracted and located in the network-wrapper\n  * native wrapper: native archive (static library)\n  * wasm wrapper: wasm bytecode (static library)\n\n\n\n```mermaid\n\n%%{\n  init: {\n    'theme': 'base',\n    'themeVariables': {\n      'primaryColor': '#242424',\n      'primaryTextColor': '#DDD',\n      'primaryBorderColor': '#000',\n      'lineColor': '#A0A0A0',\n      'secondaryColor': '#454545',\n      'tertiaryColor': '#353535'\n    }\n  }\n}%%\n\nmindmap\n  root((\"network\u003cbr\u003ewrapper\"))\n    http_server)\"http server\"(\n    ws_server)\"websocket\u003cbr\u003eserver\"(\n    ws_client)\"websocket\u003cbr\u003enative/wasm\u003cbr\u003eclient\"(\n\n\n\n\n```\n\n\n\n# Dependencies\n\n## Client-Side:\n\n- Emscripten 3.1.44\n  - This will be locally installed (cloned and setup) if not detected\n  - the 3.1.44 version will be ensured, even if already present\n- NodeJs\n\n## Server-Side: zlib, boost\n\n- g++ (build-essential)\n- libzstd1\n- libboost1.71-dev\n\n# How to Build\n\n## Build Everything (client + server side, also run the server)\n\n```bash\nchmod +x ./sh_build_everything.sh\n./sh_build_everything.sh\n# will:\n# -\u003e build the client C++ application (wasm)\n# -\u003e build the client TypeScript wasm-loader (JavaScript)\n# -\u003e build the server C++ application (binary)\n# -\u003e copy the client files in the server asset folder\n# -\u003e run the server\n#    -\u003e http-port: 777\n#    -\u003e ws-port: 8888\n#    -\u003e threads all at 1\n```\n\n# How to Run\n\n## Step 1 - Run The Server\n\n```bash\n# the server need to be started from the \"./server-side\" folder\n# -\u003e mainly since this is where the \"files/\" folder is located\ncd ./server-side\n\n#           ip-address  http-port  ws-port  http-threads  ws-threads\n./bin/exec  127.0.0.1   7777       8888     1             1\n```\n\n## Step 2 - Load The Client\n\n```bash\n# http://{ip-address}:{http-port}/\nhttp://127.0.0.1:7777/\n\n# to see it in action -\u003e open more tabs with the same url\n# -\u003e will log broadcasts of when a new clients join/leave\n```\n\n# Thanks for watching!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguillaumebouchetepitech%2Fall-cpp-websocket-client-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguillaumebouchetepitech%2Fall-cpp-websocket-client-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguillaumebouchetepitech%2Fall-cpp-websocket-client-server/lists"}