首页 > 其他分享 >前端如何接收EventStream中的数据?

前端如何接收EventStream中的数据?

时间:2024-07-12 11:32:09浏览次数:11  
标签:EventStream const log read 前端 buffer EventSource console 接收

本文目录

  • 1、fetch
  • 2、EventSource

fetch

fetch是浏览器内置的方法无需下载

fetch("http://127.0.0.1:6594/ws/getAccessToken", {
        method: "get",
      })
        .then((response) => {
          const decoder = new TextDecoder("utf-8");
          let buffer = [];
          const reader = response.body.getReader();
          function read() {
            reader.read().then(function processText({ done, value }) {
              if (done) {
                return buffer;
              }
              const chunk = decoder.decode(value, { stream: false });
              buffer.push(buffer)
              console.log(chunk);
              read();
            });
          }
          return read();
        })
        .then((result) => {
          console.log(result);
        })
        .catch((error) => console.log("error", error));

发送请求后浏览器显示的效果

可以接收到了!

EventSource

EventSource 是用于接收服务器端发送的服务器推送事件(Server-Sent Events,SSE)的接口。它允许客户端从服务器端获取实时更新,是一种基于 HTTP 的单向通信机制。

const es = new EventSource("http://127.0.0.1:6594/ws/getAccessToken");
      es.onmessage = function (e) {
        console.log(e.data);
        setTimeout(()=>{
          es.close() //4秒后关闭服务器的推送
        },4000)
      };


接收到了!

标签:EventStream,const,log,read,前端,buffer,EventSource,console,接收
From: https://www.cnblogs.com/jzm2842688813/p/18297929

相关文章

  • 项目前端
    目录vue组件基础页面组件组件与链接关联按键绑定网址获取当前网页地址bootstrap常用★实现地图以及地图刷新游戏基类游戏对象地图变量函数null墙★PK页面vue组件基础组件名两个大写字母template,script,style(带上scoped,给该css加上随机字符串,不影响到其他组件)使用Bootstrap前......
  • 在前端面试中被问到曾经遇到的具有挑战性的项目或者难点项目时?
    在前端面试中被问到曾经遇到的具有挑战性的项目或者难点项目时,你应该挑选那些能够展示你技术能力、解决问题能力以及适应复杂情况能力的项目来回答。这些项目应该符合以下几个条件:技术复杂度较高:选择一个在技术上给你带来挑战的项目,可能是因为使用了新技术栈,或者技术实现上遇到......
  • 前端返回pdf时不显示内容,如何解决?
    ......
  • 前端必会原理--事件循环
    事件循环浏览器的进程模型何为进程?程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。何为线程?有了进程后,就可以运行程序的代码了。运行代码的「人」称之为「线程」。一个进......
  • 370. 高端个人相册网站 大学生期末大作业 Web前端网页制作 html5+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • 接口文档的书写,git的拉取错误的解决,数据库多表查询的进一步认识(以后开发一定要先仔细
    202407111接口文档的书写:1.1首先写你这个大模块是什么功能。1.2开始根据你的功能写接口文档:2解决git拉取错误的问题:2.1出现这样的问题:(推送出错)2.2原因分析:可能因为重装过系统,或者是安装git的位置发生了变化等情况出现。2.3找到git的安装路径,打开gitbash之后,进......
  • 前端如何控制并发请求
    前端如何控制并发请求前端控制并发请求的关键思路api设计代码实现关键代码解读循环和Promise结合是怎样使用的呢?完善api,让其更加易用把上述功能封装成`p-control`npm包发布小结什么情况需要前端控制并发请求,在需要多次才能请求完所需数据的时候。比如接口一......
  • 前端如何取消接口调用
    ......
  • 常用的前端框架有哪些?
    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等现在越来越多的前端框架开始出现,这为我们的项目需求带来了极大的方便。本文将为大家详细介绍几种前端框架,有一定的参考作用,希望对大家有所帮助。常用框架介绍:Bootstrap框架Bootstrap是......
  • 泛微OA E9前端开发常用函数及方法
    1、获取单个字段值//获取主表值varfieldvalue=WfForm.getFieldValue("field110");//获取明细表:字段_+行号(从0开始算)varfield19112Value=WfForm.getFieldValue("field19112_"+rowIndex);2、修改单个字段值//主表:修改文本框、多行文本、选择框等字段类型WfForm.changeF......