Server-Sent Events（SSE）\u662f\u4e00\u79cd\u670d\u52a1\u5668\u5411\u5ba2\u6237\u7aef\u63a8\u9001\u5b9e\u65f6\u66f4\u65b0\u7684\u6280\u672f，\u57fa\u4e8eHTTP\u534f\u8bae\u3002\u5ba2\u6237\u7aef\u901a\u8fc7EventSource API\u6765\u63a5\u6536\u4e8b\u4ef6\u6d41，\u800c\u670d\u52a1\u5668\u5219\u4fdd\u6301\u4e00\u4e2a\u957f\u8fde\u63a5，\u6301\u7eed\u53d1\u9001\u6570\u636e\u3002\u8fd9\u4e0e\u4f20\u7edf\u7684\u8bf7\u6c42-\u54cd\u5e94\u6a21\u5f0f\u4e0d\u540c，\u5141\u8bb8\u670d\u52a1\u5668\u4e3b\u52a8\u63a8\u9001\u6570\u636e，\u800c\u4e0d\u662f\u7b49\u5f85\u5ba2\u6237\u7aef\u8bf7\u6c42\u3002<\/p>\n
\u5ba2\u6237\u7aef\u901a\u8fc7\u521b\u5efa\u4e00\u4e2aEventSource\u5bf9\u8c61，\u6307\u5b9a\u670d\u52a1\u5668\u7684URL\u3002\u670d\u52a1\u5668\u8bbe\u7f6e\u7279\u5b9a\u7684HTTP\u5934（\u5982Content-Type: text\/event-stream）\u5e76\u4fdd\u6301\u8fde\u63a5\u6253\u5f00\u3002\u670d\u52a1\u5668\u53ef\u4ee5\u5468\u671f\u6027\u6216\u6839\u636e\u4e8b\u4ef6\u53d1\u9001\u6570\u636e，\u6570\u636e\u683c\u5f0f\u9075\u5faaSSE\u7684\u89c4\u8303，\u6bcf\u6761\u6d88\u606f\u4ee5"data: "\u5f00\u5934，\u540e\u8ddf\u6570\u636e\u5185\u5bb9，\u7528\u4e24\u4e2a\u6362\u884c\u7ed3\u675f\u3002<\/p>\n
\u7136\u540e，\u4f18\u7f3a\u70b9\u5206\u6790\u3002\u4f18\u70b9\u662f\u7b80\u5355\u6613\u7528，\u57fa\u4e8eHTTP，\u517c\u5bb9\u6027\u597d，\u9002\u5408\u4f4e\u9891\u66f4\u65b0\u3002\u7f3a\u70b9\u662f\u5355\u5411\u901a\u4fe1，\u670d\u52a1\u5668\u5230\u5ba2\u6237\u7aef，\u4e0d\u652f\u6301\u5ba2\u6237\u7aef\u53d1\u9001\u6570\u636e；\u540c\u65f6，HTTP\u534f\u8bae\u672c\u8eab\u4e0d\u662f\u4e3a\u957f\u8fde\u63a5\u8bbe\u8ba1\u7684，\u53ef\u80fd\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\u6548\u7387\u4e0d\u5982WebSocket\u3002<\/p>\n
\u9002\u7528\u573a\u666f\u5305\u62ec\u5b9e\u65f6\u65b0\u95fb\u63a8\u9001\u3001\u80a1\u7968\u884c\u60c5\u66f4\u65b0\u3001\u65e5\u5fd7\u76d1\u63a7\u7b49\u4e0d\u9700\u8981\u9ad8\u9891\u53cc\u5411\u901a\u4fe1\u7684\u573a\u666f\u3002\u800c\u5982\u679c\u5e94\u7528\u9700\u8981\u9ad8\u9891\u901a\u4fe1\u6216\u53cc\u5411\u901a\u4fe1，WebSocket\u53ef\u80fd\u66f4\u5408\u9002\u3002<\/p>\n
\u6700\u540e，\u53ef\u80fd\u9700\u8981\u63d0\u5230\u4e00\u4e9b\u5b9e\u73b0\u7ec6\u8282，\u6bd4\u5982\u6570\u636e\u683c\u5f0f\u3001\u4e8b\u4ef6\u7c7b\u578b\u3001\u91cd\u8bd5\u673a\u5236\u7b49，\u4ee5\u53ca\u5982\u4f55\u5728\u4e0d\u540c\u540e\u7aef\u8bed\u8a00\u4e2d\u5b9e\u73b0SSE，\u6bd4\u5982java\u3001PHP\u3001Node.js\u7b49\u3002<\/p>\n
| \u901a\u4fe1\u65b9\u5411<\/td>\n | \u5355\u5411（\u670d\u52a1\u5668\u2192\u5ba2\u6237\u7aef）<\/td>\n | \u53cc\u5411<\/td>\n<\/tr>\n |
| \u534f\u8bae<\/td>\n | HTTP<\/td>\n | \u72ec\u7acb\u534f\u8bae<\/td>\n<\/tr>\n |
| \u8fde\u63a5\u6570<\/td>\n | \u5929\u7136\u652f\u6301\u591a\u6807\u7b7e\u9875\u5171\u4eab<\/td>\n | \u9700\u81ea\u884c\u5904\u7406\u591a\u8fde\u63a5<\/td>\n<\/tr>\n |
| \u6570\u636e\u683c\u5f0f<\/td>\n | \u6587\u672c\u6d41<\/td>\n | \u4e8c\u8fdb\u5236\/\u6587\u672c<\/td>\n<\/tr>\n |
| \u9002\u7528\u573a\u666f<\/td>\n | \u4f4e\u9891\u66f4\u65b0<\/td>\n | \u9ad8\u9891\/\u53cc\u5411\u901a\u4fe1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n5. \u6700\u4f73\u5b9e\u8df5\u5efa\u8bae<\/h3>\n6. \u4ee3\u7801\u793a\u4f8b<\/h3>\n |
const express = require('express');
\nconst app = express();
\nconst port = 3000;<\/p>\n
\/\/ \u9759\u6001\u6587\u4ef6\u670d\u52a1
\napp.use(express.static('public'));<\/p>\n
\/\/ SSE\u8def\u7531
\napp.get('\/events', (req, res) => {
\n \/\/ \u8bbe\u7f6eSSE\u6240\u9700\u7684\u5934\u4fe1\u606f
\n res.writeHead(200, {
\n 'Content-Type': 'text\/event-stream',
\n 'Cache-Control': 'no-cache',
\n 'Connection': 'keep-alive'
\n });<\/p>\n
\/\/ \u53d1\u9001\u521d\u59cb\u6d88\u606f
\n res.write('data: Connected to SSE server\\\\n\\\\n');<\/p>\n
\/\/ \u5b9a\u65f6\u53d1\u9001\u6d88\u606f
\n let counter = 0;
\n const intervalId = setInterval(() => {
\n counter++;
\n const data = {
\n message: `Server time: ${new Date().toISOString()}`,
\n counter: counter
\n };
\n res.write(`data: ${JSON.stringify(data)}\\\\n\\\\n`);<\/p>\n
\/\/ \u6a21\u62df\u7ed3\u675f\u6761\u4ef6
\n if (counter >= 10) {
\n res.write('event: end\\\\ndata: Stream ended\\\\n\\\\n');
\n clearInterval(intervalId);
\n res.end();
\n }
\n }, 1000);<\/p>\n
\/\/ \u5ba2\u6237\u7aef\u65ad\u5f00\u8fde\u63a5\u65f6\u6e05\u7406
\n req.on('close', () => {
\n console.log('Client disconnected');
\n clearInterval(intervalId);
\n res.end();
\n });
\n});<\/p>\n
app.listen(port, () => {
\n console.log(`SSE server running at http:\/\/localhost:${port}`);
\n}); <\/p>\n
<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>SSE Demo<\/title>
\n<\/head>
\n<body>
\n <h1>Server-Sent Events Demo<\/h1>
\n <div id="events"><\/div><\/p>\n
<script>
\n const eventSource = new EventSource('\/events');
\n const eventsDiv = document.getElementById('events');<\/p>\n
\/\/ \u76d1\u542c\u9ed8\u8ba4\u6d88\u606f\u4e8b\u4ef6
\n eventSource.onmessage = function(e) {
\n const data = JSON.parse(e.data);
\n const p = document.createElement('p');
\n p.textContent = `${data.message} (Count: ${data.counter})`;
\n eventsDiv.appendChild(p);
\n };<\/p>\n
\/\/ \u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6
\n eventSource.addEventListener('end', function(e) {
\n const p = document.createElement('p');
\n p.textContent = `Event: ${e.type}, Data: ${e.data}`;
\n eventsDiv.appendChild(p);
\n eventSource.close();
\n console.log('EventSource closed');
\n });<\/p>\n
\/\/ \u9519\u8bef\u5904\u7406
\n eventSource.onerror = function(e) {
\n console.error('EventSource failed:', e);
\n eventSource.close();
\n };
\n <\/script>
\n<\/body>
\n<\/html> <\/p>\n
\u8fde\u63a5\u7ba1\u7406：\u786e\u4fdd\u5728\u5ba2\u6237\u7aef\u65ad\u5f00\u8fde\u63a5\u65f6\u6e05\u7406\u5b9a\u65f6\u5668\u548c\u8d44\u6e90<\/p>\n<\/li>\n
\u91cd\u8fde\u673a\u5236：SSE\u5ba2\u6237\u7aef\u4f1a\u81ea\u52a8\u5c1d\u8bd5\u91cd\u65b0\u8fde\u63a5<\/p>\n<\/li>\n
CORS：\u5982\u679c\u5ba2\u6237\u7aef\u548c\u670d\u52a1\u5668\u4e0d\u540c\u6e90，\u9700\u8981\u8bbe\u7f6eCORS\u5934<\/p>\n<\/li>\n
\u6027\u80fd\u8003\u8651：\u5bf9\u4e8e\u5927\u91cf\u5ba2\u6237\u7aef\u8fde\u63a5，\u8003\u8651\u4f7f\u7528\u4e13\u95e8\u7684\u89e3\u51b3\u65b9\u6848\u5982Redis PUB\/SUB<\/p>\n<\/li>\n
\u6d4f\u89c8\u5668\u652f\u6301：\u5927\u591a\u6570\u73b0\u4ee3\u6d4f\u89c8\u5668\u90fd\u652f\u6301SSE，\u4f46\u4e0d\u5305\u62ecIE<\/p>\n<\/li>\n
SSE \u9002\u7528\u4e8e\u5927\u591a\u6570\u5b9e\u65f6\u6027\u8981\u6c42\u4e0d\u9ad8\u7684\u573a\u666f，\u5982\u5b9e\u65f6\u901a\u77e5\u3001\u80a1\u7968\u884c\u60c5\u3001\u65b0\u95fb\u63a8\u9001\u7b49\u3002\u5176\u7b80\u6d01\u6027\u548c\u517c\u5bb9\u6027\u4f7f\u5176\u6210\u4e3a\u8f7b\u91cf\u7ea7\u5b9e\u65f6\u901a\u4fe1\u7684\u9996\u9009\u65b9\u6848\u3002\u5bf9\u4e8e\u9700\u8981\u53cc\u5411\u901a\u4fe1\u6216\u9ad8\u9891\u66f4\u65b0\u7684\u573a\u666f，\u5efa\u8bae\u8003\u8651 WebSocket \u6280\u672f\u3002<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb809\u6b21\uff0c\u70b9\u8d5e19\u6b21\uff0c\u6536\u85cf14\u6b21\u3002Server-Sent Events\uff08SSE\uff09\u662f\u4e00\u79cd\u670d\u52a1\u5668\u5411\u5ba2\u6237\u7aef\u63a8\u9001\u5b9e\u65f6\u66f4\u65b0\u7684\u6280\u672f\uff0c\u57fa\u4e8eHTTP\u534f\u8bae\u3002\u5ba2\u6237\u7aef\u901a\u8fc7EventSource API\u6765\u63a5\u6536\u4e8b\u4ef6\u6d41\uff0c\u800c\u670d\u52a1\u5668\u5219\u4fdd\u6301\u4e00\u4e2a\u957f\u8fde\u63a5\uff0c\u6301\u7eed\u53d1\u9001\u6570\u636e\u3002\u8fd9\u4e0e\u4f20\u7edf\u7684\u8bf7\u6c42-\u54cd\u5e94\u6a21\u5f0f\u4e0d\u540c\uff0c\u5141\u8bb8\u670d\u52a1\u5668\u4e3b\u52a8\u63a8\u9001\u6570\u636e\uff0c\u800c\u4e0d\u662f\u7b49\u5f85\u5ba2\u6237\u7aef\u8bf7\u6c42\u3002\u5ba2\u6237\u7aef\u901a\u8fc7\u521b\u5efa\u4e00\u4e2aEventSource\u5bf9\u8c61\uff0c\u6307\u5b9a\u670d\u52a1\u5668\u7684URL\u3002\u670d\u52a1\u5668\u8bbe\u7f6e\u7279\u5b9a\u7684HTTP\u5934\uff08\u5982Content-Type: text\/event-stream\uff09\u5e76\u4fdd\u6301\u8fde\u63a5\u6253\u5f00\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[947,43,44],"topic":[],"class_list":["post-26832","post","type-post","status-publish","format-standard","hentry","category-server","tag-websocket","tag-43","tag-44"],"yoast_head":"\n