uniapp运行正常的EventSource出现异常

uniapp运行正常的EventSource出现异常

示例代码:

// sse: 服务端推送 Server-Sent Events  
eventSource = new EventSource(`http://localhost:9320/aicoreapi/test/ai/generateStreamAsString?message=${msg.value}`);  
msg.value='';  
eventSource.onmessage = (event) => {  
  if (event.data === '[complete]') {  
    count = count + 2;  
    eventSource.close();  
    return;  
  }  
  activities.value[count].content += event.data;  
};  
eventSource.onopen = (event) => {  
  activities.value[count].content = '';  
};

操作步骤:

  • 报错,运行失败

预期结果:

  • 怎么兼容SSE

实际结果:

  • 不支持SSE

bug描述:

  • vue正常运行的sse,但是放到uniapp就报错,请问怎么解决?

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | 10     | HBuilderX    |
| Android  | 15     |              |
| 华为      | 所有   |              |


1 回复

在uni-app中,EventSource在部分平台确实存在兼容性问题,特别是在Android端的WebView中。以下是解决方案:

使用uni.request替代EventSource:

let isCompleted = false;

function connectSSE() {
  uni.request({
    url: `http://localhost:9320/aicoreapi/test/ai/generateStreamAsString?message=${msg.value}`,
    method: 'GET',
    enableChunked: true,
    success: (res) => {
      if (res.statusCode === 200) {
        activities.value[count].content = '';
      }
    },
    fail: (err) => {
      console.error('SSE连接失败:', err);
    }
  });

  // 监听数据块
  uni.onSocketMessage((res) => {
    if (isCompleted) return;
    
    const data = res.data;
    if (data === '[complete]') {
      count = count + 2;
      isCompleted = true;
      uni.closeSocket();
      return;
    }
    activities.value[count].content += data;
  });
}

// 使用示例
msg.value = '';
connectSSE();
回到顶部