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