vue EventSource使用及配置请求头、webpack代理配置

我的心巴

已于 2024-08-06 10:19:30 修改

阅读量631

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-07-25 16:32:17 首次发布

本文链接：https://blog.csdn.net/hrcsdn13/article/details/140693032

版权

EventSourcePolyfill 是EventSource封装的一个方法，可以配置请求头。

官方API：https://developer.mozilla.org/en-US/docs/Web/API/EventSource

一、安装依赖

npm install eventsource

npm install event-source-polyfill

二、不需要加请求头时

const eventSource = new EventSource(url); //我是在vue项目里，普通请求用的axios；这里的url可以直接写接口路径，baseUrl会直接使用axios的baseUrl
eventSource.onopen = function (e) {
     console.log(e, "连接打开时触发");
};
eventSource.onmessage = function (e) {
     console.log(e);
};
eventSource.onerror = function (e) { //断开连接及后端返回错误信息均会触发
     eventSource.close(); // 关闭连接
};

三、需要加请求头时

<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(); // 关闭连接
            };
        }
    }
}
</script>

四、webpack代理配置

基于webpack的vue项目一般都会配置代理，用于解决接口请求的跨域问题，若想实时收到EventSource的消息，而不是在最后一口气收到，需要配置 vue.config.js里的devServer，设置devServer的compress属性为false