每日雞湯：每個(gè)你想要學(xué)習(xí)的瞬間都是未來(lái)的你向自己求救

最近在做一個(gè)chat相關(guān)的功能，然后由于接口返回特別特別慢，所以需要搞一個(gè)慢慢等待的效果，就是接口一個(gè)單詞一個(gè)單詞的返回，然后前端收到一個(gè)展示一個(gè)，提升用戶(hù)體驗(yàn)。

說(shuō)實(shí)話(huà)我是第一次做這類(lèi)需求，他們給完接口文檔我一臉懵？啥？post請(qǐng)求一次，也能實(shí)現(xiàn)接收后端主動(dòng)來(lái)發(fā)來(lái)的消息？就跟websocket一樣。

一問(wèn)才知道原來(lái)真可以，真的是每天都能學(xué)習(xí)到新鮮的知識(shí)，使用EventSource即可，就是傳說(shuō)中的sse【server-send-events】

沒(méi)錯(cuò)，本菜鳥(niǎo)都干了好幾年了，還沒(méi)做過(guò)這種需求，我做的比較多的就是前端輪訓(xùn)一個(gè)接口用setTimeout 或者setInterval

EventSource - Web API 接口參考 | MDNEventSource 接口是 web 內(nèi)容與服務(wù)器發(fā)送事件通信的接口。https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource注意，前端要想能收到后端發(fā)來(lái)的消息，毫無(wú)疑問(wèn)我們肯定要監(jiān)聽(tīng)消息??！牢記【監(jiān)聽(tīng)】在前端開(kāi)發(fā)中的重要性，監(jiān)聽(tīng)接口返回，監(jiān)聽(tīng)事件觸發(fā)等等，認(rèn)真聽(tīng)才可以讓我們收到別人給我們的消息。

可以看一下mdn的官方文檔用法很簡(jiǎn)單，但是問(wèn)題是原生的EventSource 不能使用post方法，只能使用get方法，而且還不能自定義請(qǐng)求header，所以我們可以使用npm包，常用的有

1. event-source-polyfill? 這個(gè)可以自定義請(qǐng)求頭

2. @microsoft/fetch-event-source 這個(gè)可以使用post請(qǐng)求，也可以自定義請(qǐng)求頭功能強(qiáng)大，建議用這個(gè)

在開(kāi)發(fā)中遇到了一問(wèn)題，我按照@microsoft/fetch-event-source的例子寫(xiě)好了代碼，怎么都接收不到請(qǐng)求，還以為這個(gè)插件有問(wèn)題，或者我寫(xiě)錯(cuò)了，結(jié)果研究半天才發(fā)現(xiàn)是后端代碼寫(xiě)錯(cuò)了，他根本沒(méi)有一個(gè)一個(gè)給我返回，而是等了好長(zhǎng)時(shí)間所有數(shù)據(jù)準(zhǔn)備完畢才返回，這樣導(dǎo)致請(qǐng)求都超時(shí)了，自然就收不到數(shù)據(jù)。

所以如果你也遇到了問(wèn)題，不妨考慮一下是否是這個(gè)原因，這個(gè)插件的demo親測(cè)是沒(méi)有問(wèn)題的，我用的版本是"@microsoft/fetch-event-source": "^2.0.1",

參考

【20230816更新】

還有一個(gè)問(wèn)題就是錯(cuò)誤處理，接口報(bào)錯(cuò)了怎么辦，第一個(gè)想到的肯定是在onerror里面捕獲，但是在打印出來(lái)onerror里面拋出的錯(cuò)誤是

Expected content-type to be text/event-stream, Actual: application/problem+json

這個(gè)不是我們想要的，其實(shí)需要在onopen里面處理，可以看一下官方文檔，同志們一定要好好看官方文檔啊?。?/p>

還有一個(gè)問(wèn)題

@microsoft/fetch-event-source 默認(rèn)在瀏覽器當(dāng)前標(biāo)簽頁(yè)面不處于活動(dòng)狀態(tài)的時(shí)候就取消當(dāng)前請(qǐng)求，切回來(lái)的時(shí)候再重新請(qǐng)求，這樣很多時(shí)候不符合我們的需求，可以在請(qǐng)求參數(shù)加上openWhenHidden: true,文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491085.html

fetchEventSource(url, {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
	},
	body: JSON.stringify(params),
	// 加上這句話(huà)
	openWhenHidden: true,
	//...
}

到了這里，關(guān)于使用post請(qǐng)求建立長(zhǎng)連接實(shí)現(xiàn)sse，接收后端主動(dòng)發(fā)來(lái)的消息，實(shí)現(xiàn)chat-gpt的彈字效果，EventSource的應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！