uniapp微信小程序实现sse

news2025/4/21 18:29:52

微信小程序实现sse

注:因为微信小程序不支持sse请求,因为后台给的是分包的流,所以我们就使用接受流的方式,一直接受,然后把接受的数据拿取使用。这里还是使用uniapp的原生请求。
在这里插入图片描述

上代码

//注意:一定要下载text-encoding-shim包,后台地址和token和后台约束好,复制代码后替换url和地址,即可使用。
import * as TextEncoding from "text-encoding-shim";
let buffer = ''; //定义在页面的最外面。
let encoder = new TextEncoding.TextDecoder("utf-8");//定义在页面的最外面。

//方法


startSSE() {   
	this.requestTask = uni.request({
		url: "sse后台地址",
		method: 'get', 
		header: {
			'Accept': 'text/event-stream',//必填返回的是文本
			'Cache-Control': 'no-cache',
			'Connection': 'keep-alive', 
			'Authorization': 'token'//后台的token
		},
		responseType: 'arraybuffer',//接受的是流
		enableChunked: true,//开启分包
		success: (res) => {}
	});
	 
	this.requestTask.onChunkReceived((res) => { 
	 try {
		 // 将ArrayBuffer转为字符串并追加到缓冲区
		 
		 let arrayBuffer = new Uint8Array(res.data)
		 let chunkStr = encoder.decode(arrayBuffer);
		 buffer += chunkStr;

		 // 分割完整事件(以\n\n分隔)
		 let eventEndIndex;
		 while ((eventEndIndex = buffer.indexOf('\n\n')) >= 0) {
			 const eventData = buffer.slice(0, eventEndIndex);
			 buffer = buffer.slice(eventEndIndex + 2);

			 // 解析SSE事件内容
			 const message = this.parseSSEEvent(eventData);
			 if (message) {
				 console.log('收到事件:', message);
				 // 触发自定义事件或更新数据 
				 //数据拿到后,做自己的业务处理
			 }
		 }
	 } catch (e) {
		 console.error('数据处理异常:', e);
	 } 
	});
},
// 解析SSE事件格式
 parseSSEEvent(rawData) {
	 const lines = rawData.split('\n');
	 let event = { data: '' };
 
	 lines.forEach(line => {
		 const colonIndex = line.indexOf(':');
		 if (colonIndex > 0) {
			 const field = line.slice(0, colonIndex).trim();
			 const value = line.slice(colonIndex + 1).trim();
			 if (field === 'data') {
				 event.data += value + '\n';
			 } else if (field === 'event') {
				 event.type = value;
			 } else if (field === 'id') {
				 event.id = value;
			 } else if (field === 'retry') {
				 event.retry = parseInt(value, 10);
			 }
		 }
	 });
 
	 event.data = event.data.trimEnd(); // 移除末尾换行
	 return event.data ? event : null;
 },

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

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

相关文章

新能源汽车能量流测试的传感器融合技术应用指南

第一部分:核心原理模块化拆解 模块1:多源传感器物理层融合 关键技术: 高精度同步采集架构 采用PXIe-8840控制器同步定时模块(NI PXIe-6674T),实现CAN/LIN/模拟量信号的μs级同步光纤电压传感器&#xff0…

人工智能与网络安全:AI如何预防、检测和应对网络攻击?

引言:网络安全新战场,AI成关键角色 在数字化浪潮不断推进的今天,网络安全问题已经成为每一家企业、每一个组织无法回避的“隐形战场”。无论是电商平台、金融机构,还是政府机关、制造企业,都可能面临数据泄露、勒索病毒…

链表知识回顾

类型:单链表,双链表、循环链表 存储:在内存中不是连续存储 删除操作:即让c的指针指向e即可,无需释放d,因为java中又内存回收机制 添加节点: 链表的构造函数 public class ListNode {// 结点…

FPGA学习(五)——DDS信号发生器设计

FPGA学习(五)——DDS信号发生器设计 目录 FPGA学习(五)——DDS信号发生器设计一、FPGA开发中常用IP核——ROM/RAM/FIFO1、ROM简介2、ROM文件的设置(1)直接编辑法(2)用C语言等软件生成初始化文件 3、ROM IP核配置调用 二、DDS信号发…

OpenCv高阶(六)——图像的透视变换

目录 一、透视变换的定义与作用 二、透视变换的过程 三、OpenCV 中的透视变换函数 1. cv2.getPerspectiveTransform(src, dst) 2. cv2.warpPerspective(src, H, dsize, dstNone, flagscv2.INTER_LINEAR, borderModecv2.BORDER_CONSTANT, borderValue0) 四、文档扫描校正&a…

性能比拼: Go vs Bun

本内容是对知名性能评测博主 Anton Putra Go (Golang) vs. Bun: Performance (Latency - Throughput - Saturation - Availability) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 我对 Bun 在之前的基准测试中的出色表现感到惊讶,因此我决定将它与 Go …

定制化 Docsify 文档框架实战分享

🌟 定制化 Docsify 文档框架实战分享 在构建前端文档平台时,我们希望拥有更友好的用户界面、便捷的搜索、清晰的目录导航以及实用的代码复制功能。借助 Docsify,我实现了以下几个方面的定制优化,分享给大家 🙌。 &…

鸿蒙ArkUI之布局实战,线性布局(Column,Row)、弹性布局(Flex)、层叠布局(Stack),详细用法

本文聚焦于ArkUI的布局实战,三种十分重要的布局,线性布局、弹性布局、层叠布局,在实际开发过程中这几种布局方法都十分常见,下面直接上手 线性布局 垂直布局(Column) 官方文档: Column-行列…

测试基础笔记第七天

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、cat命令二、ls -al命令三、>重定向符号四、>>追加重定向符号五、less/more命令六、grep命令七、|管道符八、clear命令九、head命令十、tail命令十一、…

[Windows] Adobe Camera Raw 17.2 win/Mac版本

[Windows] Adobe Camera Raw 链接:https://pan.xunlei.com/s/VOOIAXoyaZcKAkf_NdP-qw_6A1?pwdpd5k# Adobe Camera Raw,支持Photoshop,lightroom等Adobe系列软件,对相片无损格式进行编辑调色。 支持PS LR 2022 2023 2024 2025版…

开源模型应用落地-Podcastfy-从文本到声音的智能跃迁-Gradio(一)

一、前言 在当今信息呈现方式越来越多样化的背景下,如何将文字、图片甚至视频高效转化为可听的音频体验,已经成为内容创作者、教育者和研究者们共同关注的重要话题。Podcastfy是一款基于Python的开源工具,它专注于将多种形式的内容智能转换成…

Python 深度学习实战 第11章 自然语言处理(NLP)实例

Python 深度学习实战 第11章 自然语言处理(NLP)实例 内容概要 第11章深入探讨了自然语言处理(NLP)的深度学习应用,涵盖了从文本预处理到序列到序列学习的多种技术。本章通过IMDB电影评论情感分类和英西翻译任务,详细介绍了如何使…

将 DeepSeek 集成到 Spring Boot 项目实现通过 AI 对话方式操作后台数据

文章目录 项目简介本项目分两大模块 GiteeMCP 简介环境要求项目代码核心实现代码MCP 服务端MCP 客户端 DeepSeek APIDockersse 连接ws 连接(推荐)http 连接 vue2-chat-windowCherry Studio配置模型配置 MCP调用 MCP 项目简介 在本项目中,我们…

《前端面试题之 Vue 篇(第三集)》

目录 1、 nvm的常用命令①.Node.js 版本与 npm 版本的对应关系②Vue2 与 Vue3 项目的 Node.js 版本分界线③版本管理实践建议 2、Vue2 项目搭建(基于 vue-cli Webpack)① 环境准备② 安装 Vue CLI(脚手架)③.创建项目&#xff08…

嵌入式C语言位操作的几种常见用法

作为一名老单片机工程师,我承认,当年刚入行的时候,最怕的就是看那些密密麻麻的寄存器定义,以及那些让人眼花缭乱的位操作。 尤其是遇到那种“明明改了寄存器,硬件就是不听话”的情况,简直想把示波器砸了&am…

基于Djiango实现中药材数据分析与可视化系统

中药材数据分析与可视化系统 项目截图 登录 注册 首页 药材Top20 药材价格 产地占比 历史价格 新闻资讯 后台管理 一、项目概述 中药材数据分析与可视化系统是一个基于Django框架开发的专业Web应用,致力于对各类中药材数据进行全面、系统的采集、分析和可视化展示…

stm32(gpio的四种输出)

其实GPIO这个片上外设的功能: 用于控制IO引脚。 CPU就如同大脑,而这些片上外设就如同四肢一样的关系 如图 —————————————————————————————— OK类比了以上 其实GPIO是有 八种工作模式的 这八种工作模式 因为GPIO是面向IO…

Zookeeper 可观测性最佳实践

Zookeeper 介绍 ZooKeeper 是一个开源的分布式协调服务,用于管理和协调分布式系统中的节点。它提供了一种高效、可靠的方式来解决分布式系统中的常见问题,如数据同步、配置管理、命名服务和集群管理等。本文介绍通过 DataKit 采集 Zookeeper 指标&#…

微信小程序三种裁剪动画有效果图

效果图 .wxml <image class"img inset {{status?action1:}}" src"{{src}}" /> <image class"img circle {{status?action2:}}" src"{{src}}" /> <image class"img polygon {{status?action3:}}" src&quo…

C语言笔记(鹏哥)上课板书+课件汇总(结构体)-----数据结构常用

结构体 目录&#xff1a; 1、结构体类型声明 2、结构体变量的创建和初始化 3、结构体成员访问操作符 4、结构体内存对齐*****&#xff08;重要指数五颗星&#xff09; 5、结构体传参 6、结构体实现位段 一、结构体类型声明 其实在指针中我们已经讲解了一些结构体内容了&…