uni-app 使用 sse 协议

在 uni-app 中使用 Server-Sent Events (SSE) 协议来接收服务器推送的数据，你可以使用原生的 EventSource 对象。EventSource 是一个内置的浏览器对象，可以用来处理 SSE 连接。以下是如何在 uni-app 中实现 SSE 的步骤：

步骤 1: 创建 SSE 服务#

首先，你需要在后端设置一个 SSE 服务。如果你已经有了一个 SSE 服务，可以直接跳到下一步。否则，可以参考前面提供的 NestJS 示例来创建一个 SSE 服务。

步骤 2: 在 `uni-app` 中订阅 SSE 服务#

在 uni-app 中，你可以使用 EventSource 对象来订阅 SSE 服务。以下是一个简单的示例，展示如何在 uni-app 中订阅 SSE 服务并处理接收到的数据。

在 Vue 组件中使用 SSE#

创建 Vue 组件

假设你有一个名为 Auction.vue 的组件，你可以在 mounted 生命周期钩子中订阅 SSE 服务。

<template>
  <view>
    <text>最新出价: {{ latestBid }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latestBid: null,
    };
  },
  mounted() {
    this.subscribeToSSE();
  },
  beforeDestroy() {
    this.unsubscribeFromSSE();
  },
  methods: {
    subscribeToSSE() {
      const auctionId = 123; // 替换为实际的 auctionId
      const eventSource = new EventSource(`${this.$config.baseUrl}/auction/${auctionId}/subscribe`);

      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        this.latestBid = data;
        console.log('New bid:', data);
      };

      eventSource.onerror = (error) => {
        console.error('SSE error:', error);
        eventSource.close();
      };

      // 保存 eventSource 实例以便后续关闭
      this.eventSource = eventSource;
    },
    unsubscribeFromSSE() {
      if (this.eventSource) {
        this.eventSource.close();
      }
    },
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>

配置基础 URL

在 uni-app 项目中，你可能需要配置一个基础 URL (baseUrl)，以便在多个地方重用。你可以在 main.js 或 main.ts 中设置这个配置。

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 配置基础 URL
Vue.prototype.$config = {
  baseUrl: 'http://your-backend-url.com', // 替换为你的后端服务地址
};

App.mpType = 'app';

const app = new Vue({
  ...App
});

app.$mount();

步骤 3: 测试 SSE 功能#

启动后端服务

确保你的后端 SSE 服务已经启动并且可以正常工作。
运行 uni-app 项目

在 uni-app 项目中运行你的项目，确保可以成功订阅 SSE 服务并接收到推送的数据。
观察日志

打开开发者工具，查看控制台日志，确保 onmessage 回调函数被正确调用，并且数据被正确解析和显示。

注意事项#

跨域问题：如果你的前端和后端不在同一个域名下，确保后端服务允许跨域请求。
错误处理：在 onerror 回调中处理 SSE 连接错误，并在适当的时候重新连接。
性能考虑：SSE 连接会长时间保持打开状态，确保服务器和客户端都能处理这种情况。

通过以上步骤，你可以在 uni-app 项目中实现 SSE 功能，接收来自后端的实时数据推送。