選擇SSE還是WebSocket，取決于具體的業(yè)務(wù)需求。如果只需要服務(wù)器向客戶(hù)端推送數(shù)據(jù)，且對(duì)通信性能要求不高，SSE是一個(gè)簡(jiǎn)單高效的選擇；而如果需要雙向通信或?qū)π阅芤筝^高，WebSocket則更為適合。

三、標(biāo)準(zhǔn)的EventSource API
在瀏覽器中，SSE通過(guò)EventSource對(duì)象實(shí)現(xiàn)。以下是EventSource API的主要特性和用法：

1. 創(chuàng)建EventSource對(duì)象
使用EventSource對(duì)象時(shí)，需要指定服務(wù)器的URL：
const eventSource = new EventSource(https://example.com/sse);

2. 事件監(jiān)聽(tīng)
EventSource支持三種事件類(lèi)型：
message：處理默認(rèn)事件。
open：連接成功時(shí)觸發(fā)。
error：連接出錯(cuò)或斷開(kāi)時(shí)觸發(fā)。
示例代碼：
eventSource.onopen = function(event) {
console.log('Connection opened:', event);
};
eventSource.onmessage = function(event) {
console.log('Message received:', event.data);
};
eventSource.onerror = function(event) {
console.error('Error occurred:', event);
};

3. 自定義事件類(lèi)型
服務(wù)器可以發(fā)送自定義事件類(lèi)型，客戶(hù)端可以通過(guò)addEventListener監(jiān)聽(tīng)：
eventSource.addEventListener('custom-event', function(event) {
console.log('Custom event received:', event.data);
});

4. 關(guān)閉連接
可以通過(guò)調(diào)用close()方法手動(dòng)關(guān)閉連接：
eventSource.close();
console.log('Connection closed');

5. 服務(wù)器發(fā)送數(shù)據(jù)格式
服務(wù)器需要按照以下格式發(fā)送數(shù)據(jù)：
data: Hello, World!
event: custom-event
id: 12345
retry: 3000
data：事件數(shù)據(jù)。
event：事件類(lèi)型（可選）。
id：事件ID，用于斷線(xiàn)重連時(shí)恢復(fù)狀態(tài)（可選）。
retry：指定重連間隔時(shí)間（以毫秒為單位，可選）。

四、@microsoft/fetch-event-source 介紹
@microsoft/fetch-event-source是微軟開(kāi)發(fā)的一個(gè)輕量級(jí)庫(kù)，用于在Node.js和瀏覽器環(huán)境中實(shí)現(xiàn)SSE（Server-Sent Events）。與原生的EventSource相比，它提供了更多的靈活性和功能，例如支持自定義HTTP方法（如POST）、請(qǐng)求頭、認(rèn)證、請(qǐng)求體等。
npm倉(cāng)庫(kù)：https://www.npmjs.com/package/@microsoft/fetch-event-source。

1. 安裝
可以通過(guò)npm或yarn安裝：
npm install @microsoft/fetch-event-source

2. 使用示例
以下是一個(gè)簡(jiǎn)單的使用示例：
import { fetchEventSource } from '@microsoft/fetch-event-source';
fetchEventSource(https://example.com/sse, {
method: POST,
headers: {
Content-Type: application/json,
Authorization: Bearer YOUR_TOKEN,
},
body: JSON.stringify({ key: value }),
onopen(response) {
if (response.ok && response.headers.get('content-type') === 'text/event-stream') {
console.log('Connection established');
} else {
console.error('Connection failed');
}
},
onmessage(event) {
console.log('Message received:', event.data);
},
onclose() {
console.log('Connection closed by server');
},
onerror(err) {
console.error('Error occurred:', err);
},
});

3. 特性
（1）支持自定義HTTP方法（如POST）。
（2）支持請(qǐng)求頭和請(qǐng)求體。
（3）提供事件鉤子（如onopen、onmessage、onclose、onerror）。
（4）支持?jǐn)嗑€(xiàn)重連。

五、@microsoft/fetch-event-source 原理解析
@microsoft/fetch-event-source的實(shí)現(xiàn)基于fetch API，通過(guò)流式處理實(shí)現(xiàn)了SSE的功能。以下是其核心實(shí)現(xiàn)原理的解析：

1. 核心邏輯
該庫(kù)的核心邏輯是使用fetch API發(fā)起HTTP請(qǐng)求，并通過(guò)ReadableStream解析服務(wù)器返回的事件流。
源碼片段（簡(jiǎn)化版）：
async function fetchEventSource(url, options) {
const response = await fetch(url, options);
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
buffer = lines.pop(); // 保留未完整的行
for (const line of lines) {
if (line.startsWith('data:')) {
const data = line.slice(5).trim();
options.onmessage({ data });
}
}
}
options.onclose();
}

2. POST傳參的實(shí)現(xiàn)
與原生EventSource不同，該庫(kù)允許通過(guò)POST方法發(fā)送參數(shù)。實(shí)現(xiàn)方式是將請(qǐng)求體傳遞給fetch API：
fetch(url, {
method: 'POST',
headers: options.headers,
body: options.body,
});

3. 自動(dòng)重連
當(dāng)連接斷開(kāi)時(shí)，庫(kù)會(huì)自動(dòng)嘗試重新連接：
setTimeout(() => {
fetchEventSource(url, options);
}, retryInterval);

4. 錯(cuò)誤處理
通過(guò)try-catch捕獲錯(cuò)誤，并調(diào)用onerror回調(diào)：
try {
// 讀取流數(shù)據(jù)
} catch (err) {
options.onerror(err);
}

登錄后可進(jìn)行留言，請(qǐng) 登錄 或 注冊(cè)

0/140

確定

0條留言 寫(xiě)留言

快速聯(lián)系

聯(lián)系我們

留下您的聯(lián)系方式，極光的商務(wù)經(jīng)理和技術(shù)專(zhuān)家將快速為您服務(wù)！

聯(lián)系人姓名不能為空

請(qǐng)輸入正確的11位手機(jī)號(hào)碼

企業(yè)名稱(chēng)不能為空

職位不能為空

提交

取消確定

熱門(mén)文章

《GPTBots Multi-Agent架構(gòu)解析：如何通過(guò)多Agent協(xié)同實(shí)現(xiàn)業(yè)務(wù)智能化升級(jí)》

2025-10-13

GPTBots × ZohoSalesIQ 集成實(shí)戰(zhàn)：智能代理與?效轉(zhuǎn)??的最佳實(shí)踐解析

2025-09-05

EngageLab 發(fā)布 Chrome 插件推送能力：解鎖 WebPush 免授權(quán)、系統(tǒng)級(jí)通知新體驗(yàn)

2025-09-01

GPTBots 技術(shù)揭秘：我們?nèi)绾螐?到1打造支撐AI高效運(yùn)行的會(huì)話(huà)級(jí)代碼解釋器

2025-08-18

開(kāi)發(fā)者必看：2025最高效的推送圖標(biāo)配置指南

2025-07-16

相關(guān)文章

極光筆記 | 大語(yǔ)言模型插件

AIGC | LLM 提示工程 -- 如何向ChatGPT提問(wèn)

GPTBots在AI大語(yǔ)言模型應(yīng)用中敏感數(shù)據(jù)匿名化探索和實(shí)踐

構(gòu)建AI賦能的代碼編輯器：GPTBots與Monaco強(qiáng)強(qiáng)聯(lián)合

低延遲音頻深度解析：GPTBots 技術(shù)方案

內(nèi)容標(biāo)簽

#GPTBots

極光官方微信公眾號(hào)

關(guān)注我們，即時(shí)獲取最新極光資訊

0/140

發(fā)送