2nd/10_Wiki/Topic_HTML/HTML_SSE.md

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

# [[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**
```javascript
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**
```javascript
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
<?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`)**
```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):
```javascript
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  x.innerHTML += event.data + "<br>";
};
```
Server stream contract (PHP):
```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).