更新记录

1.2.1（2026-04-25）

支持各大小程序 支持http sse模式和websocket模式

v1.0.0（2026-04-21）

• 支持 iOS 与 Android 平台
• 提供 openAIStream，用于 OpenAI 兼容聊天流式请求
• 提供 streamRequest，用于通用 SSE 流式请求
• 支持 abortStream 与 abortRequest 取消请求
• 已适配 DashScope 兼容 OpenAI 接口的流式调用方式
• 提供完整 README、TypeScript 类型说明与示例

平台兼容性

uni-app(3.8.0)

uni-app x(3.8.0)

vm-openai

vm-openai 是一个 uni-app / uni-app x 插件，用于发起 OpenAI 兼容流式 AI 请求。

核心说明：vm-openai 同时支持原生 HTTP chunk/SSE 和 WebSocket 两种流式模式。业务侧统一调用同一套 API，插件内部会根据 http(s):// 或 ws(s):// 协议自动选择对应传输实现，并对不同小程序平台和 App 端的差异做兼容处理。

当前提供两个 API：

• openAIStream 面向 OpenAI 兼容聊天接口，直接返回增量文本
• streamRequest 面向通用 SSE 接口，原样返回 event / id / data

如果你希望直接复用聊天界面，可以搭配 vm-openai-ui 一起使用。

流式协议支持

如果使用 WebSocket 流式输出，可以参考服务端转接器项目 vm-openai-ws-proxy。该项目用于接收 vm-openai 的 WebSocket 请求，在服务端调用 OpenAI 兼容 /chat/completions，再把 SSE 流式响应转发回 WebSocket，同时避免在小程序端暴露真实 API Key。

导入方式

业务侧统一从插件根入口导入。插件内部会按平台条件编译分发到 App UTS 或对应小程序适配层：

import {
  openAIStream,
  abortStream,
  streamRequest,
  abortRequest
} from '@/uni_modules/vm-openai'

TypeScript 导入方式：

import {
  openAIStream,
  abortStream,
  streamRequest,
  abortRequest
} from '@/uni_modules/vm-openai'
import type {
  VMOpenAIChatMessage,
  VMOpenAISSECompleteEvent,
  VMOpenAISSEError,
  VMOpenAISSEEvent,
  VMOpenAIStreamChatOptions,
  VMOpenAIStreamChunkEvent,
  VMOpenAIStreamCompleteEvent,
  VMOpenAIStreamError,
  VMOpenAISSEOptions
} from '@/uni_modules/vm-openai/utssdk/interface.uts'

API 选择

快速开始

下面示例演示一个页面里最常见的用法：发送用户输入、流式累积模型回复、支持主动取消。

import {
  openAIStream,
  abortStream
} from '@/uni_modules/vm-openai'

export default {
  data() {
    return {
      inputText: '',
      answerText: '',
      loading: false
    }
  },
  methods: {
    sendMessage() {
      const content = this.inputText.trim()
      if (!content || this.loading) {
        return
      }

      this.answerText = ''
      this.loading = true

      openAIStream({
        apiKey: 'YOUR_API_KEY',
        baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
        model: 'qwen-plus',
        messages: [
          {
            role: 'system',
            content: '你是一个有帮助的助手。'
          },
          {
            role: 'user',
            content
          }
        ],
        onChunk: (res) => {
          this.answerText += res.deltaText
        },
        onError: (err) => {
          this.loading = false
          uni.showToast({
            title: err.message || '请求失败',
            icon: 'none'
          })
        },
        onComplete: () => {
          this.loading = false
        }
      })
    },
    stopMessage() {
      abortStream()
    }
  }
}

Vue3 组合式写法：

<script setup lang="ts">
import { ref } from 'vue'
import {
  openAIStream,
  abortStream
} from '@/uni_modules/vm-openai'
import type {
  VMOpenAIChatMessage,
  VMOpenAIStreamChunkEvent,
  VMOpenAIStreamCompleteEvent,
  VMOpenAIStreamError,
  VMOpenAIStreamOpenEvent
} from '@/uni_modules/vm-openai/utssdk/interface.uts'

const inputText = ref('')
const answerText = ref('')
const loading = ref(false)

function sendMessage() {
  const content = inputText.value.trim()
  if (!content || loading.value) {
    return
  }

  const messages: VMOpenAIChatMessage[] = [
    {
      role: 'system',
      content: '你是一个有帮助的助手。'
    },
    {
      role: 'user',
      content
    }
  ]

  answerText.value = ''
  loading.value = true

  openAIStream({
    apiKey: 'YOUR_API_KEY',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    model: 'qwen-plus',
    messages,
    onOpen(res: VMOpenAIStreamOpenEvent) {
      console.log('stream opened:', res.statusCode)
    },
    onChunk(res: VMOpenAIStreamChunkEvent) {
      answerText.value += res.deltaText
    },
    onError(err: VMOpenAIStreamError) {
      loading.value = false
      uni.showToast({
        title: err.message || '请求失败',
        icon: 'none'
      })
    },
    onComplete(res: VMOpenAIStreamCompleteEvent) {
      loading.value = false
      if (res.cancelled) {
        console.log('stream cancelled')
      }
    }
  })
}

function stopMessage() {
  abortStream()
}
</script>

使用 WebSocket 转接器时，只需要把 baseURL 换成 WebSocket 地址，回调写法保持不变：

let answerText = ''

openAIStream({
  apiKey: 'dummy',
  baseURL: 'wss://your-domain.example.com/openai-stream',
  model: 'qwen-plus',
  messages: [
    { role: 'user', content: '你好' }
  ],
  onOpen(res) {
    console.log('websocket opened:', res.statusCode) // WebSocket 连接成功时通常为 101
  },
  onChunk(res) {
    answerText += res.deltaText
    console.log('delta:', res.deltaText)
    console.log('answer:', answerText)
  },
  onError(err) {
    console.log('websocket stream error:', err.statusCode, err.message, err.raw)
  },
  onComplete(res) {
    if (res.cancelled) {
      console.log('websocket stream cancelled')
      return
    }
    console.log('websocket stream complete:', answerText)
  }
})

// 需要主动停止时调用：
// abortStream()

说明：如果 API Key 已保存在 vm-openai-ws-proxy 服务端，客户端的 apiKey 可传占位值；真实 Key 不需要下发到小程序端。 WebSocket 服务端正常结束时需要返回 [DONE] 或 { "type": "done" }，客户端才会触发 onComplete；连接失败或服务端返回 { "type": "error" } 时会触发 onError。

openAIStream

最小示例：

openAIStream({
  apiKey: 'YOUR_API_KEY',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  model: 'qwen-plus',
  messages: [
    { role: 'user', content: '你是谁？' }
  ],
  onOpen(res) {
    console.log('statusCode =', res.statusCode)
  },
  onChunk(res) {
    console.log('deltaText =', res.deltaText)
  },
  onError(err) {
    console.log('error =', err.message, err.statusCode, err.raw)
  },
  onComplete(res) {
    console.log('done =', res.cancelled)
  }
})

TypeScript 示例：

const messages: VMOpenAIChatMessage[] = [
  { role: 'user', content: '你是谁？' }
]

const options: VMOpenAIStreamChatOptions = {
  apiKey: 'YOUR_API_KEY',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  model: 'qwen-plus',
  messages,
  onChunk(res: VMOpenAIStreamChunkEvent) {
    console.log(res.deltaText)
  },
  onError(err: VMOpenAIStreamError) {
    console.log(err.message)
  },
  onComplete(res: VMOpenAIStreamCompleteEvent) {
    console.log(res.cancelled)
  }
}

openAIStream(options)

入参

messages 元素结构：

对应 TypeScript 类型：

type VMOpenAIChatMessage = {
  role: string
  content: string
}

回调出参

onLog(res)

onOpen(res)

onChunk(res)

onError(err)

onComplete(res)

说明：

• 如果传 HTTP baseURL，插件会自动补 /chat/completions
• App 支持 http(s):// 原生 chunk/SSE 和 ws(s):// WebSocket，会按协议自动分发；不支持的协议会触发 onError
• 微信小程序支持 http(s):// 原生 chunk/SSE 和 ws(s):// WebSocket，会按协议自动分发；不支持的协议会触发 onError
• 百度小程序支持 http(s):// 原生 chunk/SSE 和 ws(s):// WebSocket，会按协议自动分发；不支持的协议会触发 onError
• 抖音/支付宝/小红书/京东/飞书/快手/QQ 小程序端只支持 WebSocket 流式输出，baseURL 需要直接传 ws:// / wss:// 地址，不会自动转换协议
• 完整文本建议业务侧在 onChunk 中自行累积

streamRequest

最小示例：

streamRequest({
  url: 'https://example.com/sse',
  method: 'POST',
  headers: {
    Authorization: 'Bearer xxx',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    stream: true
  }),
  onOpen(res) {
    console.log('statusCode =', res.statusCode)
  },
  onEvent(res) {
    console.log('event =', res.event)
    console.log('id =', res.id)
    console.log('data =', res.data)
  },
  onError(err) {
    console.log('error =', err.message, err.statusCode, err.raw)
  },
  onComplete(res) {
    console.log('done =', res.cancelled)
  }
})

TypeScript 示例：

const options: VMOpenAISSEOptions = {
  url: 'https://example.com/sse',
  method: 'POST',
  headers: {
    Authorization: 'Bearer xxx',
    'Content-Type': 'application/json'
  } as UTSJSONObject,
  body: JSON.stringify({ stream: true }),
  onEvent(res: VMOpenAISSEEvent) {
    console.log(res.event, res.id, res.data)
  },
  onError(err: VMOpenAISSEError) {
    console.log(err.message)
  },
  onComplete(res: VMOpenAISSECompleteEvent) {
    console.log(res.cancelled)
  }
}

streamRequest(options)

OpenAI 兼容 SSE 解析示例：

let answerText = ''

streamRequest({
  url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'qwen-plus',
    stream: true,
    messages: [
      { role: 'user', content: '写一个一句话笑话' }
    ]
  }),
  onEvent(res) {
    if (!res.data || res.data === '[DONE]') {
      return
    }

    try {
      const payload = JSON.parse(res.data)
      const deltaText = payload.choices &&
        payload.choices[0] &&
        payload.choices[0].delta &&
        payload.choices[0].delta.content

      if (deltaText) {
        answerText += deltaText
        console.log(answerText)
      }
    } catch (error) {
      console.log('SSE data parse failed:', res.data)
    }
  },
  onError(err) {
    console.log('streamRequest error:', err.message)
  },
  onComplete() {
    console.log('streamRequest complete:', answerText)
  }
})

入参

回调出参

onLog(res)

onOpen(res)

onEvent(res)

onError(err)

onComplete(res)

说明：

• streamRequest 不会帮你做 OpenAI JSON 解码
• 如果服务端返回的是 OpenAI 兼容 SSE，请在业务层自己解析 res.data
• App 会根据 streamRequest.url 协议选择 HTTP SSE 或 WebSocket，不支持的协议会触发 onError
• 微信小程序会根据 streamRequest.url 协议选择 request 或 WebSocket，不支持的协议会触发 onError
• 百度小程序会根据 streamRequest.url 协议选择 request 或 WebSocket，不支持的协议会触发 onError
• 抖音/支付宝/小红书/京东/飞书/快手/QQ 小程序端只支持 WebSocket，streamRequest.url 需要直接传 ws:// / wss:// 地址

取消请求

取消后，onComplete 会回调：

onComplete(res) {
  if (res.cancelled) {
    console.log('request cancelled')
  }
}

DashScope / qwen-plus 示例

openAIStream({
  apiKey: 'YOUR_DASHSCOPE_API_KEY',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  model: 'qwen-plus',
  messages: [
    { role: 'user', content: '你好' }
  ],
  onChunk(res) {
    console.log(res.deltaText)
  }
})

建议