前端怎么用 EventSource? EventSource怎么配置请求头及加参数? EventSourcePolyfill使用方法

EventSource

EventSource 接口是 web 内容与服务器发送事件通信的接口。

一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接,以 text/event-stream 格式发送事件,此连接会一直保持开启直到通过调用 EventSource.close() 关闭。

EventSource 服务器发送事件是单向的。数据消息只能从服务端发送到客户端。

如果想了解更多请查看 EventSource 文档

EventSource使用方式

这里其实和webSocket 使用方式其实很像

这里需要注意 我在网上查了说参数可以配置headers(请求头) 实际使用的时候我这边传入请求头是没有生效(可能是我操作有误吧)

首先先安装EventSource
 npm install eventsource

示例代码

//创建一个新的 EventSource 对象的同时,你可以指定一个接受事件的 URI
// 如果需要加参数的话是在url 后面拼接参数 sysm/user/1const eventSource = new EventSource('url')//与事件源的连接刚打开时触发eventSource.onopen = function (e) {console.log(e, "连接刚打开时触发");};/** message:后端返回信息,格式可以和后端协商*/eventSource.onmessage = function (e) {console.log(e,'后端返回信息,格式可以和后端协商');};/** error:错误(可能是断开,可能是后端返回的信息)*/eventSource.onerror = function (e) {console.log(e, "连接无法打开时触发");eventSource.close(); // 关闭连接setTimeout(() => {//关闭连接后重新调用 }, 5000);};// 关闭连接// eventSource.close();   

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

EventSourcePolyfill可以配置请求头 目前我EventSource配置请求头不生效所以才用 EventSourcePolyfill

首先先安装 EventSourcePolyfill

 npm install event-source-polyfill

引用 EventSourcePolyfill

import { EventSourcePolyfill } from "event-source-polyfill";

示例代码

// 如果需要加参数的话是在url 后面拼接参数 sysm/user/1const eventSource = new EventSourcePolyfill(`${process.env.VUE_APP_BASE_API}/sysm/user/1`,{heartbeatTimeout:3*60*1000,//这是自定义配置请求超时时间  默认是4500ms(印象中是)headers: {Authorization: "Bearer " + 'token',},});/** open:订阅成功(和后端连接成功)*/eventSource.onopen = function (e) {console.log(e, "连接刚打开时触发");};/** message:后端返回信息,格式可以和后端协商*/eventSource.onmessage = function (e) {console.log(e,'后端返回信息,格式可以和后端协商');const data = JSON.parse(e.data) || {};//这里后端返回的是字符串所以目前我这边有转换};/** error:错误(可能是断开,可能是后端返回的信息)*/eventSource.onerror = function (e) {console.log(e, "连接无法打开时触发");eventSource.close(); // 关闭连接setTimeout(() => {}, 5000);};// 需要关闭了// eventSource.close();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/10708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常见的推荐系统框架

1)Microsoft Recommender: 该框架由微软开发,可以免费使用,主要提供了包括一般功能(Common Utilities)、大数据功能(Dataset Utilities)、评价功能(Evaluation Utilitie…

将本地docker镜像以压缩包格式保存至其他路径、从本地的镜像压缩包中加载docker镜像

保存本地Docker镜像为压缩包至其他路径 你可以使用 docker save 命令结合输出重定向( -o 选项)来将本地Docker镜像保存为一个压缩包(通常是tar格式)并直接保存到指定的路径。以下是一个示例命令: docker save -o /pa…

c++ - 在循环中使用迭代器删除 unordered_set 中的元素

标签 c unordered-set 请考虑以下代码: Class MyClass 为自定义类:class MyClass { public:MyClass(int v) : Val(v) {}int Val; };然后下面的代码将在调用 it T.erase(it); 之后在循环中导致 Debug Assertion Failed: unordered_set<MyClass*> T; unordered_set<…

vue3.0(六) toRef,toValue,toRefs和toRow,markRaw

文章目录 toReftoValuetoRefstoRowmarkRawtoRef和toRefs的区别toRaw 和markRaw的用处 toRef toRef 函数可以将一个响应式对象的属性转换为一个独立的 ref 对象。返回的是一个指向源对象属性的 ref 引用&#xff0c;任何对该引用的修改都会同步到源对象属性上。使用 toRef 时需…

C#中的继承、接口和多态性

继承&#xff08;Inheritance&#xff09; 在C#中&#xff0c;继承允许我们创建一个新的类&#xff08;称为子类或派生类&#xff09;&#xff0c;该类从另一个已存在的类&#xff08;称为父类或基类&#xff09;中继承方法和属性。子类可以添加新的方法和属性&#xff0c;或者…

2024年最新趋势跨境电商平台开发需了解的新技术

随着数字化技术的不断演进和全球市场的日益融合&#xff0c;跨境电商平台开发将面临前所未有的挑战和机遇。为了更好地适应并引领这一发展&#xff0c;开发者需要密切关注2024年最新的技术趋势&#xff0c;以确保他们的平台能够在竞争激烈的市场中脱颖而出。本文将对跨境电商平…

HTML/CSS2

1.前置说明 HTML/CSS1 2.img元素 格式&#xff1a; <img src"图片地址" alt"占位文字" width"图片宽度" height"图片高度">其中alt是当图片加载失败时显示的文字 而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同…

网安面经之文件上传漏洞

一、文件上传漏洞 1、文件上传漏洞的原理&#xff1f;危害&#xff1f;修复&#xff1f; 原理&#xff1a;⽂件上传漏洞是发⽣在有上传功能的应⽤中&#xff0c;如果应⽤程序对⽤户上传的⽂件没有控制或者存在缺陷&#xff0c;攻击者可以利⽤应⽤上传功能存在的缺陷&#xff…

从文本日志到图形日志 图形化编程桌面产品的突破

在一个宽敞明亮的会议室里&#xff0c;阳光透过落地窗洒在会议桌上。卧龙和凤雏相对而坐&#xff0c;他们的面前摆放着一些关于图形化编程桌面产品的资料和测试报告。会议室里的气氛紧张而热烈&#xff0c;团队成员们围坐在一起&#xff0c;专注地倾听着卧龙和凤雏的讨论。 卧龙…

单位学校FM调频电台直放站系统

随着教育技术的不断发展&#xff0c;校园广播系统的建设已成为现代学校必不可少的一部分。作为传统有线广播的有效补充&#xff0c;基于无线电信号传输的 FM 调频电台在学校的使用日益广泛&#xff0c;尤其是在紧急通知、日常信息传播及教学辅助等方面发挥着重要作用。为了增强…

韩顺平0基础学Java——第9天

p169-201 数组&#xff08;第六章&#xff09; 数组扩容 此时原来的数组arr被销毁。 牛蛙&#xff1a; 最后再加一句 SYstem。out。println&#xff08;“是否添加&#xff1f;”&#xff09;&#xff1b; char key myscanner。netx&#xff08;&#xff09;。charAT&…

【Python超详细的学习笔记】Python超详细的学习笔记,涉及多个领域,是个很不错的笔记

获取笔记链接 Python超详细的学习笔记 一&#xff0c;逆向加密模块 1&#xff0c;Python中运行JS代码 1.1 解决中文乱码或者报错问题 import subprocess from functools import partial subprocess.Popen partial(subprocess.Popen, encodingutf-8) import execjs1.2 常用…

Agent AI智能体:未来社会的角色、发展路径与挑战

目录 引言 一、Agent AI智能体的发展路径 1. 技术进步与智能化水平提升 2. 应用场景拓展与普及 二、Agent AI智能体在未来社会中的角色 1. 提高生产效率与生活品质 2. 促进社会进步与发展 三、Agent AI智能体可能带来的挑战 1. 隐私与安全问题 2. 就业与社会结构变革 …

04_led_water_flow_v0 流水灯

04_led_water_flow_v0 流水灯和跑马灯都是一种常见的LED灯效&#xff0c;它们在灯光的变化方式上有所不同。 流水灯是一种灯效模式&#xff0c;LED灯在一定的时间间隔内依次点亮或熄灭&#xff0c;形成像水流一样的效果。而跑马灯则是LED灯在一定的时间间隔内依次从左向右或从…

6-8 十进制转换二进制(递归)

分数 10 作者 C课程组 单位 浙江大学 本题要求实现一个函数&#xff0c;将非负整数n转换为二进制后输出。 函数接口定义&#xff1a; void dectobin( int n );函数dectobin应在一行中打印出二进制的n。建议用递归实现。 裁判测试程序样例&#xff1a; #include <stdio…

WordPress插件Plus WebP,可将jpg、png、bmp、gif图片转为WebP

现在很多浏览器和CDN都支持WebP格式的图片了&#xff0c;不过我们以前的WordPress网站使用的图片都是jpg、png、bmp、gif&#xff0c;那么应该如何将它们转换为WebP格式的图片呢&#xff1f;推荐安装这款Plus WebP插件&#xff0c;可以将上传到媒体库的图片转为WebP格式图片&am…

HIVE调优MapJoin

HIVE调优MapJoin 目录 HIVE调优MapJoin 1.mapjoin &#xff08;1.2以后自动默认启动mapjoin&#xff09; 2.创建表格 3.查询建表 4.通过 explain 展示执行计划 5.Map JOIN 相关设置&#xff1a; 1.mapjoin &#xff08;1.2以后自动默认启动mapjoin&#xff09;…

[机器学习-05] Scikit-Learn机器学习工具包进阶指南:协方差估计和交叉分解功能实战【2024最新】

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

VUE格式探究记录

1.背景 vue格式为鹰图Intergraph SP3D格式&#xff0c;是私有格式。博主对vue格式的直接解析可行性进行了初步的探究&#xff0c;记录如下。 2.探究 目前能够解析vue格式的软件有3类&#xff08;其背后路线有可能有相同的&#xff09;&#xff0c; 鹰图Intergraph系列软件&…

springmvc处理模型数据

springmvc处理模型数据 很多情况下页面上需要很多数据&#xff0c;单单返回页面是不行的&#xff0c;那么springmvc如何将数据返回到该页面呢 springmvc提供了四种方式来输出模型数据 ModelAndView: 处理返回值为ModelAndView时&#xff0c;可以将该对象中添加数据模型 Map及Mo…