![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260113083426-69660392aa0ef.png\")
<\/p>\n\u76ee\u5f55<\/p>\n
\u7b2c\u4e00\u7ae0 \u524d\u8a00<\/p>\n
\u7b2c\u4e8c\u7ae0 \u51c6\u5907\u5de5\u4f5c<\/p>\n
2.1\u00a0SSE \u534f\u8bae\u5230\u5e95\u89c4\u5b9a\u4e86\u5565<\/p>\n
2.2\u00a0SSE \u4e13\u5c5e\u7684\u201c\u76f4\u64ad\u76d1\u63a7\u53f0\u201d<\/p>\n
2.3\u00a0fetchEventSource\u5e93<\/p>\n
2.4\u00a0\u539f\u751f EventSource<\/p>\n
\u7b2c\u4e09\u7ae0 \u5b9e\u6218<\/p>\n
3.1 \u5c01\u88c5hooks，\u5efa\u7acb\u8fde\u63a5<\/p>\n
3.2 \u4f7f\u7528<\/p>\n
3.3\u00a0\u4e8b\u4ef6\u5206\u53d1<\/p>\n
3.4\u00a0\u5f02\u5e38\u4e0e\u91cd\u8fde<\/p>\n
3.5\u00a0\u9875\u9762\u5378\u8f7d\u65f6\u6e05\u7406<\/p>\n
3.6\u00a0\u5b89\u5168\u4e0e\u6027\u80fd<\/p>\n
\u7b2c\u56db\u7ae0 \u603b\u7ed3<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u6700\u8fd1\u9047\u5230\u4e00\u4e2a\u524d\u4eba\u5199\u7684\u9700\u6c42\u5f88\u8499\u5708；\u4e3a\u4e86\u5b9e\u73b0\u4e00\u4e2a\u72b6\u6001\u7684\u5b9e\u65f6\u53d8\u5316：\u5982\u540e\u53f0\u6709\u6570\u636e\u7684\u72b6\u6001\u66f4\u65b0\u4e86\u9700\u8981\u524d\u7aef\u5237\u65b0\u6570\u636e，\u4e8e\u662f\u524d\u7aef\u5c31\u7528setInterval\u5199\u4e86\u4e00\u4e2a\u6bcf\u96945s\u5237\u65b0\u4e00\u4e0b\u6570\u636e\u5217\u8868，\u5982\u679c\u7528\u6237\u8fd8\u8fdb\u884c\u4e86\u67d0\u4e9b\u64cd\u4f5c，\u518d\u7f13\u5b58\u4e00\u4efd，\u5f53\u6570\u636e\u5237\u65b0\u4e86\u4e4b\u540e\u518d\u8fd8\u539f\u56de\u6765，\u7ed9\u5ba2\u6237\u4e00\u79cd\u65e0\u611f\u7684\u611f\u89c9；\u5f53\u770b\u5230\u8fd9\u5757\u4ee3\u7801\u5c31\u5f88\u61f5\u5708\u5440！\u5c31\u4e3a\u4e86\u4e00\u4e2a\u90a3\u6837\u7684\u9700\u6c42，\u5c31\u7528\u00a0setInterval \u5237\u65b0\u6570\u636e？\u592a\u6389\u4ef7\u4e86！\u5bfc\u81f4\u9875\u9762\u57fa\u672c\u4e0a\u90fd\u5728\u5411\u670d\u52a1\u5668\u8bf7\u6c42\u6570\u636e，\u670d\u52a1\u5668\u538b\u529b\u5927，\u524d\u7aef\u4e5f\u6709\u4e00\u70b9\u8d85\u7ea7\u65e0\u654c\u5361！\u79c9\u627f\u7740\u51d1\u5408\u7740\u7528\u662f\u5427！<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u5c0f\u7f16\u4e3a\u4e86\u5904\u7406\u4e0a\u9762\u90a3\u9700\u6c42，\u4e3a\u4e86\u4f18\u5316\u8fd9\u5757\u5185\u5bb9，\u5c31\u8ddf\u540e\u7aef\u5546\u91cf\u597d，\u51b3\u5b9a\u4f7f\u7528SSE\u5904\u7406\u8fd9\u4e2a\u529f\u80fd！\u4e0b\u9762\u662f\u5c0f\u7f16\u5904\u7406\u7684\u76f8\u5173\u57fa\u672c\u4ee3\u7801（\u6ce8\u610f！\u4e0d\u662f\u5177\u4f53\u529f\u80fd\u7684\u54df！）<\/p>\n
\u9488\u5bf9SSE，\u5c0f\u7f16\u8981\u5e26\u5927\u5bb6\u4e0b\u8ba4\u8bc6\u51e0\u4e2a\u5de5\u5177，\u65b9\u4fbf\u4e4b\u540e\u5bf9\u63a5\u65f6\u7684\u8c03\u8bd5\u2026\u2026<\/p>\n
<\/p>\n
\u54cd\u5e94\u5934\u5fc5\u987b\u5e26：<\/p>\n
Content-Type: text\/event-stream <\/p>\n
\u8bf7\u6c42\u5934\u5fc5\u987b\u6709：<\/p>\n
Accept: text\/event-stream <\/p>\n
\u4e4b\u540e\u670d\u52a1\u5668\u4fdd\u6301 TCP \u4e0d\u65ad，\u6309\u683c\u5f0f\u5410\u6587\u672c：<\/p>\n<\/li>\n<\/ul>\n
event: message
\ndata: {"id":1,"amount":99}
\nid:1001
\nretry: 5000<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260113083427-6966039317b86.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260113083427-69660393290d3.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260113083427-696603933e62b.png\")
<\/p>\n
\u524d\u7aef\u95ee：\u4e3a\u4ec0\u4e48\u5f88\u591a\u65f6\u5019\u4ee3\u7801\u91cc\u770b\u4e0d\u5230\u643a\u5e26\u4e86text\/event-stream，\u4f46\u662f\u5f53\u6211\u4eec\u770b\u8bf7\u6c42\u5934\u7684\u65f6\u5019\u53c8\u4f1a\u6709\u5462？\u5982\u4e0b\u4ee3\u7801：<\/p>\n
import { fetchEventSource } from '@microsoft\/fetch-event-source'<\/p>\n
await fetchEventSource('\/api\/***\/****', {
\n method: 'POST',
\n headers: { 'Content-Type': 'application\/json' },
\n body: JSON.stringify({ userId: 123 }),
\n onmessage(msg) { console.log(msg.data) }
\n}) <\/p>\n
\u56de\u7b54：\u662f\u8fd9\u4e2a\u5e93\u5728\u80cc\u540e\u5077\u5077\u5e72\u4e86\u4e09\u4ef6\u4e8b：<\/p>\n
\u56e0\u6b64：\u300c\u524d\u7aef\u7528\u4e86\u8fd9\u4e2a\u5e93\u4e4b\u540e\u4ee3\u7801\u5c42\u9762\u300d\u770b\u4e0d\u5230 event-stream，\u300c\u534f\u8bae\u5c42\u9762\u300d\u4ecd\u5728\u4e25\u683c\u9075\u5b88 SSE \u89c4\u8303<\/span>\u3002 \u8fd9\u4e5f\u89e3\u91ca\u4e86\u4e3a\u4f55 Chrome \u4f9d\u7136\u628a\u5b83\u6536\u8fdb EventStream \u680f\u3002<\/p>\n \u4e0d\u4f7f\u7528\u539f\u751fEventSource\u7684\u539f\u56e0，\u4e09\u5927\u75db\u70b9：<\/p>\n \/** \/** \/** \/\/ \u5efa\u7acb SSE \u8fde\u63a5 \/** \/\/ \u8fd4\u56de\u63a7\u5236\u5668\u548c\u64cd\u4f5c\u65b9\u6cd5 \u89e3\u91ca：<\/p>\n controller = new AbortController(); import { useSse } from '@\/hooks\/useSse' const chatList = ref([])<\/p>\n \/\/ \u524d\u7aef\u9700\u8981\u6a21\u62df\u95ee\u7b54\u65f6\u4e24\u79cd\u65b9\u5f0f\u7684\u5bf9\u8c61 const setAnswer = (obj) => { \u540e\u7aef\u53ef\u4ee5\u53d1\u4e09\u79cd\u6807\u51c6\u4e8b\u4ef6：<\/p>\n event: message \u2192 onmessage \u9ed8\u8ba4 \u524d\u7aef\u53ea\u9700\u8981\u9488\u5bf9\u4e8b\u4ef6\u7c7b\u578bmessage\u4e0emessage_end\u5904\u7406\u903b\u8f91\u5373\u53ef；\u5982\u679c\u53ef\u4ee5\u5de5\u5177\u7c7b\u7528 handlers[msg.event] \u505a map \u5206\u53d1，\u6bd4 if\/else \u6613\u6269\u5c55\u3002<\/p>\n const handlers = { fetchEventSource \u5185\u7f6e\u6307\u6570\u9000\u907f\u91cd\u8fde（\u9ed8\u8ba4 3 s \u2192 6 s \u2192 12 s\u2026）\u3002 \u6211\u4eec\u53ea\u9700\u5728 onerror \u91cc\u505a\u4e09\u4ef6\u4e8b：<\/p>\n \u9632\u6b62\u5207\u8def\u7531\u540e\u540e\u53f0\u4ecd\u5360\u7528\u8fde\u63a5\u6570\u3002<\/p>\n () => closeSSE() <\/p>\n \u00a0 – \u653e\u5728\u8bf7\u6c42\u4f53\u4e2d：<\/p>\n headers: { – \u653e\u5728\u53c2\u6570\u4e2d：<\/p>\n const data = { \u524d\u7aef fetchEventSource \u81ea\u52a8 Accept: text\/event-stream \u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb225\u6b21\uff0c\u70b9\u8d5e6\u6b21\uff0c\u6536\u85cf4\u6b21\u3002\u672c\u6587\u63a2\u8ba8\u4e86\u5982\u4f55\u4f18\u5316\u524d\u7aef\u5b9e\u65f6\u6570\u636e\u66f4\u65b0\u65b9\u6848\uff0c\u5c06\u4f20\u7edf\u7684setInterval\u8f6e\u8be2\u6539\u4e3aSSE\uff08Server-Sent Events\uff09\u6280\u672f\u3002\u901a\u8fc7SSE\u6280\u672f\uff0c\u5b9e\u73b0\u4e86\u66f4\u9ad8\u6548\u7684\u6570\u636e\u5b9e\u65f6\u66f4\u65b0\uff0c\u540c\u65f6\u964d\u4f4e\u4e86\u670d\u52a1\u5668\u8d1f\u8f7d\u548c\u524d\u7aef\u6027\u80fd\u6d88\u8017\u3002<\/p>\n","protected":false},"author":2,"featured_media":59302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"topic":[],"class_list":["post-59306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server"],"yoast_head":"\n2.4\u00a0\u539f\u751f EventSource<\/h3>\n
\u7b2c\u4e09\u7ae0 \u5b9e\u6218<\/h2>\n
3.1 \u5c01\u88c5hooks，\u5efa\u7acb\u8fde\u63a5<\/h3>\n
\n * SSE (Server-Sent Events) Hook
\n * \u7528\u4e8e\u5728 Vue \u7ec4\u4ef6\u4e2d\u7ba1\u7406 SSE \u8fde\u63a5
\n *\/
\nimport { ref } from 'vue'
\nimport { fetchEventSource } from '@microsoft\/fetch-event-source'
\nimport _c from '@\/config\/index'<\/p>\n
\n * SSE \u8fde\u63a5\u7ba1\u7406 Hook
\n * @returns {Object} \u5305\u542b\u63a7\u5236\u5668\u548c SSE \u64cd\u4f5c\u65b9\u6cd5\u7684\u5bf9\u8c61
\n *\/
\nexport function useSse() {
\n \/\/ \u7528\u4e8e\u7ba1\u7406 SSE \u8fde\u63a5\u7684\u63a7\u5236\u5668\u5b9e\u4f8b
\n const controller = ref(null)<\/p>\n
\n * \u542f\u52a8 SSE \u8fde\u63a5
\n * @param {Object} data – \u53d1\u9001\u7ed9\u670d\u52a1\u5668\u7684\u8bf7\u6c42\u6570\u636e
\n * @param {Function} callBack – \u63a5\u6536 SSE \u6d88\u606f\u7684\u56de\u8c03\u51fd\u6570
\n *\/
\n async function startSSE(data, callBack, url) {
\n \/\/ \u521b\u5efa\u65b0\u7684 AbortController \u5b9e\u4f8b
\n controller.value = new AbortController()<\/p>\n
\n fetchEventSource(_c.baseApiPrefix + url, {
\n method: 'POST',
\n headers: {
\n 'Content-Type': 'application\/json'
\n },
\n \/\/ \u8bf7\u6c42\u4f53\u6570\u636e，\u8f6c\u6362\u4e3a JSON \u5b57\u7b26\u4e32
\n body: JSON.stringify(data),
\n \/\/ \u7528\u4e8e\u7ec8\u6b62\u8fde\u63a5\u7684\u4fe1\u53f7
\n signal: controller.value.signal,
\n \/\/ \u7981\u6b62\u540e\u53f0\u91cd\u8fde
\n openWhenHidden: false,
\n \/\/ \u8fde\u63a5\u5efa\u7acb\u65f6\u7684\u56de\u8c03
\n onopen() {
\n console.log('\u5efa\u7acb\u8fde\u63a5\u7684\u56de\u8c03')
\n },
\n \/\/ \u8fde\u63a5\u5173\u95ed\u65f6\u7684\u56de\u8c03
\n onclose() {
\n console.log('\u5173\u95ed\u8fde\u63a5\u7684\u56de\u8c03')
\n \/\/ \u5173\u95ed SSE \u8fde\u63a5
\n closeSSE()
\n },
\n \/\/ \u63a5\u6536\u6d88\u606f\u65f6\u7684\u56de\u8c03
\n onmessage(msg) {
\n console.log('\u6536\u5230 SSE \u6d88\u606f:', msg)
\n \/\/ \u89e3\u6790 JSON \u6570\u636e\u5e76\u4f20\u9012\u7ed9\u56de\u8c03\u51fd\u6570
\n callBack(JSON.parse(msg.data))
\n },
\n \/\/ \u8fde\u63a5\u9519\u8bef\u65f6\u7684\u56de\u8c03
\n onerror(err) {
\n \/\/ \u901a\u77e5\u56de\u8c03\u51fd\u6570\u53d1\u751f\u9519\u8bef
\n callBack({ event: 'error', data: err })
\n \/\/ \u5173\u95ed SSE \u8fde\u63a5
\n closeSSE()
\n \/\/ \u629b\u51fa\u9519\u8bef
\n throw err
\n }
\n })
\n }<\/p>\n
\n * \u5173\u95ed SSE \u8fde\u63a5
\n *\/
\n function closeSSE() {
\n if (controller.value) {
\n \/\/ \u7ec8\u6b62\u5f53\u524d\u8fde\u63a5
\n controller.value.abort()
\n \/\/ \u6e05\u7a7a\u63a7\u5236\u5668\u5f15\u7528
\n controller.value = null
\n }
\n }<\/p>\n
\n return {
\n controller,
\n startSSE,
\n closeSSE
\n }
\n}<\/p>\n
\nawait fetchEventSource(url, {
\n method: 'POST',
\n headers: { 'Content-Type': 'application\/json' },
\n body: JSON.stringify(data),
\n signal: controller.signal,
\n openWhenHidden: false \/\/ \u5207\u540e\u53f0\u5c31\u6682\u505c，\u7701\u6d41\u91cf
\n}) <\/p>\n\n
3.2 \u4f7f\u7528<\/h3>\n
\nconst { startSSE } = useSse()<\/p>\n
\n\/\/\u95ee
\nchatList.value.push({
\n mathId: new Date().getTime() + Math.random(),
\n type: 'ask',
\n text: val,
\n files: files
\n})
\n\/\/\u7b54
\nchatList.value.push({
\n mathId: new Date().getTime() + Math.random(),
\n type: 'answer',
\n answer: '',
\n thoughts: ''
\n})<\/p>\n
\n switch (obj.event) {
\n case 'message': {
\n \/\/ \u5904\u7406\u540e\u7aef\u8fd4\u56demessage\u65f6\u7684\u903b\u8f91
\n break
\n }
\n case 'message_end':
\n \/\/ \u6d88\u606f\u7ed3\u675f\u65f6\u7684\u903b\u8f91
\n break
\n }
\n \/\/ scrollToBottom()
\n} <\/p>\n3.3\u00a0\u4e8b\u4ef6\u5206\u53d1<\/h3>\n
\nevent: ping \u2192 \u5fc3\u8df3，\u524d\u7aef\u5ffd\u7565\u5373\u53ef
\nevent: message_end \u2192 \u672c\u6b21\u6279\u6b21\u7684\u7ed3\u675f\u6807\u8bb0 <\/p>\n
\n message: () => {
\n try {
\n callBack(JSON.parse(msg.data))
\n } catch (e) {
\n callBack({ event: 'error', data: 'Failed to parse message data' })
\n }
\n },
\n ping: () => {},
\n message_end: () => {
\n try {
\n callBack(JSON.parse(msg.data))
\n } catch (e) {
\n callBack({ event: 'error', data: 'Failed to parse message_end data' })
\n }
\n }
\n}
\nconst handler = handlers[msg.event]
\nif (handler) {
\n handler()
\n} <\/p>\n3.4\u00a0\u5f02\u5e38\u4e0e\u91cd\u8fde<\/h3>\n
3.5\u00a0\u9875\u9762\u5378\u8f7d\u65f6\u6e05\u7406<\/h3>\n
3.6\u00a0\u5b89\u5168\u4e0e\u6027\u80fd<\/h3>\n
\n
\n 'Content-Type': 'application\/json',
\n 'Authorization': 'Bearer ' + (getToken() || 'test')
\n} <\/p>\n
\n userId: 123,
\n inputs: {
\n token: getToken() ? `Bearer ${getToken()}` : 'Bearer test'
\n },
\n appKey: appKey.value,
\n chatId: currentChatId.value,
\n \u2026\u2026
\n} <\/p>\n\n
\u7b2c\u56db\u7ae0 \u603b\u7ed3<\/h2>\n
\n \u2193 POST + Token
\n\u540e\u7aef SseEmitter \u54cd\u5e94 Content-Type: text\/event-stream
\n \u2193 \u6570\u636e\u53d8\u66f4
\nChrome DevTools \u2192 EventStream \u680f\u5b9e\u65f6\u6eda\u52a8 <\/p>\n\n