uniapp app如何调用流式接口实现数据交互

在uniapp开发的APP中，如何调用流式接口实现实时数据交互？比如需要持续接收服务器推送的聊天消息或实时行情数据，应该采用什么技术方案？具体实现时需要注意哪些细节，比如心跳机制、断线重连、数据缓冲处理等？能否提供简单的代码示例说明WebSocket或SSE在uniapp中的完整调用流程？

2 回复

在uniapp中调用流式接口（如SSE或WebSocket）实现数据交互，可以这样操作：

  1. SSE方式（适合单向数据流）：

    • 使用uni.request发起请求，设置responseType: 'stream'
    • 监听onChunkReceived事件分块接收数据
    uni.request({
  url: '你的接口地址',
  method: 'GET',
  responseType: 'stream',
  success: (res) => {
    res.task.onChunkReceived((chunk) => {
      const data = String.fromCharCode.apply(null, new Uint8Array(chunk.data));
      // 处理分块数据
    });
  }
});

  2. WebSocket方式（适合双向通信）：

    const socket = uni.connectSocket({
  url: 'wss://你的地址'
});

socket.onMessage((res) => {
  // 处理实时数据
});

  3. 注意事项：

    • 流式接口需要服务端支持
    • 注意数据分包处理（JSON需手动拼接）
    • 及时关闭连接避免资源浪费

建议根据业务需求选择合适方案，SSE适合服务端推送场景，WebSocket适合需要双向通信的场景。


在 UniApp 中调用流式接口（如 Server-Sent Events 或 WebSocket）实现数据交互，可以通过以下步骤实现。这里以 WebSocket 为例，因为它更通用，适用于实时双向通信。

步骤概述：

  1. 创建 WebSocket 连接：使用 uni.connectSocket 方法连接到流式接口。
  2. 监听事件：处理连接打开、接收消息、错误和关闭事件。
  3. 发送数据：使用 uni.sendSocketMessage 发送请求。
  4. 关闭连接：使用 uni.closeSocket 在适当时机关闭连接。

示例代码：

以下是一个简单的实现，假设流式接口支持 WebSocket 协议：

// 在 UniApp 页面或组件中
export default {
  data() {
    return {
      socketTask: null, // 用于存储 WebSocket 连接对象
      receivedData: '' // 存储接收到的流式数据
    };
  },
  onLoad() {
    this.initWebSocket(); // 页面加载时初始化 WebSocket
  },
  onUnload() {
    this.closeWebSocket(); // 页面卸载时关闭连接，避免内存泄漏
  },
  methods: {
    // 初始化 WebSocket 连接
    initWebSocket() {
      // 连接到 WebSocket 服务器，替换为你的流式接口 URL
      this.socketTask = uni.connectSocket({
        url: 'wss://your-stream-api-url', // 使用 wss 协议（安全 WebSocket）
        success: () => {
          console.log('WebSocket 连接成功');
        },
        fail: (err) => {
          console.error('WebSocket 连接失败:', err);
        }
      });

      // 监听 WebSocket 打开事件
      this.socketTask.onOpen(() => {
        console.log('WebSocket 已打开');
        // 连接成功后，可以发送初始请求（如果需要）
        this.sendMessage('开始请求数据');
      });

      // 监听接收消息事件
      this.socketTask.onMessage((res) => {
        console.log('收到流式数据:', res.data);
        this.receivedData += res.data; // 累积数据或直接处理
        // 这里可以更新 UI，例如显示实时数据
      });

      // 监听错误事件
      this.socketTask.onError((err) => {
        console.error('WebSocket 错误:', err);
      });

      // 监听关闭事件
      this.socketTask.onClose(() => {
        console.log('WebSocket 连接已关闭');
      });
    },

    // 发送数据到服务器
    sendMessage(message) {
      if (this.socketTask && this.socketTask.readyState === 1) { // 检查连接状态为 OPEN
        uni.sendSocketMessage({
          data: message,
          success: () => {
            console.log('消息发送成功');
          },
          fail: (err) => {
            console.error('消息发送失败:', err);
          }
        });
      } else {
        console.warn('WebSocket 未连接，无法发送消息');
      }
    },

    // 关闭 WebSocket 连接
    closeWebSocket() {
      if (this.socketTask) {
        this.socketTask.close({
          success: () => {
            console.log('WebSocket 已手动关闭');
          },
          fail: (err) => {
            console.error('关闭 WebSocket 失败:', err);
          }
        });
      }
    }
  }
};

关键点说明：

  • URL 协议：使用 wss://（安全 WebSocket）或 ws://，确保与服务器协议匹配。
  • 连接管理：在 onLoad 中初始化，onUnload 中关闭，避免资源泄露。
  • 错误处理：添加监听处理网络错误或服务器问题。
  • 数据格式：根据接口要求，可能需发送 JSON 字符串（例如 JSON.stringify({ action: 'start' })）。

其他流式协议：

  • 如果使用 Server-Sent Events (SSE)，UniApp 不支持原生 EventSource，但可通过 uni.request 实现长轮询或使用 WebSocket 模拟。
  • 对于简单场景，可考虑使用 HTTP 流，但 UniApp 中更推荐 WebSocket 以实现高效实时交互。

根据你的接口类型调整代码。如果有具体协议细节，可进一步优化实现。

回到顶部