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>
网友回复


