快捷導(dǎo)航

vue EventSource使用及配置請求頭、webpack代理配置教程

更新時間：2025年12月17日 15:37:10 作者：我的心巴

EventSourcePolyfill是EventSource封裝的一個方法,可以配置請求頭,安裝依賴后,不需要加請求頭時直接使用,需要加請求頭時可以自定義請求頭,基于webpack的vue項(xiàng)目,需要配置代理以解決跨域問題,設(shè)置devServer的compress屬性為false以實(shí)時收到EventSource的消息

一、安裝依賴

npm install eventsource
npm install event-source-polyfill

二、不需要加請求頭時

const eventSource = new EventSource(url); //我是在vue項(xiàng)目里，普通請求用的axios；這里的url可以直接寫接口路徑，baseUrl會直接使用axios的baseUrl
eventSource.onopen = function (e) {
     console.log(e, "連接打開時觸發(fā)");
};
eventSource.onmessage = function (e) {
     console.log(e);
};
eventSource.onerror = function (e) { //斷開連接及后端返回錯誤信息均會觸發(fā)
     eventSource.close(); // 關(guān)閉連接
};

三、需要加請求頭時

<script>
import { EventSourcePolyfill } from 'event-source-polyfill'

export default {
    methods: {
        eventSource () {
            const _this = this, eventSource = new EventSourcePolyfill(url, {
                heartbeatTimeout:300000, //超時時間，毫秒為單位，以5分鐘為例
                headers: {
                    '請求頭名稱': '請求頭值'
                }
            });
            eventSource.onopen = function (e) {
                console.log('onopen', e);
            };
            eventSource.onmessage = function (e) {
                console.log('onmessage', e);
            };
            eventSource.onerror = function (e) {
                console.log('onerror', e);
                _this.$message.error('連接失敗');
                eventSource.close(); // 關(guān)閉連接
            };
        }
    }
}
</script>

四、webpack代理配置

基于webpack的vue項(xiàng)目一般都會配置代理，用于解決接口請求的跨域問題，若想實(shí)時收到EventSource的消息，而不是在最后一口氣收到，需要配置 vue.config.js里的devServer，設(shè)置devServer的compress屬性為false

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中引入noVNC遠(yuǎn)程桌面的方法
下面小編就為大家分享一篇vue項(xiàng)目中引入noVNC遠(yuǎn)程桌面的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例
這篇文章主要介紹了vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
關(guān)于在Vue中import和require的用法分析
在Vue項(xiàng)目中，我們經(jīng)常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實(shí)例和解釋,需要的朋友可以參考下
2023-06-06
vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決
這篇文章主要介紹了vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue-Router安裝過程及原理詳細(xì)
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?。本質(zhì)上就是一種對應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹，感興趣的小伙伴請和小編一起來學(xué)習(xí)吧
2021-09-09
vue+elementui 對話框取消表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對話框取消表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組，本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換，響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開相關(guān)內(nèi)容,需要的朋友可以參考一下
2022-04-04
vue引用public目錄下文件的方式詳解
由于一些演示需要對一些簡單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue項(xiàng)目之前端CryptoJS加密、解密代碼示例
在Vue項(xiàng)目中集成CryptoJS進(jìn)行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項(xiàng)目文件中引入CryptoJS,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個字段的表單,使用resetFields方法進(jìn)行重置,發(fā)現(xiàn)點(diǎn)擊重置或要清空校驗(yàn)時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下
2023-12-12