> ## Documentation Index > Fetch the complete documentation index at: https://docs.revoengine.com/llms.txt > Use this file to discover all available pages before exploring further. # Browser application source > Complete HTML, client, parser and proxy for the SSE example. ## Complete application code These are the complete files from the archive and running application. There are no omitted event handlers, parser helpers or proxy functions. The Component's full journal, tool registry and callbacks are separately available in the [complete backend source](https://docs.revoengine.com/examples/sse/component-source.md#complete-component-source). ```html title="index.html" theme={null} Run · SSE Playground
REVOENGINE / SSE EXAMPLE

Run · SSE Playground

A real Endpoint, GPT-6 Luna and a simple calc tool. Watch the stream and test recovery.

●continue-and-notify · timeout 60 s
Ready

Conversation

GPT-6 Luna + calc
Let's calculate live.Send a message. The model can call calc and stream its answer.

SSE events

Last-Event-ID: 0

Component events and the final result and done frames appear here.

Final return

Waiting for result…
retry: —

Disconnect stops this browser's stream. The wrapper can continue and persist events. Resume sends the same runId and Last-Event-ID without repeating tool execution.

Each new message starts an independent run, without conversation memory. The OpenAI key stays in the instance Secret; the local server uses your RevoEngine credential. POST /examples/openai-sse

OpenAiSseHarness · complete Component source

Open source separately 

Expand to load the source.
``` ```js title="chat.mjs" theme={null} import { createSseParser } from "./sse-parser.mjs"; const $ = (id) => document.getElementById(id); const storeKey = "revo-sse-playground:last-run:v1"; let active = null, run = null, frames = [], assistantText, assistantBody, firstEvent = true; function status(text, state = "idle") { $("status").textContent = text; $("status").dataset.state = state; } function controls() { $("send").disabled = !!active; $("message").disabled = !!active; $("auto-disconnect").disabled = !!active; $("disconnect").disabled = !active; $("recover").disabled = !!active || !run; $("replay").disabled = !!active || !run; $("export").disabled = frames.length === 0; $("run-id").value = run?.runId ?? ""; $("cursor").textContent = "Last-Event-ID: " + (run?.cursor ?? 0); } function save() { try { localStorage.setItem(storeKey, JSON.stringify(run)); } catch {} } function bubble(role, text) { if ($("chat").querySelector(".empty")) $("chat").replaceChildren(); const el = document.createElement("div"); el.className = "bubble " + role; const label = document.createElement("small"); label.textContent = role === "user" ? "You" : "GPT-6 Luna"; const body = document.createElement("div"); body.textContent = text; el.append(label, body); $("chat").append(el); $("chat").scrollTop = $("chat").scrollHeight; return body; } function prepareView(reuseAssistant = false) { frames = []; firstEvent = true; assistantText = ""; $("events").replaceChildren(); $("result").textContent = "Waiting for result…"; $("retry").textContent = "retry: —"; $("model-stats").textContent = "GPT-6 Luna + calc"; if (reuseAssistant && assistantBody?.isConnected) assistantBody.textContent = "Waiting for the model…"; else assistantBody = bubble("assistant", "Waiting for the model…"); } function showFrame(frame, data) { frames.push({ ...frame, data, receivedAt: new Date().toISOString() }); if (firstEvent) { $("events").replaceChildren(); firstEvent = false; } const item = document.createElement("details"); item.className = "frame"; const title = document.createElement("summary"); const seq = document.createElement("span"); seq.className = "seq"; seq.textContent = frame.id ?? "·"; const name = document.createElement("span"); name.textContent = frame.event; const time = document.createElement("time"); time.textContent = new Date().toLocaleTimeString("en-GB"); const payload = document.createElement("pre"); payload.textContent = JSON.stringify(data, null, 2); title.append(seq, name, time); item.append(title, payload); $("events").append(item); $("events").scrollTop = $("events").scrollHeight; } function disconnect() { if (active) { active.manual = true; active.controller.abort(); } } async function connect(after = 0, allowAutoDisconnect = false) { const connection = { controller: new AbortController(), manual: false, done: false, failed: false, auto: allowAutoDisconnect && $("auto-disconnect").checked, }; active = connection; controls(); status( after ? "Recovering from ID " + after + "…" : "Connecting…", "streaming", ); const started = performance.now(); try { const response = await fetch("/api/run", { method: "POST", headers: { "Content-Type": "application/json", "Last-Event-ID": String(after), }, body: JSON.stringify({ runId: run.runId, message: run.message }), signal: connection.controller.signal, }); if (!response.ok) { const text = await response.text(); throw new Error("HTTP " + response.status + ": " + text.slice(0, 600)); } if (!response.headers.get("content-type")?.includes("text/event-stream")) throw new Error("The response is not an SSE stream."); status("Stream connected", "streaming"); const parser = createSseParser((frame) => { if (connection.manual) return; const id = frame.id === undefined ? null : Number(frame.id); if (id !== null && Number.isSafeInteger(id) && id <= run.cursor) return; let data; try { data = JSON.parse(frame.data); } catch { data = frame.data; } showFrame(frame, data); if (id !== null && Number.isSafeInteger(id)) { run.cursor = id; save(); } if (frame.retry !== undefined) $("retry").textContent = "retry: " + frame.retry + " ms"; if (frame.event === "model.delta") { assistantText += data.delta ?? ""; assistantBody.textContent = assistantText; } if (frame.event === "tool.pending") status("Model preparing calc…", "streaming"); if (frame.event === "tool.started") status("Running calc…", "streaming"); if (frame.event === "tool.completed") status("calc = " + data.value + " · model responding…", "streaming"); if (frame.event === "run.disconnected") status("Confirmed: execution continued after disconnect", "streaming"); if (frame.event === "result") { $("result").textContent = JSON.stringify(data, null, 2); assistantText = data.message ?? assistantText; assistantBody.textContent = assistantText || "Empty result."; $("model-stats").textContent = `${data.modelRequests ?? "—"} model requests · ${data.toolCalls ?? "—"} tool call${data.toolCalls === 1 ? "" : "s"}`; } if (frame.event === "error") { connection.failed = true; status("Execution failed — inspect the error event", "error"); $("result").textContent = JSON.stringify(data, null, 2); } if (frame.event === "done") { connection.done = true; connection.failed ||= data?.error === true; status( connection.failed ? "Finished with an error" : "Complete · result → done · " + ((performance.now() - started) / 1000).toFixed(1) + " s", connection.failed ? "error" : "done", ); } controls(); if (connection.auto && frame.event === "tool.pending") { connection.auto = false; disconnect(); } }); const reader = response.body.getReader(); const decoder = new TextDecoder(); try { while (true) { const { done, value } = await reader.read(); if (done) break; parser.push(decoder.decode(value, { stream: true })); if (connection.manual) break; } if (!connection.manual) parser.push(decoder.decode()); } finally { if (connection.manual) await reader.cancel().catch(() => {}); reader.releaseLock(); } if (!connection.done && !connection.manual) status("Stream ended without done — you can resume", "error"); } catch (error) { if (!connection.manual) status(error.message, "error"); } finally { if (connection.manual) status("Disconnected at ID " + run.cursor + " · execution can continue"); active = null; controls(); } } $("form").addEventListener("submit", (event) => { event.preventDefault(); if (active) return; const message = $("message").value.trim(); if (!message) return; run = { runId: "chat-" + crypto.randomUUID(), message, cursor: 0 }; save(); bubble("user", message); prepareView(); void connect(0, true); }); $("disconnect").addEventListener("click", disconnect); $("recover").addEventListener("click", () => { if (run && !active) void connect(run.cursor); }); $("replay").addEventListener("click", () => { if (run && !active) { run.cursor = 0; save(); prepareView(true); void connect(0, false); } }); $("export").addEventListener("click", () => { const href = URL.createObjectURL( new Blob([JSON.stringify({ run, frames }, null, 2)], { type: "application/json", }), ); const link = document.createElement("a"); link.href = href; link.download = run.runId + ".json"; link.click(); URL.revokeObjectURL(href); }); $("source").addEventListener("toggle", async () => { if ($("source").open && !$("source-code").dataset.loaded) { try { const response = await fetch("/component.txt"); if (!response.ok) throw new Error(); $("source-code").textContent = await response.text(); $("source-code").dataset.loaded = "true"; } catch { $("source-code").textContent = "Unable to load the source."; } } }); try { const saved = JSON.parse(localStorage.getItem(storeKey)); if ( saved && typeof saved.runId === "string" && /^[a-zA-Z0-9_-]{1,80}$/.test(saved.runId) && typeof saved.message === "string" && Number.isSafeInteger(saved.cursor) && saved.cursor >= 0 ) { run = saved; bubble("user", run.message); prepareView(); status("Saved run restored · choose Resume or Replay"); } } catch {} controls(); ``` ```js title="sse-parser.mjs" theme={null} // Incremental SSE parser: CR, LF, CRLF, split chunks and multiline data. export function createSseParser(onFrame) { let line = "", skipLF = false, first = true; let event = "", data = [], id, retry; function consume() { if (line === "") { if (data.length) onFrame({ event: event || "message", data: data.join("\n"), ...(id !== undefined ? { id } : {}), ...(retry !== undefined ? { retry } : {}), }); event = ""; data = []; id = undefined; retry = undefined; } else if (!line.startsWith(":")) { const colon = line.indexOf(":"); const field = colon < 0 ? line : line.slice(0, colon); let value = colon < 0 ? "" : line.slice(colon + 1); if (value.startsWith(" ")) value = value.slice(1); if (field === "event") event = value; if (field === "data") data.push(value); if (field === "id" && !value.includes("\0")) id = value; if (field === "retry" && /^\d+$/.test(value)) retry = Number(value); } line = ""; } return { push(chunk) { for (const ch of chunk) { if (first) { first = false; if (ch === "\uFEFF") continue; } if (skipLF) { skipLF = false; if (ch === "\n") continue; } if (ch === "\r") { consume(); skipLF = true; } else if (ch === "\n") consume(); else line += ch; } }, }; } ``` ```js title="server.mjs" theme={null} import http from "node:http"; import { execFile } from "node:child_process"; import fs from "node:fs/promises"; import { pathToFileURL } from "node:url"; import { Readable } from "node:stream"; import { pipeline } from "node:stream/promises"; const publicFiles = new Map([ ["/", ["index.html", "text/html"]], ["/chat.mjs", ["chat.mjs", "text/javascript"]], ["/sse-parser.mjs", ["sse-parser.mjs", "text/javascript"]], ["/component.txt", ["component.txt", "text/plain"]], ]); export function createDemoServer({ authorization, upstream, instance }) { if (!authorization || !upstream) throw new Error("Configure RevoEngine credentials and the Endpoint URL."); const target = new URL(upstream); if ( !["http:", "https:"].includes(target.protocol) || target.username || target.password ) { throw new Error( "Use an HTTP(S) Endpoint URL without embedded credentials.", ); } const server = http.createServer(async (req, res) => { const port = server.address().port; res.setHeader("Cache-Control", "no-store"); res.setHeader("X-Content-Type-Options", "nosniff"); res.setHeader( "Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'", ); if (req.headers.host !== `localhost:${port}`) { res.writeHead(403).end(); return; } if (req.method === "GET" && publicFiles.has(req.url)) { const [name, type] = publicFiles.get(req.url); try { const data = await fs.readFile(new URL(name, import.meta.url)); res .writeHead(200, { "Content-Type": type + "; charset=utf-8" }) .end(data); } catch { res.writeHead(404).end("File not found."); } return; } if (req.url !== "/api/run" || req.method !== "POST") { res.writeHead(404).end(); return; } if ( req.headers.origin !== `http://${req.headers.host}` || req.headers["sec-fetch-site"] === "cross-site" ) { res.writeHead(403).end(); return; } if (!String(req.headers["content-type"]).startsWith("application/json")) { res.writeHead(415).end(); return; } const disconnected = new AbortController(); // A browser abort must also close this request's upstream SSE connection. res.once("close", () => disconnected.abort()); try { const chunks = []; let size = 0; for await (const part of req) { size += part.length; if (size > 16384) { res.writeHead(413).end(); return; } chunks.push(part); } const raw = Buffer.concat(chunks).toString("utf8"); try { JSON.parse(raw); } catch { res.writeHead(400).end("Invalid JSON."); return; } const response = await fetch(target, { method: "POST", headers: { Authorization: authorization, "Content-Type": "application/json", ...(instance ? { instance } : {}), ...(req.headers["last-event-id"] ? { "Last-Event-ID": req.headers["last-event-id"] } : {}), }, body: raw, signal: AbortSignal.any([ disconnected.signal, AbortSignal.timeout(70000), ]), }); res.writeHead(response.status, { "Content-Type": response.headers.get("content-type") || "application/json", "X-Accel-Buffering": "no", }); res.flushHeaders(); // pipeline forwards bytes incrementally and preserves backpressure. if (response.body) await pipeline(Readable.fromWeb(response.body), res); else res.end(); } catch { if (!res.destroyed && !disconnected.signal.aborted) { if (!res.headersSent) res .writeHead(502, { "Content-Type": "application/json" }) .end( JSON.stringify({ message: "The Endpoint is unavailable or the request timed out.", }), ); else res.destroy(); } } }); return server; } export function startDemo() { const port = Number(process.env.DEMO_PORT ?? 4318); if (!Number.isInteger(port) || port < 1024 || port > 65535) throw new Error("Invalid DEMO_PORT."); const server = createDemoServer({ authorization: process.env.REVO_AUTHORIZATION, upstream: process.env.REVO_ENDPOINT_URL, instance: process.env.REVO_INSTANCE, }); server.listen(port, "localhost", () => { const url = `http://localhost:${port}`; console.log(`SSE chat: ${url}. Ctrl+C stops the server.`); if (process.argv.includes("--open") && process.platform === "darwin") { execFile("/usr/bin/open", ["-a", "Google Chrome", url], (error) => { if (error) console.log(`Open ${url} in Chrome.`); }); } }); server.on("error", (error) => { console.error( error.code === "EADDRINUSE" ? `Port ${port} is already in use.` : "Unable to start the local chat.", ); process.exitCode = 1; }); return server; } if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) startDemo(); ``` Continue with [sse browser client](https://docs.revoengine.com/operate/sse-browser-client.md). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.