docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user