前端如何用post的方式进行eventSource请求

作者:cuiyuchen111 时间:2024-04-10 16:13:32 

前言

我们平时的工作中可能需要和服务端建立链接,从而来接受服务端推送的数据,常用的就是eventSource,我们平时常用的就是通过get的方式创建一个eventSource,但是我们如何通过post的方式创建呢?首先我们介绍一下eventSource,还有他和websocket的区别:

1.eventSource的介绍

1)eventSource 是一个 Web API,它允许网页通过 HTTP 长连接(通常称为 Server-Sent Events (SSE))从 Web 服务器接收自动更新。它使网页可以接收实时更新,而无需刷新页面或向服务器发送重复请求。

2)使用 eventSource,网页可以订阅从服务器发送的事件流。这些事件可以是任何格式,例如纯文本、JSON 或 XML,并且可以包含服务器想要发送的任何数据。一旦建立连接,服务器可以随时向客户端发送事件,客户端可以根据需要处理它们,例如更新 UI 或触发其他操作。

3)eventSource API 使用简单,并且受到大多数现代 Web 浏览器的支持。它通常用于需要实时更新的 Web 应用程序,例如聊天室、社交媒体提要或股票市场行情。

2.eventSource和websocket的区别:

1)协议不同:WebSocket 使用的是一种双向通信协议,而 eventSource 使用的是一种单向通信协议。WebSocket 协议可以在客户端和服务器之间建立一个长连接,双方可以同时发送和接收消息,而 eventSource 只能由服务器向客户端发送消息。

2)数据格式不同:WebSocket 可以发送任何格式的数据,例如文本、二进制数据或 JSON,而 eventSource 只能发送文本格式的数据。

3)支持程度不同:WebSocket 是一种相对较新的技术,在一些旧的浏览器或网络环境下可能不被支持,而 eventSource 已经被广泛支持,可以在大多数现代浏览器中使用。

4)应用场景不同:WebSocket 更适合那些需要实时双向通信的应用,例如在线游戏或视频会议,而 eventSource 更适合那些需要从服务器获取实时信息的应用,例如股票行情或新闻推送。

3.如何用post的方式请求eventSource

常用的就是通过fetchEventSource这个库来实现,实现方式如下:

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

import { fetchEventSource } from '@microsoft/fetch-event-source';

let eventSource = fetchEventSource(Url, {
       method: 'POST',
       headers: {
         "Content-Type": 'application/json',
       },
       body: JSON.stringify(data),
       onmessage(event) {
         console.info(event.data);
       },
       onerror() {

}
     })

来源:https://blog.csdn.net/cuiyuchen111/article/details/129468291

标签:eventsource,请求,post
0
投稿

猜你喜欢

  • mysql exists与not exists实例详解

    2024-01-24 22:57:14
  • win10系统下Anaconda3安装配置方法图文教程

    2022-08-06 23:01:49
  • Python 读取xml数据,cv2裁剪图片实例

    2021-07-18 00:08:08
  • 手把手教你vscode配置golang开发环境的步骤

    2024-04-23 09:35:34
  • SQL 截取字符串应用代码

    2024-01-21 08:53:14
  • golang gorm实现get请求查询案例测试

    2024-05-09 10:09:31
  • ImageMagicK convert crop参数说明

    2008-10-21 12:46:00
  • Python学习小技巧之列表项的推导式与过滤操作

    2021-08-18 14:46:30
  • Python中列表的常用操作详解

    2022-07-17 10:16:42
  • Python Queue模块详细介绍及实例

    2022-03-08 11:03:58
  • Python栈的实现方法示例【列表、单链表】

    2023-07-20 15:51:42
  • 基于webstorm卡顿问题的2种解决方法

    2023-02-23 09:03:17
  • 使用Python导出Excel图表以及导出为图片的方法

    2021-02-28 09:59:21
  • SQL语句实例说明 方便学习mysql的朋友

    2012-11-30 20:02:43
  • python调用matlab的方法详解

    2023-10-18 06:39:02
  • js实现rem自动匹配计算font-size的示例

    2023-08-22 11:02:33
  • 怎样使你的 JavaScript 代码简单易读(推荐)

    2024-04-16 09:53:22
  • js中的for如何实现foreach中的遍历

    2024-04-29 13:19:37
  • Python使用线程来接收串口数据的示例

    2022-01-21 11:32:38
  • python中栈的原理及实现方法示例

    2023-05-01 02:54:33
  • asp之家 网络编程 m.aspxhome.com