uniapp sse如何使用

在uniapp中如何使用SSE（Server-Sent Events）？官方文档没有找到相关示例，尝试用uni.request或websocket都不太理想。请问有没有成功的实现方案？需要支持持续接收服务器推送的消息，并保持连接稳定。如果能提供代码示例就更好了，谢谢！

2 回复

在uniapp中使用SSE（Server-Sent Events）可通过uni.request实现。创建请求时设置method: 'GET'，responseType: 'stream'，监听onChunkReceived接收数据流。示例代码：

uni.request({
  url: '你的SSE地址',
  method: 'GET',
  responseType: 'stream',
  success: (res) => {
    res.onChunkReceived((chunk) => {
      console.log('收到数据:', chunk.data)
    })
  }
})

注意：需服务端支持SSE，返回text/event-stream类型数据。


在 UniApp 中使用 SSE（Server-Sent Events）可以通过 Web API 的 EventSource 实现，因为 UniApp 基于 Web 技术栈。以下是基本使用方法和示例代码：

1. 创建 SSE 连接

使用 new EventSource(url) 建立与服务器的连接。确保服务器支持 SSE（响应头包含 Content-Type: text/event-stream）。

// 在页面或组件中
export default {
  data() {
    return {
      eventSource: null,
      messages: []
    };
  },
  mounted() {
    this.connectSSE();
  },
  methods: {
    connectSSE() {
      // 替换为你的 SSE 服务地址
      const url = 'https://your-server.com/sse-endpoint';
      this.eventSource = new EventSource(url);

      // 监听消息事件
      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data); // 假设服务器返回 JSON
        this.messages.push(data);
        console.log('收到消息:', data);
      };

      // 监听自定义事件（如果服务器定义了其他事件类型）
      this.eventSource.addEventListener('customEvent', (event) => {
        console.log('自定义事件:', event.data);
      });

      // 处理错误
      this.eventSource.onerror = (error) => {
        console.error('SSE 连接错误:', error);
        // 可选：尝试重连
      };
    },
    closeSSE() {
      if (this.eventSource) {
        this.eventSource.close(); // 关闭连接
        this.eventSource = null;
      }
    }
  },
  beforeDestroy() {
    this.closeSSE(); // 组件销毁时关闭连接
  }
};

2. 服务器端要求

  • 响应必须设置 Content-Type: text/event-stream。
  • 数据格式遵循 SSE 规范，例如：
    data: {"message": "Hello, SSE!"}

event: customEvent
data: 这是自定义事件

3. 注意事项

  • 跨域问题：如果服务器在不同域名，需配置 CORS。
  • 平台兼容性：H5 和部分小程序平台支持（具体需测试目标平台）。
  • 网络权限：在 manifest.json 中配置合法域名（如使用 HTTPS）。

4. 示例场景

适用于实时通知、日志推送、数据更新等场景。如果需双向通信，考虑 WebSocket。

根据你的需求调整事件处理和错误恢复逻辑。

回到顶部