ded/cpp-httplib
1
0
Fork 0
mirror of https://github.com/yhirose/cpp-httplib.git synced 2026-04-12 19:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
c87d442aac69270be67811ff67a332b96e8e467e
cpp-httplib/docs/ja/tour/08-websocket/index.html
yhirose c87d442aac Remove docs-gen
2026-03-03 23:58:03 -05:00

331 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ja" data-base-path="&#x2F;cpp-httplib">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebSocket - cpp-httplib</title>
<link rel="icon" type="image/svg+xml" href="&#x2F;cpp-httplib/favicon.svg">
<link rel="stylesheet" href="&#x2F;cpp-httplib/css/main.css">
<script>
(function() {
var t = localStorage.getItem('preferred-theme');
if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
})();
</script>
</head>
<body>
<header class="header">
<div class="header-inner">
<a href="&#x2F;cpp-httplib&#x2F;ja/" class="header-title">cpp-httplib <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v0.36.0</span></a>
<div class="header-spacer"></div>
<nav class="header-nav">
<a href="&#x2F;cpp-httplib&#x2F;ja/">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Home
</a>
<a href="&#x2F;cpp-httplib&#x2F;ja/tour&#x2F;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
Tour
</a>
<a href="https:&#x2F;&#x2F;github.com&#x2F;yhirose&#x2F;cpp-httplib" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
GitHub
</a>
</nav>
<div class="header-tools">
<button class="search-btn" aria-label="Search (⌘K)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>
<button class="theme-toggle" aria-label="Toggle theme"></button>
<div class="lang-selector">
<button class="lang-btn" aria-label="Language">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
JA
</button>
<ul class="lang-popup">
<li><a href="#" data-lang="en">EN</a></li>
<li><a href="#" data-lang="ja">JA</a></li>
</ul>
</div>
</div>
<button class="sidebar-toggle" aria-label="Menu">&#9776;</button>
</div>
</header>
<div class="layout has-sidebar">
<aside class="sidebar">
<nav class="sidebar-nav">
<div class="nav-section">
<a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;" class="nav-section-title active">A Tour of cpp-httplib</a>
<ul class="nav-list">
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;01-getting-started&#x2F;" class="">Getting Started</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;02-basic-client&#x2F;" class="">Basic Client</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;03-basic-server&#x2F;" class="">Basic Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;04-static-file-server&#x2F;" class="">Static File Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;05-tls-setup&#x2F;" class="">TLS Setup</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;06-https-client&#x2F;" class="">HTTPS Client</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;07-https-server&#x2F;" class="">HTTPS Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;08-websocket&#x2F;" class="active">WebSocket</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;09-whats-next&#x2F;" class="">What&#x27;s Next</a></li>
</ul>
</div>
</nav>
</aside>
<main class="content">
<article>
<h1>WebSocket</h1>
<p>cpp-httplibはWebSocketにも対応しています。HTTPのリクエスト/レスポンスと違い、WebSocketはサーバーとクライアントが双方向にメッセージをやり取りできます。チャットやリアルタイム通知に便利です。</p>
<p>さっそく、エコーサーバーとクライアントを作ってみましょう。</p>
<h2>エコーサーバー</h2>
<p>受け取ったメッセージをそのまま返すエコーサーバーです。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#c0c5ce;">&quot;
</span><span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#c0c5ce;">&gt;
</span><span style="color:#c0c5ce;">
</span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {
</span><span style="color:#c0c5ce;"> httplib::Server svr;
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#c0c5ce;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#c0c5ce;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
</span><span style="color:#c0c5ce;"> std::string msg;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">while </span><span style="color:#c0c5ce;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#c0c5ce;">(msg)) {
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(msg); </span><span style="color:#65737e;">// 受け取ったメッセージをそのまま返す
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;"> });
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Listening on port 8080...</span><span style="color:#c0c5ce;">&quot; &lt;&lt; std::endl;
</span><span style="color:#c0c5ce;"> svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#c0c5ce;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#c0c5ce;">);
</span><span style="color:#c0c5ce;">}
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&quot;httplib.h&quot;
</span><span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&lt;iostream&gt;
</span><span style="color:#323232;">
</span><span style="font-weight:bold;color:#a71d5d;">int </span><span style="font-weight:bold;color:#795da3;">main</span><span style="color:#323232;">() {
</span><span style="color:#323232;"> httplib::Server svr;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> svr.WebSocket(</span><span style="color:#183691;">&quot;/ws&quot;</span><span style="color:#323232;">, [](</span><span style="font-weight:bold;color:#a71d5d;">const</span><span style="color:#323232;"> httplib::Request </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">, httplib::ws::WebSocket </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">ws) {
</span><span style="color:#323232;"> std::string msg;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">while </span><span style="color:#323232;">(ws.read(msg)) {
</span><span style="color:#323232;"> ws.send(msg); </span><span style="font-style:italic;color:#969896;">// 受け取ったメッセージをそのまま返す
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> std::cout </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt; </span><span style="color:#183691;">&quot;Listening on port 8080...&quot; </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> std::endl;
</span><span style="color:#323232;"> svr.listen(</span><span style="color:#183691;">&quot;0.0.0.0&quot;</span><span style="color:#323232;">, </span><span style="color:#0086b3;">8080</span><span style="color:#323232;">);
</span><span style="color:#323232;">}
</span></pre>
</div></div>
<p><code>svr.WebSocket()</code> でWebSocketハンドラーを登録します。3章の <code>svr.Get()</code> や <code>svr.Post()</code> と同じ感覚ですね。</p>
<p>ハンドラーの中では、<code>ws.read(msg)</code> でメッセージを待ちます。接続が閉じられると <code>read()</code> が <code>false</code> を返すので、ループを抜けます。<code>ws.send(msg)</code> でメッセージを送り返します。</p>
<h2>クライアントからの接続</h2>
<p><code>httplib::ws::WebSocketClient</code> を使ってサーバーに接続してみましょう。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#c0c5ce;">&quot;
</span><span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#c0c5ce;">&gt;
</span><span style="color:#c0c5ce;">
</span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {
</span><span style="color:#c0c5ce;"> httplib::ws::WebSocketClient </span><span style="color:#8fa1b3;">client</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">ws://localhost:8080/ws</span><span style="color:#c0c5ce;">&quot;);
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(!client.</span><span style="color:#8fa1b3;">connect</span><span style="color:#c0c5ce;">()) {
</span><span style="color:#c0c5ce;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Connection failed</span><span style="color:#c0c5ce;">&quot; &lt;&lt; std::endl;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return </span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">;
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> </span><span style="color:#65737e;">// メッセージを送信
</span><span style="color:#c0c5ce;"> client.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">Hello, WebSocket!</span><span style="color:#c0c5ce;">&quot;);
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> </span><span style="color:#65737e;">// サーバーからの応答を受信
</span><span style="color:#c0c5ce;"> std::string msg;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(client.</span><span style="color:#8fa1b3;">read</span><span style="color:#c0c5ce;">(msg)) {
</span><span style="color:#c0c5ce;"> std::cout &lt;&lt; msg &lt;&lt; std::endl; </span><span style="color:#65737e;">// Hello, WebSocket!
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> client.</span><span style="color:#8fa1b3;">close</span><span style="color:#c0c5ce;">();
</span><span style="color:#c0c5ce;">}
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&quot;httplib.h&quot;
</span><span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&lt;iostream&gt;
</span><span style="color:#323232;">
</span><span style="font-weight:bold;color:#a71d5d;">int </span><span style="font-weight:bold;color:#795da3;">main</span><span style="color:#323232;">() {
</span><span style="color:#323232;"> httplib::ws::WebSocketClient client(</span><span style="color:#183691;">&quot;ws://localhost:8080/ws&quot;</span><span style="color:#323232;">);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">!</span><span style="color:#323232;">client.connect()) {
</span><span style="color:#323232;"> std::cout </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt; </span><span style="color:#183691;">&quot;Connection failed&quot; </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> std::endl;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">return </span><span style="color:#0086b3;">1</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// メッセージを送信
</span><span style="color:#323232;"> client.send(</span><span style="color:#183691;">&quot;Hello, WebSocket!&quot;</span><span style="color:#323232;">);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// サーバーからの応答を受信
</span><span style="color:#323232;"> std::string msg;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(client.read(msg)) {
</span><span style="color:#323232;"> std::cout </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> msg </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> std::endl; </span><span style="font-style:italic;color:#969896;">// Hello, WebSocket!
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> client.close();
</span><span style="color:#323232;">}
</span></pre>
</div></div>
<p>コンストラクタには <code>ws://host:port/path</code> 形式のURLを渡します。<code>connect()</code> で接続を開始し、<code>send()</code> と <code>read()</code> でメッセージをやり取りします。</p>
<h2>テキストとバイナリ</h2>
<p>WebSocketにはテキストとバイナリの2種類のメッセージがあります。<code>read()</code> の戻り値で区別できます。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#c0c5ce;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#c0c5ce;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
</span><span style="color:#c0c5ce;"> std::string msg;
</span><span style="color:#c0c5ce;"> httplib::ws::ReadResult ret;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">while </span><span style="color:#c0c5ce;">((ret = ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#c0c5ce;">(msg))) {
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(ret == httplib::ws::Binary) {
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(msg.</span><span style="color:#8fa1b3;">data</span><span style="color:#c0c5ce;">(), msg.</span><span style="color:#8fa1b3;">size</span><span style="color:#c0c5ce;">()); </span><span style="color:#65737e;">// バイナリとして送信
</span><span style="color:#c0c5ce;"> } </span><span style="color:#b48ead;">else </span><span style="color:#c0c5ce;">{
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(msg); </span><span style="color:#65737e;">// テキストとして送信
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">});
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="color:#323232;">svr.WebSocket(</span><span style="color:#183691;">&quot;/ws&quot;</span><span style="color:#323232;">, [](</span><span style="font-weight:bold;color:#a71d5d;">const</span><span style="color:#323232;"> httplib::Request </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">, httplib::ws::WebSocket </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">ws) {
</span><span style="color:#323232;"> std::string msg;
</span><span style="color:#323232;"> httplib::ws::ReadResult ret;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">while </span><span style="color:#323232;">((ret </span><span style="font-weight:bold;color:#a71d5d;">=</span><span style="color:#323232;"> ws.read(msg))) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(ret </span><span style="font-weight:bold;color:#a71d5d;">==</span><span style="color:#323232;"> httplib::ws::Binary) {
</span><span style="color:#323232;"> ws.send(msg.data(), msg.size()); </span><span style="font-style:italic;color:#969896;">// バイナリとして送信
</span><span style="color:#323232;"> } </span><span style="font-weight:bold;color:#a71d5d;">else </span><span style="color:#323232;">{
</span><span style="color:#323232;"> ws.send(msg); </span><span style="font-style:italic;color:#969896;">// テキストとして送信
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">});
</span></pre>
</div></div>
<ul>
<li><code>ws.send(const std::string &amp;)</code> — テキストメッセージとして送信</li>
<li><code>ws.send(const char *, size_t)</code> — バイナリメッセージとして送信</li>
</ul>
<p>クライアント側も同じAPIです。</p>
<h2>リクエスト情報へのアクセス</h2>
<p>ハンドラーの第1引数 <code>req</code> から、ハンドシェイク時のHTTPリクエスト情報を読み取れます。認証トークンの確認などに便利です。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#c0c5ce;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#c0c5ce;"> httplib::Request &amp;req, httplib::ws::WebSocket &amp;ws) {
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">auto</span><span style="color:#c0c5ce;"> token = req.</span><span style="color:#8fa1b3;">get_header_value</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">Authorization</span><span style="color:#c0c5ce;">&quot;);
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(token.</span><span style="color:#8fa1b3;">empty</span><span style="color:#c0c5ce;">()) {
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">close</span><span style="color:#c0c5ce;">(httplib::ws::CloseStatus::PolicyViolation, &quot;</span><span style="color:#a3be8c;">unauthorized</span><span style="color:#c0c5ce;">&quot;);
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return</span><span style="color:#c0c5ce;">;
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;"> std::string msg;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">while </span><span style="color:#c0c5ce;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#c0c5ce;">(msg)) {
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(msg);
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">});
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="color:#323232;">svr.WebSocket(</span><span style="color:#183691;">&quot;/ws&quot;</span><span style="color:#323232;">, [](</span><span style="font-weight:bold;color:#a71d5d;">const</span><span style="color:#323232;"> httplib::Request </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">req, httplib::ws::WebSocket </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">ws) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">auto</span><span style="color:#323232;"> token </span><span style="font-weight:bold;color:#a71d5d;">=</span><span style="color:#323232;"> req.get_header_value(</span><span style="color:#183691;">&quot;Authorization&quot;</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(token.empty()) {
</span><span style="color:#323232;"> ws.close(httplib::ws::CloseStatus::PolicyViolation, </span><span style="color:#183691;">&quot;unauthorized&quot;</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">return</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> std::string msg;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">while </span><span style="color:#323232;">(ws.read(msg)) {
</span><span style="color:#323232;"> ws.send(msg);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">});
</span></pre>
</div></div>
<h2>WSSで使う</h2>
<p>HTTPS上のWebSocket（WSS）にも対応しています。サーバー側は <code>httplib::SSLServer</code> にWebSocketハンドラーを登録するだけです。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#c0c5ce;">httplib::SSLServer </span><span style="color:#8fa1b3;">svr</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">cert.pem</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">key.pem</span><span style="color:#c0c5ce;">&quot;);
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#c0c5ce;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#c0c5ce;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
</span><span style="color:#c0c5ce;"> std::string msg;
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">while </span><span style="color:#c0c5ce;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#c0c5ce;">(msg)) {
</span><span style="color:#c0c5ce;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#c0c5ce;">(msg);
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">});
</span><span style="color:#c0c5ce;">
</span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#c0c5ce;">&quot;, </span><span style="color:#d08770;">8443</span><span style="color:#c0c5ce;">);
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="color:#323232;">httplib::SSLServer </span><span style="font-weight:bold;color:#795da3;">svr</span><span style="color:#323232;">(</span><span style="color:#183691;">&quot;cert.pem&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;key.pem&quot;</span><span style="color:#323232;">);
</span><span style="color:#323232;">
</span><span style="color:#323232;">svr.WebSocket(</span><span style="color:#183691;">&quot;/ws&quot;</span><span style="color:#323232;">, [](</span><span style="font-weight:bold;color:#a71d5d;">const</span><span style="color:#323232;"> httplib::Request </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">, httplib::ws::WebSocket </span><span style="font-weight:bold;color:#a71d5d;">&amp;</span><span style="color:#323232;">ws) {
</span><span style="color:#323232;"> std::string msg;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">while </span><span style="color:#323232;">(ws.read(msg)) {
</span><span style="color:#323232;"> ws.send(msg);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">});
</span><span style="color:#323232;">
</span><span style="color:#323232;">svr.listen(</span><span style="color:#183691;">&quot;0.0.0.0&quot;</span><span style="color:#323232;">, </span><span style="color:#0086b3;">8443</span><span style="color:#323232;">);
</span></pre>
</div></div>
<p>クライアント側は <code>wss://</code> スキームを使います。</p>
<div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
<span style="color:#c0c5ce;">httplib::ws::WebSocketClient </span><span style="color:#8fa1b3;">client</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">wss://localhost:8443/ws</span><span style="color:#c0c5ce;">&quot;);
</span></pre>
</div><div data-code-theme="light"><pre style="background-color:#ffffff;">
<span style="color:#323232;">httplib::ws::WebSocketClient </span><span style="font-weight:bold;color:#795da3;">client</span><span style="color:#323232;">(</span><span style="color:#183691;">&quot;wss://localhost:8443/ws&quot;</span><span style="color:#323232;">);
</span></pre>
</div></div>
<h2>次のステップ</h2>
<p>WebSocketの基本がわかりましたね。ここまでで Tourは終わりです。</p>
<p>次のページでは、Tourで取り上げなかった機能をまとめて紹介します。</p>
<p><strong>次:</strong> <a href="../09-whats-next">What's Next</a></p>
</article>
</main>
</div>
<footer class="footer">
© 2026 Yuji Hirose. All rights reserved.
</footer>
<!-- Search modal -->
<div class="search-overlay" id="search-overlay">
<div class="search-modal">
<div class="search-input-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false">
<kbd class="search-esc">ESC</kbd>
</div>
<ul class="search-results" id="search-results"></ul>
</div>
</div>
<script src="&#x2F;cpp-httplib/js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink