{"id":5418,"date":"2026-04-19T13:06:48","date_gmt":"2026-04-19T04:06:48","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=5418"},"modified":"2026-04-19T13:10:19","modified_gmt":"2026-04-19T04:10:19","slug":"httplib-websocket","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/04\/19\/httplib-websocket\/","title":{"rendered":"[Webserver]httplib webserver+Websocket"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \uc6f9\uc18c\ucf13\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.
Below is an explanation of WebSockets.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc6f9\uc18c\ucf13\uc740 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uac04\uc758 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.
WebSockets enable bidirectional communication between a server and a client.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud574\uc11c \uac04\ub2e8\ud55c \ucc44\ud305\uae30\ub2a5\uc744 \uad6c\ud604\ud55c \uac83\uc785\ub2c8\ub2e4.
The code below implements a simple chat function using WebSockets.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud130\ubbf8\ub110\uacfc \ube0c\ub77c\uc6b0\uc800\uac04\uc758 \ucc44\ud305\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.
Chatting between the terminal and the browser is possible.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb bc_server.cpp<\/p>\n\n\n\n

\u2714\ufe0f\uc11c\ubc84\uc640 \ube0c\ub77c\uc6b0\uc800 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub300\ud55c \uc124\uc815\uc774 \uc788\uc2b5\ub2c8\ub2e4.
There are settings for the server and the browser client.<\/p>\n\n\n\n

\u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n

#include \"httplib.h\"\n#include <algorithm>\n#include <iostream>\n#include <mutex>\n#include <string>\n#include <vector>\n\n\/* ---- \ubaa8\ub4e0 \uc18c\ucf13 \uc811\uc18d\uc790\uc5d0\uac8c \uba54\uc138\uc9c0 \uc804\uc1a1 \/ Send message to all socket connected users---- *\/\nstd::mutex g_mtx;\n\n\/\/ g_clients \ubaa8\ub4e0 \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8 \/ g_clients all WebSocket clients\nstd::vector<httplib::ws::WebSocket*> g_clients;\n\nvoid broadcast(const std::string& msg) {\n\n    \/\/ \uc2a4\ub808\ub4dc\uc5d0\uc11c \uac19\uc740\ub370\uc774\ud130 \uac74\ub4dc\ub9b4\ub54c \ucda9\ub3cc\ub9c9\ub294 \uc548\uc804\uc7a5\uce58\n    \/\/ A safety mechanism to prevent conflicts when threads access the same data\n    std::lock_guard<std::mutex> lock(g_mtx);\n    \/\/ \ubaa8\ub4e0 \uc18c\ucf13 \uc811\uc18d\uc790\uc5d0\uac8c \uba54\uc138\uc9c0\uc804\ub2ec \/ Deliver message to all socket users\n    for (auto* c : g_clients) {\n        c->send(msg);\n    }\n}\n\nint main() {\n    httplib::Server svr;\n\n    svr.Get(\"\/\", [](const httplib::Request&, httplib::Response& res) {\n        res.set_content(R\"(\n        <!doctype html><html><body>\n        <input id=\"msg\" value=\"hello aloy~~\ud83d\udc4b\"><button id=\"send\">Send<\/button>\n        <pre id=\"log\"><\/pre>\n        <script>\n        const log = document.getElementById('log');\n        const ws = new WebSocket('ws:\/\/localhost:5080\/ws');\n        ws.onmessage = (e) => log.textContent += '[recv] ' + e.data + '\\n';\n        document.getElementById('send').onclick = () => {\n        const v = document.getElementById('msg').value;\n        const vplus = \"\ud83d\udc49\ud83c\udffb\" +  v;\n\n        \/\/ws.send(v);\n        ws.send(vplus);\n        log.textContent += '[send] ' + v + '\\n';\n        };\n        <\/script><\/body><\/html>\n        )\", \"text\/html; charset=utf-8\");\n    });\n\n    svr.WebSocket(\"\/ws\", [](const httplib::Request&, httplib::ws::WebSocket& ws) {\n        {\n            std::lock_guard<std::mutex> lock(g_mtx);\n            g_clients.push_back(&ws);\n        }\n\n        std::string msg;\n        while (ws.read(msg)) {\n            broadcast(msg); \/\/ \ubaa8\ub450\uc5d0\uac8c \uc804\uc1a1 \/ send to everyone\n        }\n\n        {\n            std::lock_guard<std::mutex> lock(g_mtx);\n            g_clients.erase(std::remove(g_clients.begin(), g_clients.end(), &ws), g_clients.end());\n        }\n    });\n\n    std::cout << \"ws server: http:\/\/localhost:5080\\n\";\n    svr.listen(\"0.0.0.0\", 5080);\n}\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ucef4\ud30c\uc77c \/ Compiling<\/p>\n\n\n\n
g++ bc_server.cpp -o bc_server -std=c++17 -pthread<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc11c\ubc84\uc2e4\ud589 \/ Run Server<\/p>\n\n\n\n
\"\"
Run Server<\/figcaption><\/figure>\n\n\n\n
\ud83d\udc49\ud83c\udffb client.cpp<\/p>\n\n\n\n
\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c \uc2e4\ud589\uac00\ub2a5\ud55c \ud074\ub77c\uc774\uc5b8\ud2b8\uc785\ub2c8\ub2e4.
This is a client executable in the terminal.<\/p>\n\n\n\n
\u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n
#include \"httplib.h\"\n#include <atomic>\n#include <iostream>\n#include <string>\n#include <thread>\n\nint main() {\n    httplib::ws::WebSocketClient ws(\"ws:\/\/localhost:5080\/ws\");\n    if (!ws.connect()) {\n        std::cerr << \"connect failed\\n\";\n        return 1;\n    }\n\n    std::atomic<bool> running{true};\n\n    \/\/ \uc218\uc2e0 \uc2a4\ub808\ub4dc \/ receive thread\n    std::thread reader([&]() {\n        std::string msg;\n        while (running && ws.read(msg)) {\n            std::cout << \"[recv] \" << msg << '\\n';\n        }\n        running = false;\n    });\n\n    std::cout << \"connected. type message and press Enter.\\n\";\n    std::cout << \"type \/quit to exit.\\n\";\n\n    \/\/ \uc1a1\uc2e0 \ub8e8\ud504 \/ Send loop\n    std::string line;\n    while (running && std::getline(std::cin, line)) {\n        if (line == \"\/quit\") break;\n        \/\/ ws.send(line);\n        ws.send(\"\u2b50\ufe0f\" + line);\n    }\n\n    running = false;\n    ws.close();\n    if (reader.joinable()) reader.join();\n\n    std::cout << \"closed\\n\";\n    return 0;\n}\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ucef4\ud30c\uc77c \/ Compiling<\/p>\n\n\n\n
g++ client.cpp -o client -std=c++17 -pthread<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc2e4\ud589 \/ Run<\/p>\n\n\n\n
\n
\"\"
Browser<\/figcaption><\/figure>\n\n\n\n
\"\"
Terminal<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \uc6f9\uc18c\ucf13\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.Below is an explanation of WebSockets. \ud83d\udc49\ud83c\udffb \uc6f9\uc18c\ucf13\uc740 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uac04\uc758 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.WebSockets enable bidirectional communication between a server and a client. \ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud574\uc11c \uac04\ub2e8\ud55c \ucc44\ud305\uae30\ub2a5\uc744 \uad6c\ud604\ud55c \uac83\uc785\ub2c8\ub2e4.The code below implements a simple chat function using WebSockets. \ud83d\udc49\ud83c\udffb \ud130\ubbf8\ub110\uacfc \ube0c\ub77c\uc6b0\uc800\uac04\uc758 \ucc44\ud305\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.Chatting between the terminal and the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,1],"tags":[],"class_list":["post-5418","post","type-post","status-publish","format-standard","hentry","category-cpp","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=5418"}],"version-history":[{"count":7,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5418\/revisions"}],"predecessor-version":[{"id":5428,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5418\/revisions\/5428"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=5418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=5418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=5418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}