index.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <!DOCTYPE html>
  2. <html lang="ja" data-base-path="&#x2F;cpp-httplib">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>WebSocket - cpp-httplib</title>
  7. <link rel="icon" type="image/svg+xml" href="&#x2F;cpp-httplib/favicon.svg">
  8. <link rel="stylesheet" href="&#x2F;cpp-httplib/css/main.css">
  9. <script>
  10. (function() {
  11. var t = localStorage.getItem('preferred-theme');
  12. if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  13. if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
  14. })();
  15. </script>
  16. </head>
  17. <body>
  18. <header class="header">
  19. <div class="header-inner">
  20. <a href="&#x2F;cpp-httplib/ja/" class="header-title">cpp-httplib <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v0.35.0</span></a>
  21. <div class="header-spacer"></div>
  22. <nav class="header-nav">
  23. <a href="&#x2F;cpp-httplib/ja/">
  24. <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>
  25. Home
  26. </a>
  27. <a href="&#x2F;cpp-httplib/ja/tour&#x2F;">
  28. <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>
  29. Tour
  30. </a>
  31. <a href="https:&#x2F;&#x2F;github.com&#x2F;yhirose&#x2F;cpp-httplib" aria-label="GitHub">
  32. <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>
  33. GitHub
  34. </a>
  35. </nav>
  36. <div class="header-tools">
  37. <button class="theme-toggle" aria-label="Toggle theme"></button>
  38. <div class="lang-selector">
  39. <button class="lang-btn" aria-label="Language">
  40. <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>
  41. JA
  42. </button>
  43. <ul class="lang-popup">
  44. <li><a href="#" data-lang="en">EN</a></li>
  45. <li><a href="#" data-lang="ja">JA</a></li>
  46. </ul>
  47. </div>
  48. </div>
  49. <button class="sidebar-toggle" aria-label="Menu">&#9776;</button>
  50. </div>
  51. </header>
  52. <div class="layout has-sidebar">
  53. <aside class="sidebar">
  54. <nav class="sidebar-nav">
  55. <div class="nav-section">
  56. <a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;" class="nav-section-title active">A Tour of cpp-httplib</a>
  57. <ul class="nav-list">
  58. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;01-getting-started&#x2F;" class="">Getting Started</a></li>
  59. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;02-basic-client&#x2F;" class="">Basic Client</a></li>
  60. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;03-basic-server&#x2F;" class="">Basic Server</a></li>
  61. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;04-static-file-server&#x2F;" class="">Static File Server</a></li>
  62. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;05-tls-setup&#x2F;" class="">TLS Setup</a></li>
  63. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;06-https-client&#x2F;" class="">HTTPS Client</a></li>
  64. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;07-https-server&#x2F;" class="">HTTPS Server</a></li>
  65. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;08-websocket&#x2F;" class="active">WebSocket</a></li>
  66. <li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;09-whats-next&#x2F;" class="">What&#x27;s Next</a></li>
  67. </ul>
  68. </div>
  69. </nav>
  70. </aside>
  71. <main class="content">
  72. <article>
  73. <h1>WebSocket</h1>
  74. <p>cpp-httplibはWebSocketにも対応しています。HTTPのリクエスト/レスポンスと違い、WebSocketはサーバーとクライアントが双方向にメッセージをやり取りできます。チャットやリアルタイム通知に便利です。</p>
  75. <p>さっそく、エコーサーバーとクライアントを作ってみましょう。</p>
  76. <h2>エコーサーバー</h2>
  77. <p>受け取ったメッセージをそのまま返すエコーサーバーです。</p>
  78. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  79. <span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">httplib.h</span><span style="color:#d3d0c8;">&quot;
  80. </span><span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#99cc99;">iostream</span><span style="color:#d3d0c8;">&gt;
  81. </span><span style="color:#d3d0c8;">
  82. </span><span style="color:#cc99cc;">int </span><span style="color:#6699cc;">main</span><span style="color:#d3d0c8;">() {
  83. </span><span style="color:#d3d0c8;"> httplib::Server svr;
  84. </span><span style="color:#d3d0c8;">
  85. </span><span style="color:#d3d0c8;"> svr.</span><span style="color:#6699cc;">WebSocket</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/ws</span><span style="color:#d3d0c8;">&quot;, [](</span><span style="color:#cc99cc;">const</span><span style="color:#d3d0c8;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  86. </span><span style="color:#d3d0c8;"> std::string msg;
  87. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">while </span><span style="color:#d3d0c8;">(ws.</span><span style="color:#6699cc;">read</span><span style="color:#d3d0c8;">(msg)) {
  88. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(msg); </span><span style="color:#747369;">// 受け取ったメッセージをそのまま返す
  89. </span><span style="color:#d3d0c8;"> }
  90. </span><span style="color:#d3d0c8;"> });
  91. </span><span style="color:#d3d0c8;">
  92. </span><span style="color:#d3d0c8;"> std::cout &lt;&lt; &quot;</span><span style="color:#99cc99;">Listening on port 8080...</span><span style="color:#d3d0c8;">&quot; &lt;&lt; std::endl;
  93. </span><span style="color:#d3d0c8;"> svr.</span><span style="color:#6699cc;">listen</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">0.0.0.0</span><span style="color:#d3d0c8;">&quot;, </span><span style="color:#f99157;">8080</span><span style="color:#d3d0c8;">);
  94. </span><span style="color:#d3d0c8;">}
  95. </span></pre>
  96. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  97. <span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#4f5b66;">&quot;
  98. </span><span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#4f5b66;">&gt;
  99. </span><span style="color:#4f5b66;">
  100. </span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#4f5b66;">() {
  101. </span><span style="color:#4f5b66;"> httplib::Server svr;
  102. </span><span style="color:#4f5b66;">
  103. </span><span style="color:#4f5b66;"> svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#4f5b66;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#4f5b66;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  104. </span><span style="color:#4f5b66;"> std::string msg;
  105. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">while </span><span style="color:#4f5b66;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#4f5b66;">(msg)) {
  106. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(msg); </span><span style="color:#a7adba;">// 受け取ったメッセージをそのまま返す
  107. </span><span style="color:#4f5b66;"> }
  108. </span><span style="color:#4f5b66;"> });
  109. </span><span style="color:#4f5b66;">
  110. </span><span style="color:#4f5b66;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Listening on port 8080...</span><span style="color:#4f5b66;">&quot; &lt;&lt; std::endl;
  111. </span><span style="color:#4f5b66;"> svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#4f5b66;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#4f5b66;">);
  112. </span><span style="color:#4f5b66;">}
  113. </span></pre>
  114. </div>
  115. <p><code>svr.WebSocket()</code> でWebSocketハンドラーを登録します。3章の <code>svr.Get()</code> や <code>svr.Post()</code> と同じ感覚ですね。</p>
  116. <p>ハンドラーの中では、<code>ws.read(msg)</code> でメッセージを待ちます。接続が閉じられると <code>read()</code> が <code>false</code> を返すので、ループを抜けます。<code>ws.send(msg)</code> でメッセージを送り返します。</p>
  117. <h2>クライアントからの接続</h2>
  118. <p><code>httplib::ws::WebSocketClient</code> を使ってサーバーに接続してみましょう。</p>
  119. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  120. <span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">httplib.h</span><span style="color:#d3d0c8;">&quot;
  121. </span><span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#99cc99;">iostream</span><span style="color:#d3d0c8;">&gt;
  122. </span><span style="color:#d3d0c8;">
  123. </span><span style="color:#cc99cc;">int </span><span style="color:#6699cc;">main</span><span style="color:#d3d0c8;">() {
  124. </span><span style="color:#d3d0c8;"> httplib::ws::WebSocketClient </span><span style="color:#6699cc;">client</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">ws://localhost:8080/ws</span><span style="color:#d3d0c8;">&quot;);
  125. </span><span style="color:#d3d0c8;">
  126. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(!client.</span><span style="color:#6699cc;">connect</span><span style="color:#d3d0c8;">()) {
  127. </span><span style="color:#d3d0c8;"> std::cout &lt;&lt; &quot;</span><span style="color:#99cc99;">Connection failed</span><span style="color:#d3d0c8;">&quot; &lt;&lt; std::endl;
  128. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">return </span><span style="color:#f99157;">1</span><span style="color:#d3d0c8;">;
  129. </span><span style="color:#d3d0c8;"> }
  130. </span><span style="color:#d3d0c8;">
  131. </span><span style="color:#d3d0c8;"> </span><span style="color:#747369;">// メッセージを送信
  132. </span><span style="color:#d3d0c8;"> client.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">Hello, WebSocket!</span><span style="color:#d3d0c8;">&quot;);
  133. </span><span style="color:#d3d0c8;">
  134. </span><span style="color:#d3d0c8;"> </span><span style="color:#747369;">// サーバーからの応答を受信
  135. </span><span style="color:#d3d0c8;"> std::string msg;
  136. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(client.</span><span style="color:#6699cc;">read</span><span style="color:#d3d0c8;">(msg)) {
  137. </span><span style="color:#d3d0c8;"> std::cout &lt;&lt; msg &lt;&lt; std::endl; </span><span style="color:#747369;">// Hello, WebSocket!
  138. </span><span style="color:#d3d0c8;"> }
  139. </span><span style="color:#d3d0c8;">
  140. </span><span style="color:#d3d0c8;"> client.</span><span style="color:#6699cc;">close</span><span style="color:#d3d0c8;">();
  141. </span><span style="color:#d3d0c8;">}
  142. </span></pre>
  143. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  144. <span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#4f5b66;">&quot;
  145. </span><span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#4f5b66;">&gt;
  146. </span><span style="color:#4f5b66;">
  147. </span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#4f5b66;">() {
  148. </span><span style="color:#4f5b66;"> httplib::ws::WebSocketClient </span><span style="color:#8fa1b3;">client</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">ws://localhost:8080/ws</span><span style="color:#4f5b66;">&quot;);
  149. </span><span style="color:#4f5b66;">
  150. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(!client.</span><span style="color:#8fa1b3;">connect</span><span style="color:#4f5b66;">()) {
  151. </span><span style="color:#4f5b66;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Connection failed</span><span style="color:#4f5b66;">&quot; &lt;&lt; std::endl;
  152. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">return </span><span style="color:#d08770;">1</span><span style="color:#4f5b66;">;
  153. </span><span style="color:#4f5b66;"> }
  154. </span><span style="color:#4f5b66;">
  155. </span><span style="color:#4f5b66;"> </span><span style="color:#a7adba;">// メッセージを送信
  156. </span><span style="color:#4f5b66;"> client.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">Hello, WebSocket!</span><span style="color:#4f5b66;">&quot;);
  157. </span><span style="color:#4f5b66;">
  158. </span><span style="color:#4f5b66;"> </span><span style="color:#a7adba;">// サーバーからの応答を受信
  159. </span><span style="color:#4f5b66;"> std::string msg;
  160. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(client.</span><span style="color:#8fa1b3;">read</span><span style="color:#4f5b66;">(msg)) {
  161. </span><span style="color:#4f5b66;"> std::cout &lt;&lt; msg &lt;&lt; std::endl; </span><span style="color:#a7adba;">// Hello, WebSocket!
  162. </span><span style="color:#4f5b66;"> }
  163. </span><span style="color:#4f5b66;">
  164. </span><span style="color:#4f5b66;"> client.</span><span style="color:#8fa1b3;">close</span><span style="color:#4f5b66;">();
  165. </span><span style="color:#4f5b66;">}
  166. </span></pre>
  167. </div>
  168. <p>コンストラクタには <code>ws://host:port/path</code> 形式のURLを渡します。<code>connect()</code> で接続を開始し、<code>send()</code> と <code>read()</code> でメッセージをやり取りします。</p>
  169. <h2>テキストとバイナリ</h2>
  170. <p>WebSocketにはテキストとバイナリの2種類のメッセージがあります。<code>read()</code> の戻り値で区別できます。</p>
  171. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  172. <span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">WebSocket</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/ws</span><span style="color:#d3d0c8;">&quot;, [](</span><span style="color:#cc99cc;">const</span><span style="color:#d3d0c8;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  173. </span><span style="color:#d3d0c8;"> std::string msg;
  174. </span><span style="color:#d3d0c8;"> httplib::ws::ReadResult ret;
  175. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">while </span><span style="color:#d3d0c8;">((ret = ws.</span><span style="color:#6699cc;">read</span><span style="color:#d3d0c8;">(msg))) {
  176. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(ret == httplib::ws::Binary) {
  177. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(msg.</span><span style="color:#6699cc;">data</span><span style="color:#d3d0c8;">(), msg.</span><span style="color:#6699cc;">size</span><span style="color:#d3d0c8;">()); </span><span style="color:#747369;">// バイナリとして送信
  178. </span><span style="color:#d3d0c8;"> } </span><span style="color:#cc99cc;">else </span><span style="color:#d3d0c8;">{
  179. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(msg); </span><span style="color:#747369;">// テキストとして送信
  180. </span><span style="color:#d3d0c8;"> }
  181. </span><span style="color:#d3d0c8;"> }
  182. </span><span style="color:#d3d0c8;">});
  183. </span></pre>
  184. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  185. <span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#4f5b66;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#4f5b66;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  186. </span><span style="color:#4f5b66;"> std::string msg;
  187. </span><span style="color:#4f5b66;"> httplib::ws::ReadResult ret;
  188. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">while </span><span style="color:#4f5b66;">((ret = ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#4f5b66;">(msg))) {
  189. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(ret == httplib::ws::Binary) {
  190. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(msg.</span><span style="color:#8fa1b3;">data</span><span style="color:#4f5b66;">(), msg.</span><span style="color:#8fa1b3;">size</span><span style="color:#4f5b66;">()); </span><span style="color:#a7adba;">// バイナリとして送信
  191. </span><span style="color:#4f5b66;"> } </span><span style="color:#b48ead;">else </span><span style="color:#4f5b66;">{
  192. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(msg); </span><span style="color:#a7adba;">// テキストとして送信
  193. </span><span style="color:#4f5b66;"> }
  194. </span><span style="color:#4f5b66;"> }
  195. </span><span style="color:#4f5b66;">});
  196. </span></pre>
  197. </div>
  198. <ul>
  199. <li><code>ws.send(const std::string &amp;)</code> — テキストメッセージとして送信</li>
  200. <li><code>ws.send(const char *, size_t)</code> — バイナリメッセージとして送信</li>
  201. </ul>
  202. <p>クライアント側も同じAPIです。</p>
  203. <h2>リクエスト情報へのアクセス</h2>
  204. <p>ハンドラーの第1引数 <code>req</code> から、ハンドシェイク時のHTTPリクエスト情報を読み取れます。認証トークンの確認などに便利です。</p>
  205. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  206. <span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">WebSocket</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/ws</span><span style="color:#d3d0c8;">&quot;, [](</span><span style="color:#cc99cc;">const</span><span style="color:#d3d0c8;"> httplib::Request &amp;req, httplib::ws::WebSocket &amp;ws) {
  207. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">auto</span><span style="color:#d3d0c8;"> token = req.</span><span style="color:#6699cc;">get_header_value</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">Authorization</span><span style="color:#d3d0c8;">&quot;);
  208. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(token.</span><span style="color:#6699cc;">empty</span><span style="color:#d3d0c8;">()) {
  209. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">close</span><span style="color:#d3d0c8;">(httplib::ws::CloseStatus::PolicyViolation, &quot;</span><span style="color:#99cc99;">unauthorized</span><span style="color:#d3d0c8;">&quot;);
  210. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">return</span><span style="color:#d3d0c8;">;
  211. </span><span style="color:#d3d0c8;"> }
  212. </span><span style="color:#d3d0c8;">
  213. </span><span style="color:#d3d0c8;"> std::string msg;
  214. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">while </span><span style="color:#d3d0c8;">(ws.</span><span style="color:#6699cc;">read</span><span style="color:#d3d0c8;">(msg)) {
  215. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(msg);
  216. </span><span style="color:#d3d0c8;"> }
  217. </span><span style="color:#d3d0c8;">});
  218. </span></pre>
  219. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  220. <span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#4f5b66;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#4f5b66;"> httplib::Request &amp;req, httplib::ws::WebSocket &amp;ws) {
  221. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">auto</span><span style="color:#4f5b66;"> token = req.</span><span style="color:#8fa1b3;">get_header_value</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">Authorization</span><span style="color:#4f5b66;">&quot;);
  222. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(token.</span><span style="color:#8fa1b3;">empty</span><span style="color:#4f5b66;">()) {
  223. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">close</span><span style="color:#4f5b66;">(httplib::ws::CloseStatus::PolicyViolation, &quot;</span><span style="color:#a3be8c;">unauthorized</span><span style="color:#4f5b66;">&quot;);
  224. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">return</span><span style="color:#4f5b66;">;
  225. </span><span style="color:#4f5b66;"> }
  226. </span><span style="color:#4f5b66;">
  227. </span><span style="color:#4f5b66;"> std::string msg;
  228. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">while </span><span style="color:#4f5b66;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#4f5b66;">(msg)) {
  229. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(msg);
  230. </span><span style="color:#4f5b66;"> }
  231. </span><span style="color:#4f5b66;">});
  232. </span></pre>
  233. </div>
  234. <h2>WSSで使う</h2>
  235. <p>HTTPS上のWebSocket(WSS)にも対応しています。サーバー側は <code>httplib::SSLServer</code> にWebSocketハンドラーを登録するだけです。</p>
  236. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  237. <span style="color:#d3d0c8;">httplib::SSLServer </span><span style="color:#6699cc;">svr</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">cert.pem</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">key.pem</span><span style="color:#d3d0c8;">&quot;);
  238. </span><span style="color:#d3d0c8;">
  239. </span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">WebSocket</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/ws</span><span style="color:#d3d0c8;">&quot;, [](</span><span style="color:#cc99cc;">const</span><span style="color:#d3d0c8;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  240. </span><span style="color:#d3d0c8;"> std::string msg;
  241. </span><span style="color:#d3d0c8;"> </span><span style="color:#cc99cc;">while </span><span style="color:#d3d0c8;">(ws.</span><span style="color:#6699cc;">read</span><span style="color:#d3d0c8;">(msg)) {
  242. </span><span style="color:#d3d0c8;"> ws.</span><span style="color:#6699cc;">send</span><span style="color:#d3d0c8;">(msg);
  243. </span><span style="color:#d3d0c8;"> }
  244. </span><span style="color:#d3d0c8;">});
  245. </span><span style="color:#d3d0c8;">
  246. </span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">listen</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">0.0.0.0</span><span style="color:#d3d0c8;">&quot;, </span><span style="color:#f99157;">8443</span><span style="color:#d3d0c8;">);
  247. </span></pre>
  248. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  249. <span style="color:#4f5b66;">httplib::SSLServer </span><span style="color:#8fa1b3;">svr</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">cert.pem</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">key.pem</span><span style="color:#4f5b66;">&quot;);
  250. </span><span style="color:#4f5b66;">
  251. </span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">WebSocket</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/ws</span><span style="color:#4f5b66;">&quot;, [](</span><span style="color:#b48ead;">const</span><span style="color:#4f5b66;"> httplib::Request &amp;, httplib::ws::WebSocket &amp;ws) {
  252. </span><span style="color:#4f5b66;"> std::string msg;
  253. </span><span style="color:#4f5b66;"> </span><span style="color:#b48ead;">while </span><span style="color:#4f5b66;">(ws.</span><span style="color:#8fa1b3;">read</span><span style="color:#4f5b66;">(msg)) {
  254. </span><span style="color:#4f5b66;"> ws.</span><span style="color:#8fa1b3;">send</span><span style="color:#4f5b66;">(msg);
  255. </span><span style="color:#4f5b66;"> }
  256. </span><span style="color:#4f5b66;">});
  257. </span><span style="color:#4f5b66;">
  258. </span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#4f5b66;">&quot;, </span><span style="color:#d08770;">8443</span><span style="color:#4f5b66;">);
  259. </span></pre>
  260. </div>
  261. <p>クライアント側は <code>wss://</code> スキームを使います。</p>
  262. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  263. <span style="color:#d3d0c8;">httplib::ws::WebSocketClient </span><span style="color:#6699cc;">client</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">wss://localhost:8443/ws</span><span style="color:#d3d0c8;">&quot;);
  264. </span></pre>
  265. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  266. <span style="color:#4f5b66;">httplib::ws::WebSocketClient </span><span style="color:#8fa1b3;">client</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">wss://localhost:8443/ws</span><span style="color:#4f5b66;">&quot;);
  267. </span></pre>
  268. </div>
  269. <h2>次のステップ</h2>
  270. <p>WebSocketの基本がわかりましたね。ここまでで Tourは終わりです。</p>
  271. <p>次のページでは、Tourで取り上げなかった機能をまとめて紹介します。</p>
  272. <p><strong>次:</strong> <a href="../09-whats-next">What's Next</a></p>
  273. </article>
  274. </main>
  275. </div>
  276. <footer class="footer">
  277. &copy; 2026 yhirose. All rights reserved.
  278. </footer>
  279. <script src="&#x2F;cpp-httplib/js/main.js"></script>
  280. </body>
  281. </html>