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

news/2024/6/17 0:03:59

一、认识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.tangninghui.cn.cn/item-12961.htm

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

盲人社区生活支持体系:织就一张温暖的网

在当今社会,构建一个全面、包容的盲人社区生活支持体系成为了推动社会进步、保障残障人士权益的重要议题。随着科技的不断革新,一款名为“蝙蝠避障”的辅助软件走进了盲人的日常生活,它如同一位无形的向导,通过实时避障与拍照识别…

Leetcode - 398周赛

目录 一,3151. 特殊数组 I 二,3152. 特殊数组 II 三,3153. 所有数对中数位不同之和 四,3154. 到达第 K 级台阶的方案数 一,3151. 特殊数组 I 本题就是判断一个数组是否是奇偶相间的,如果是,…

H800基础能力测试

H800基础能力测试 参考链接A100、A800、H100、H800差异H100详细规格H100 TensorCore FP16 理论算力计算公式锁频安装依赖pytorch FP16算力测试cublas FP16算力测试运行cuda-samples 本文记录了H800基础测试步骤及测试结果 参考链接 NVIDIA H100 Tensor Core GPU Architecture…

海外私人IP和原生IP有什么区别,谁更有优势?

一、什么是海外私人IP?什么是原生IP? 1、海外私人IP: 海外私人IP是由专门的服务提供商提供的IP地址,这些IP地址通常与特定地理位置或国家相关联。这些IP地址独享私人而不用与其他用户共享。海外私人IP通常用于绕过地理限制&#…

交换机连接方式

一、级联方式 级联是将多个交换机或其他网络设备依次连接,形成一个层次结构,从而扩展网络的覆盖范围和端口数量。 在级联连接中,数据信号会从一个设备依次传递到下一个设备。每个设备都会接收并处理来自上级设备的数据,并将其转…

键盘盲打是练出来的

键盘盲打是练出来的,那该如何练习呢?很简单,看着屏幕提示跟着练。屏幕上哪里有提示呢?请看我的截屏: 截屏下方有8个带字母的方块按钮,这个就是提示,也就是我们常说的8个基准键位,我…