微信小程序使用SSE

252 阅读1分钟

`

// 模拟sse
const message = ref('');
let requestTask = null;
let bufferText = ''; // 解析后的字符串缓冲区

const decoder = new TextDecoder('utf-8'); // 用于解码 ArrayBuffer

const handleSSE = () => {
  const token = uni.getStorageSync('token');
  const url = `请求地址`;

  console.log(' = url', url);

  const connectSSE = () => {
    requestTask = wx.request({
      url: url,
      method: 'GET',
      enableChunked: true,
      responseType: 'arraybuffer',
      header: {
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'Accept': 'text/event-stream',
        'Authorization': token
      },
      success: (res) => {
        console.log('SSE 连接成功', res);
      },
      fail: (err) => {
        console.error('SSE 错误:', err);
        message.value = '连接错误,尝试重连中...';
        setTimeout(() => {
          connectSSE();
        }, 10000);
      }
    });

    requestTask.onChunkReceived((res) => {
      try {
        const chunkText = decoder.decode(res.data, { stream: true }); // 解码当前chunk
        bufferText += chunkText; // 累积解码后的文本

        const lines = bufferText.split('\n\n'); // 按 SSE 协议分段

        for (let i = 0; i < lines.length - 1; i++) {
          const line = lines[i].trim();
          if (line.startsWith('data:')) {
            const msg = line.slice(5).trim();
            console.log('接收到消息:', msg);
            message.value = msg;
          }
        }

        // 把未完整的一段保留到下一次
        bufferText = lines[lines.length - 1];
      } catch (error) {
        console.error('解析 SSE 数据出错:', error);
      }
    });
  };

  connectSSE();
};


// 可选:断开连接函数
const closeSSE = () => {
  if (requestTask) {
    requestTask.offChunkReceived();
    requestTask.abort();
    requestTask = null;
  }
};

onUnmounted(() => {
  if (intervalTimer.value) {
    clearInterval(intervalTimer)
    intervalTimer.value = null
  }

  if(requestTask){
    closeSSE();
  }

})

`