example/wsecho.cc

#include <httplib.h>
#include <iostream>

using namespace httplib;

const auto html = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Demo</title>
<style>
  body { font-family: monospace; margin: 2em; }
  #log { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 8px; }
  .controls { margin: 8px 0; }
  button { margin-right: 4px; }
</style>
</head>
<body>
<h1>WebSocket Demo</h1>
<p>Server accepts subprotocols: <b>echo</b>, <b>chat</b> (or none)</p>

<div class="controls">
  <label>Subprotocols: </label>
  <input id="protos" type="text" value="echo, chat" placeholder="leave empty for none" />
  <button onclick="doConnect()">Connect</button>
  <button onclick="doDisconnect()">Disconnect</button>
</div>

<div class="controls">
  <input id="msg" type="text" placeholder="Type a message..." />
  <button onclick="doSend()">Send</button>
</div>

<div class="controls">
  <button onclick="startAuto()">Start Auto (1s)</button>
  <button onclick="stopAuto()">Stop Auto</button>
  <span id="auto-status"></span>
</div>

<pre id="log"></pre>

<script>
var sock = null;
var logEl = document.getElementById("log");
var statusEl = document.getElementById("auto-status");
var timer = null;
var seq = 0;

function appendLog(text) {
  logEl.textContent += text + "\n";
  logEl.scrollTop = logEl.scrollHeight;
}

function doConnect() {
  if (sock && sock.readyState <= 1) { sock.close(); }
  var input = document.getElementById("protos").value.trim();
  var protocols = input ? input.split(/\s*,\s*/).filter(Boolean) : [];
  sock = new WebSocket("ws://" + location.host + "/ws", protocols);
  appendLog("[connecting] proposed: " + (protocols.length ? protocols.join(", ") : "(none)"));
  sock.onopen = function() { appendLog("[connected] subprotocol: " + (sock.protocol || "(none)")); };
  sock.onclose = function() { appendLog("[disconnected]"); stopAuto(); };
  sock.onmessage = function(e) { appendLog("< " + e.data); };
}

function doDisconnect() {
  if (sock) { sock.close(); }
}

function doSend() {
  var input = document.getElementById("msg");
  if (!sock || sock.readyState !== 1 || input.value === "") return;
  sock.send(input.value);
  appendLog("> " + input.value);
  input.value = "";
}

function startAuto() {
  if (timer || !sock || sock.readyState !== 1) return;
  seq = 0;
  statusEl.textContent = "running...";
  timer = setInterval(function() {
    if (!sock || sock.readyState !== 1) { stopAuto(); return; }
    var msg = "auto #" + seq++;
    sock.send(msg);
    appendLog("> " + msg);
  }, 1000);
}

function stopAuto() {
  if (timer) { clearInterval(timer); timer = null; }
  statusEl.textContent = "";
}

document.getElementById("msg").addEventListener("keydown", function(e) {
  if (e.key === "Enter") doSend();
});

doConnect();
</script>
</body>
</html>
)HTML";

int main(void) {
  Server svr;

  svr.Get("/", [&](const Request & /*req*/, Response &res) {
    res.set_content(html, "text/html");
  });

  svr.WebSocket(
      "/ws",
      [](const Request &req, ws::WebSocket &ws) {
        std::cout << "WebSocket connected from " << req.remote_addr
                  << std::endl;

        std::string msg;
        while (ws.read(msg)) {
          std::cout << "Received: " << msg << std::endl;
          ws.send("echo: " + msg);
        }

        std::cout << "WebSocket disconnected" << std::endl;
      },
      [](const std::vector<std::string> &protocols) -> std::string {
        for (const auto &p : protocols) {
          if (p == "echo" || p == "chat") { return p; }
        }
        return "";
      });

  std::cout << "Listening on http://localhost:8080" << std::endl;
  svr.listen("localhost", 8080);
}