方法一：
if (window.EventSource) {
// 建立连接
source = new EventSource('/dcs-api/stream'); //'/dcs-api/stream'是vue项目中配置的路径
source.addEventListener('open', function(e) { //连接一旦建立，就会触发open事件
console.log("建立连接。。。");
}, false);
source.addEventListener('message', function(e) { //客户端收到服务器发来的数据
console.log(e.data);
});
source.addEventListener('error', function(e) { //如果发生通信错误（比如连接中断），就会触发error事件
if (e.readyState === EventSource.CLOSED) {
console.log("连接关闭");
} else if (e.target.readyState === EventSource.CONNECTING) {
console.log('Connecting...');
}else {
console.log(e);
}
}, false);
} else {
console.log("你的浏览器不支持SSE");
}
// 监听窗口关闭事件，主动去关闭sse连接，如果服务端设置永不过期，浏览器关闭后手动清理服务端数据
window.onbeforeunload = function() {
source.close();
};
方法二：
if(window.EventSource){
var that=this;
this.eventSource = new EventSource('/dcs-api/stream'); //'/dcs-api/stream'是vue项目中配置的路径
this.eventSource.onmessage = (e) => {
const message = JSON.parse(e.data);
console.log("已接受到消息:", e.data)
};
this.eventSource.onerror = (event) => {
that.eventSource.close();
};
//处理服务器响应报文中的自定义事件
this.eventSource.addEventListener("close", function (e) {
that.eventSource.close();
});
} else {
console.log("你的浏览器不支持SSE~")
}
参考资料：
