uniapp进行流式请求chatgpt的api接口的代码需要分平台
1、如果最终导出微信小程序的话,那么就可以直接使用uni.request,其他小程序、app、h5都不支持uni.request进行流式请求数据了。
示例代码
var requestTaskw = uni.request({ url: 'https://api.openai.com/v1/chat/completions', // 请求地址 method: "POST", // 你的请求方法 timeout: 15000, data: JSON.stringify({ model: 'gpt4O', messages: [{ role: 'user', content: 'hello' }], temperature: 0.9, max_tokens: 100, stream: true }), header: { "Content-Type": "application/json", 'Authorization': `Bearer APIKEY`, }, responseType: "text", enableChunked: true, // 开启流传输 success: response => { console.log(response) }, fail: error => {} }); requestTaskw.onHeadersReceived(function(res) { console.log(res.header); }); // 这里监听消息 requestTaskw.onChunkReceived(function(res) { let decoder = new TextDecoder('utf-8'); let text = decoder.decode(new Uint8Array(res.data)); console.log(text) })2、如果最终导出h5页面的话,可以使用fetch
参考代码:点击打开链接
3、如果是andriod或app及其他小程序,有两种办法
3.1 内嵌h5网页,h5网页中使用fetch方式
3.2 服务端统一采用websocket进行中转,这个适合所有的客户端
服务端示例代码如下:
点击查看全文
<?php use Swoole\WebSocket\Server; use Swoole\Coroutine\Http\Client; $server = new Server("0.0.0.0", 9501); $server->on("start", function ($server) { echo "Swoole WebSocket server is started at ws://0.0.0.0:9501\n"; }); $server->on("open", function ($server, $request) { echo "Connection open: {$request->fd}\n"; }); $server->on("message", function ($server, $frame) { echo "Received message: {$frame->data}\n"; // 解析JSON数据 $data = json_decode($frame->data, true); if (json_last_error() !== JSON_ERROR_NONE) { $server->push($frame->fd, "Invalid JSON data"); return; } // 根据action执行不同操作 if (isset($data['action']) && $data['action'] === 'ask') { $content = $data['content']; // 使用协程客户端发送HTTP请求 go(function () use ($server, $frame, $content) { $client = new Client('api.openai.com', 443, true); $client->setHeaders([ 'Content-Type' => 'application/json', 'Authorization' => 'Bearer APIKEY', ]); $messages = [ ["role" => "system", "content" => "你是一个AI助手chatai"], ["role" => "user", "content" => $content] ]; $postData = [ "model" => "gpt-4", // 阿里通义千问填qwen-plus 'messages' => $messages, "max_tokens" => 100, "temperature" => 0.1, "n" => 1, "stream" => true ]; // 阿里通义千问填 /compatible-mode/v1/chat/completions $client->post('/v1/chat/completions', json_encode($postData, JSON_UNESCAPED_UNICODE)); if ($client->statusCode !== 200) { $server->push($frame->fd, "Error: " . $client->errMsg); $client->close(); return; } // 处理响应数据 $data = $client->body; $lines = array_filter(explode("\n", $data), function($line) { return trim($line) !== ''; }); foreach ($lines as $line) { $server->push($frame->fd, $line); } $client->close(); }); } else { $server->push($frame->fd, "Unknown action: " . $data['action']); } }); $server->on("close", function ($server, $fd) { echo "Connection close: {$fd}\n"; }); $server->start(); ?>uniapp客户端代码
<template> <view class="container"> <input v-model="inputValue" placeholder="请输入提示词" /> <button @click="sendMessage">发送</button> <view v-for="(message, index) in messages" :key="index"> {{ message }} </view> </view> </template> <script> export default { data() { return { inputValue: '', messages: [], socket: null } }, onLoad() { this.connectWebSocket(); }, methods: { connectWebSocket() { this.socket = uni.connectSocket({ url: 'ws://0.0.0.0:9501', // 替换为实际的WebSocket服务器地址 success: () => { console.log('WebSocket连接已打开'); }, fail: (error) => { console.error('WebSocket连接错误', error); } }); this.socket.onOpen(() => { console.log('WebSocket连接已打开'); }); this.socket.onClose(() => { console.log('WebSocket连接已关闭'); }); this.socket.onError((error) => { console.error('WebSocket连接错误', error); }); this.socket.onMessage((message) => { console.log('收到服务器消息:', message.data); this.messages.push(message.data); }); }, sendMessage() { if (this.socket && this.socket.readyState === 1) { // 1 表示 WebSocket 连接已打开 const message = { action: 'ask', content: this.inputValue }; this.socket.send({ data: JSON.stringify(message), success: () => { console.log('消息发送成功'); }, fail: (error) => { console.error('消息发送失败', error); } }); } else { console.error('WebSocket连接未打开'); } } } } </script> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } input { width: 80%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; } button { width: 80%; padding: 10px; background-color: #1aad19; color: white; text-align: center; border: none; border-radius: 5px; } </style>
网友回复