前端如何用post的方式進(jìn)行eventSource請求
前言
我們平時(shí)的工作中可能需要和服務(wù)端建立鏈接,從而來接受服務(wù)端推送的數(shù)據(jù),常用的就是eventSource,我們平時(shí)常用的就是通過get的方式創(chuàng)建一個(gè)eventSource,但是我們?nèi)绾瓮ㄟ^post的方式創(chuàng)建呢?首先我們介紹一下eventSource,還有他和websocket的區(qū)別:
1.eventSource的介紹
1)eventSource 是一個(gè) Web API,它允許網(wǎng)頁通過 HTTP 長連接(通常稱為 Server-Sent Events (SSE))從 Web 服務(wù)器接收自動(dòng)更新。它使網(wǎng)頁可以接收實(shí)時(shí)更新,而無需刷新頁面或向服務(wù)器發(fā)送重復(fù)請求。
2)使用 eventSource,網(wǎng)頁可以訂閱從服務(wù)器發(fā)送的事件流。這些事件可以是任何格式,例如純文本、JSON 或 XML,并且可以包含服務(wù)器想要發(fā)送的任何數(shù)據(jù)。一旦建立連接,服務(wù)器可以隨時(shí)向客戶端發(fā)送事件,客戶端可以根據(jù)需要處理它們,例如更新 UI 或觸發(fā)其他操作。
3)eventSource API 使用簡單,并且受到大多數(shù)現(xiàn)代 Web 瀏覽器的支持。它通常用于需要實(shí)時(shí)更新的 Web 應(yīng)用程序,例如聊天室、社交媒體提要或股票市場行情。
2.eventSource和websocket的區(qū)別:
1)協(xié)議不同:WebSocket 使用的是一種雙向通信協(xié)議,而 eventSource 使用的是一種單向通信協(xié)議。WebSocket 協(xié)議可以在客戶端和服務(wù)器之間建立一個(gè)長連接,雙方可以同時(shí)發(fā)送和接收消息,而 eventSource 只能由服務(wù)器向客戶端發(fā)送消息。
2)數(shù)據(jù)格式不同:WebSocket 可以發(fā)送任何格式的數(shù)據(jù),例如文本、二進(jìn)制數(shù)據(jù)或 JSON,而 eventSource 只能發(fā)送文本格式的數(shù)據(jù)。
3)支持程度不同:WebSocket 是一種相對較新的技術(shù),在一些舊的瀏覽器或網(wǎng)絡(luò)環(huán)境下可能不被支持,而 eventSource 已經(jīng)被廣泛支持,可以在大多數(shù)現(xiàn)代瀏覽器中使用。
4)應(yīng)用場景不同:WebSocket 更適合那些需要實(shí)時(shí)雙向通信的應(yīng)用,例如在線游戲或視頻會議,而 eventSource 更適合那些需要從服務(wù)器獲取實(shí)時(shí)信息的應(yīng)用,例如股票行情或新聞推送。
3.如何用post的方式請求eventSource
常用的就是通過fetchEventSource這個(gè)庫來實(shí)現(xiàn),實(shí)現(xiàn)方式如下:
npm i --save @rangermauve/fetch-event-source import { fetchEventSource } from '@microsoft/fetch-event-source'; let eventSource = fetchEventSource(Url, { method: 'POST', headers: { "Content-Type": 'application/json', }, body: JSON.stringify(data), onmessage(event) { console.info(event.data); }, onerror() { } })
總結(jié)
到此這篇關(guān)于前端如何用post的方式進(jìn)行eventSource請求的文章就介紹到這了,更多相關(guān)post方式eventSource請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 動(dòng)態(tài)修改css文件用到了cssRule
js 動(dòng)態(tài)修改css文件,循環(huán)用的underscore,在使用cssRule只能使用cssRule.style.padding=0px,詳細(xì)示例如下2014-08-08layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09JavaScript 判斷數(shù)據(jù)類型的4種方法
這篇文章主要介紹了JavaScript 判斷數(shù)據(jù)類型的4種方法,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09