EventSource 在项目中常用的两种方式

一、认识EventSource 

EventSource(也称为Server-Sent Events,简称SSE)是HTML5中的一种新的API,用于实现服务器端向客户端推送事件。其数据主要基于HTTP协议进行传输,并且数据帧必须编码成UTF-8的格式。

eventSource是单向通信的,只能从服务器端向客户端发送数据。如果你需要双向通信(即客户端和服务器之间可以相互发送数据),那么你可能需要使用WebSocket或其他技术。

二、项目中使用

而 eventSource 只能由服务器向客户端发送消息,项目中常用的请求方式又get和post方式,对于没有请求要求的情况,短文本的情况使用浏览器提供的api即可。

1.使用get方式

不需要安装插件,直接创建EventSource对象,通过EventSource对象连接服务,连接服务以后就可以接受服务推送的消息。

 //定义一个EventSource对象,传入请求地址URLconst eventSource = new EventSource('url')// 与事件源的连接刚打开时触发eventSource.onopen = function (e) {console.log(e, "连接刚打开时触发");};// 后端返回信息,格式可以和后端协商eventSource.onmessage = function (e) {console.log(e);};// 连接失败eventSource.onerror = function (e) {console.log(e);eventSource.close(); // 关闭连接};// 关闭连接eventSource.close();   

注意:使用浏览器提供的本地EventSource服务,无法获取连接状态编码。

2.使用post方式请求

使用post的方式请求eventSource,常用的就是通过fetchEventSource这个库来实现,借助第三方库的fetchEventSource方法连接服务,通过AbortController 对象可以关闭服务

安装fetch-event-source插件

npm i --save @rangermauve/fetch-event-source

本地使用fetch-event-source

import { fetchEventSource } from '@microsoft/fetch-event-source';const ctrlAbout = new AbortController();const eventSource = fetchEventSource(Url, {method: 'POST',headers: {"Content-Type": 'application/json',"Accept": 'text/event-stream'},body: JSON.stringify(data),onmessage(event) {console.info(event.data);// 在这里操作流式数据},onerror(error) {console.info(error);//关闭流ctrlAbout.abort();}})

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

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

相关文章

本地电子邮件测试工具-MailHog

通过MailHog,可以在浏览器中查看本机发的邮件内容,而无需发送到外网。 https://github.com/mailhog/MailHog在 macOS 环境下,下载文件后: 添加可执行权限:chmod x MailHog_darwin_amd64 运行:./MailHog_darwin_amd64 浏览器打开查看邮件:htt…

LitCTF

[LitCTF 2023]enbase64 base 64 里面有一个换表的函数 写代码 #include<stdio.h> #include<string.h> #include<stdlib.h> int main() {char *result; char Destination[65]; int v3[65];int j;int i; char Source[]"ABCDEFGHIJKLMNOPQRSTUVWXYZabcde…

【Python设计模式15】适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户希望的另一个接口。适配器模式使得原本由于接口不兼容而无法一起工作的类能够一起工作。通过使用适配器模式&#xff0c;可以使得现有的类能够适应新的接口需…

打造高效安全新标杆:智慧楼宇视频智能管理系统的建设探索

大数据、人工智能、5G等技术在城市中的不同应用也让人们看到了数字化和智能化技术赋予城市管理的巨大潜力&#xff0c;为更多城市数字化应用场景的发展带来机遇。在新基建的大背景下&#xff0c;人工智能、物联网等先进技术与基础设施的深度融合&#xff0c;将大力推进电网、楼…

PostgreSQL自带的命令行工具25- ecpg

PostgreSQL自带的命令行工具25- ecpg ecpg 是 PostgreSQL 提供的一个工具&#xff0c;允许在 C 语言程序中嵌入 SQL 语句&#xff0c;从而能够与 PostgreSQL 数据库进行交互。ecpg 全称是 Embedded SQL in C&#xff0c;采用了标准的 SQL 预编译技术&#xff0c;将 SQL 语句嵌…

ArcGIS批量更改所有符号的格式

这期谈一下&#xff0c;如何修改所有符号的样式。 比如&#xff0c;我们需要更改下图的面符号位无轮廓的 该如何批量修改的呢&#xff1f; 视频教学吧&#xff1a; ArcGIS批量更改所有符号的格式 ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放-CSDN博客文章浏览阅…

el-input 自动获取焦点

前言&#xff1a; 需求描述&#xff1a;在 Dialog 对话框中 使用 input 组件&#xff1b;当点击按钮&#xff0c;Dialog 对话框显示&#xff0c;且里面的 input 组件要自动获取焦点。因为页面上还存在其他的 input 组件&#xff0c;所以使用 自动获取焦点属性没用&#xff01;&…

Docker仓库解析

目录 1、Docker仓库类型2、Docker仓库的作用3、工作原理4、管理与使用最佳实践 Docker仓库是Docker生态系统中的重要组成部分&#xff0c;它是用于存储和分发Docker镜像的集中化服务。无论是公共还是私有&#xff0c;仓库都是开发者之间共享和复用容器镜像的基础。 1、Docker仓…

2024年5月23号PMP每日三题含答案

2024年5月23号PMP每日三题含答案 1.项目可交付成果已移交给客户&#xff0c;项目经理现在必须收集项目参与者的反馈意见。项目经理应该查阅哪份文件来确定哪些人应该被包含进请求反馈意见的名单中&#xff1f; A.干系人登记册 B.沟通管理计划 C.经验教训 D.项目资源管理计划 1…

基于Java的推箱子游戏设计与实现(论文 + 源码)

【免费】关于基于JAVA的推箱子游戏.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89325018 基于Java的推箱子游戏设计与实现 摘 要 社会在进步&#xff0c;人们生活质量也在日益提高。高强度的压力也接踵而来。社会中急需出现新的有效方式来缓解人们的压力。…

Centos7离线安装RabbitMQ教程

目录 安装包准备开始安装1. 创建目录2. 上传文件3. 安装erlang语言4. 安装socat5. 安装rabbitmq6. 启动、停止rabbitmq7. 设置开机启动8. 开启web界面管理工具9. 开启防火墙(root)10. 访问页面11. 附录 安装包准备 &#xff08;1&#xff09;准备RabbitMQ的安装包&#xff08;…

IT革命浪潮:技术革新如何改变我们的生活与工作

一、技术革新与行业应用 当前的IT行业正处于前所未有的技术革新阶段。其中&#xff0c;量子计算和虚拟现实是两项引人注目的技术。 量子计算&#xff1a;量子计算以其超越传统计算的潜力&#xff0c;正在逐步从理论走向实践。在材料科学、药物研发和气候模型等复杂计算领域&a…

本地搭建LLaMA-Factory环境进行大模型调优

LLaMA Factory LLaMA Factory快速对大模型进行快速调优&#xff0c;本文看一下如何本地搭建环境并调优&#xff0c;本文使用 ModelScope 社区中的模型&#xff0c;模型在国内&#xff0c;下载速度非常友好。 下载最新代码 ## LLaMA Factory官方 git pull https://github.com…

docker -JDK8安装

文章目录 前言docker -JDK8安装1. 新建一个 Docker 容器2. 在容器中安装和配置 JDK 8 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实…

spring cloud gateway一些相关概念

在云架构中运行着众多客户端和服务端&#xff0c;API网关的存在提供了保护和路由消息&#xff0c;隐藏服务&#xff0c;限制负载等等功能。下图是spring cloud gateway所处的位置。 它有三大概念&#xff1a; 路由&#xff1a;路由是构建网关的基本模块&#xff0c;它由ID&…

vue中的事件

vue中的事件是什么 绑定事件用v-on&#xff0c;简写v-on指令的参数是事件名&#xff08;原生或者自定义&#xff09;&#xff0c;值是事件处理器有原生事件&#xff08;click&#xff09;和自定义事件&#xff08;myEvent&#xff09;在组件上使用原生事件&#xff0c;需要加n…

worklist配置调试日志记录

工作记录用,不拘小节&#xff01; 设备请求日志 2024-05-23 09:03:14,503 [WorkListServer: 10.87.232.253 [18]] INFO - LISTMWL Request from [gehc]: (0008,0005) CS [ISO_IR 100] # 10 Specific Character Set 1-N (0008,0020) DA [] …

用python做的一个登录界面——浔川python社

以下代码是一个基于Tkinter的简单的登录注册界面。 代码的功能如下&#xff1a; 导入tkinter模块&#xff0c;并重命名为tk。 创建一个窗口对象window&#xff0c;并设置标题和大小。 创建一个随机的四位数作为验证码&#xff0c;并将其显示在窗口中。 创建用户名、密码和验…

如何搭建一个vue项目(完整步骤)

搭建一个新的vue项目 一、安装node环境二、搭建vue项目环境1、全局安装vue-cli2、进入你的项目目录&#xff0c;创建一个基于 webpack 模板的新项目3、进入项目&#xff1a;cd vue-demo&#xff0c;安装依赖4、npm run dev&#xff0c;启动项目 三、vue项目目录讲解四、开始我们…

go 爬虫之 colly 简单示例

1. 背景 colly 是 Go 实现的比较有名的一款爬虫框架&#xff0c;而且 Go 在高并发和分布式场景的优势也正是爬虫技术所需要的。它的主要特点是轻量、快速&#xff0c;设计非常优雅&#xff0c;并且分布式的支持也非常简单&#xff0c;易于扩展。 2. 官方文档 https://go-col…