2nd/10_Wiki/Topics/Domain_Programming/Topic_HTML/HTML_SSE.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
html-sse	HTML SSE	Frontend	draft	conceptual		Server-Sent Events EventSource SSE server push text/event-stream		B	0.89	2026-06-23	2026-06-23			html web frontend w3schools sse server-sent-events html5	https://www.w3schools.com/html/html5_serversentevents.asp

HTML SSE

🎯 한 줄 통찰 (One-line insight)

Server-Sent Events (SSE) let a web page automatically receive pushed updates from a server through an EventSource connection, instead of the page repeatedly requesting data. [S1]

🧠 핵심 개념 (Core concepts)

• Server-Sent Event — when a web page automatically gets messages/updates from a server; updates are pushed automatically rather than requested. [S1]
• EventSource — the client-side object that opens the connection to the URL sending updates. [S1]
• onmessage — the handler that fires when an update is received. [S1]
• text/event-stream — the server response Content-Type for an SSE stream, with caching disabled and each message prefixed by data: . [S1]
• Typical uses — social media feeds, market/stock data, news updates, sports results. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Feature-detect with typeof(EventSource) — if (typeof(EventSource) !== "undefined") { ... }. [S1]
• Open + handle — new EventSource(url) then assign source.onmessage. [S1]
• Server contract — set Content-Type: text/event-stream, disable caching, write data: ... lines, flush. [S1]

📖 세부 내용 (Details)

What are Server-Sent Events? A server-sent event is when a web page automatically gets messages/updates from a server. Normally, a web page has to request data from the server, but with server-sent events, the updates are pushed automatically. Examples include social media feeds, market/stock data, news updates, and sports results. [S1]

Browser support

API	Chrome	Edge	Firefox	Safari	Opera
SSE	6.0	79.0	6.0	5.0	11.5

Client-side: receive events

const x = document.getElementById("result");
// Check browser support for SSE
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    x.innerHTML += event.data + "<br>";
  };
} else {
  x.innerHTML = "Sorry, no support for server-sent events.";
}

Create an EventSource targeting the URL that sends updates. The onmessage event fires whenever an update arrives, appending the received data to the target element. [S1]

Browser support detection

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

Server-side example (PHP — demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Server-side example (ASP/VB — demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Server code explained [S1]

• Set the "Content-Type" header to "text/event-stream".
• Disable page caching.
• Output data prefixed with "data: ".
• Flush the output data back to the client.

EventSource events

Event	Description
onopen	When a connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

🛠️ 적용 사례 (Applied in summary)

The applied case is a live server-time feed: a client EventSource subscribes to demo_sse.php (or demo_sse.asp), which streams the current server time, and the page appends each update. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Subscribe to an event stream (JavaScript):

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  x.innerHTML += event.data + "<br>";
};

Server stream contract (PHP):

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: ...\n\n";
flush();

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source. Note the directionality: SSE is a server-to-browser push channel — the server initiates updates rather than the page polling for them. [S1]

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: HTML Tutorial
• 관련 개념: HTML Web APIs, HTML Web Workers, HTML Web Storage, HTML Geolocation
• 참조 맥락: Referenced whenever a page must reflect server-side changes in real time (feeds, tickers, live results).

📚 출처 (Sources)

• [S1] W3Schools — HTML SSE — https://www.w3schools.com/html/html5_serversentevents.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "HTML SSE" page (Astra wiki-curation, P-Reinforce v3.1 format).