AkurAI-Framework / site/frontend/realtime.html

Latest change 01843dea338a2aaeff9b2715a27a3f46d50bc083 - feat(site): interactive /realtime demo page (live WS echo + SSE counter) by Ólafur Búi Ólafsson

{% include "header" %}
    <main class="container">
      <header class="page-head">
        <span class="eyebrow">Live demo</span>
        <h1>Realtime</h1>
        <p class="lede">These two panels are talking to this server right now over
        WebSocket and Server-Sent Events — both pure-Rust, zero-dependency, and
        served by the single binary you're looking at. <a href="/docs/realtime">Read how it works →</a></p>
      </header>

      <section class="split rt-grid">
        <!-- Server-Sent Events -->
        <article class="card">
          <header class="rt-head">
            <h3>Server-Sent Events</h3>
            <span id="sse-status" class="status">connecting…</span>
          </header>
          <p class="muted small">The server pushes a <code>tick</code> event every second.
          Your browser's native <code>EventSource</code> receives them — no client library.</p>
          <div class="rt-num" id="sse-count">—</div>
          <ul class="rt-log" id="sse-log" aria-live="polite"></ul>
        </article>

        <!-- WebSocket -->
        <article class="card">
          <header class="rt-head">
            <h3>WebSocket echo</h3>
            <span id="ws-status" class="status">connecting…</span>
          </header>
          <p class="muted small">Type a message; the server echoes it straight back over a
          full-duplex <code>WebSocket</code> connection.</p>
          <form id="ws-form" class="rt-form" autocomplete="off">
            <input id="ws-input" type="text" placeholder="Say something…" aria-label="Message to echo" />
            <button class="btn btn-primary" type="submit">Send</button>
          </form>
          <ul class="rt-log" id="ws-log" aria-live="polite"></ul>
        </article>
      </section>

      <section class="container cta">
        <h2>Realtime, with zero runtime dependencies.</h2>
        <div class="btn-row center">
          <a class="btn btn-secondary" href="/docs/realtime">Realtime docs</a>
          <a class="btn btn-secondary" href="https://github.com/olibuijr/AkurAI-Framework">Source on GitHub</a>
        </div>
      </section>
    </main>
{% include "footer" %}