当前位置：首页 > news >正文

uniapp微信小程序实现sse

news 2025/8/29 20:56:26

微信小程序实现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;},