+
97
-

回答

uniapp进行流式请求chatgpt的api接口的代码需要分平台

1、如果最终导出微信小程序的话,那么就可以直接使用uni.request,其他小程序、app、h5都不支持uni.request进行流式请求数据了。

800_auto

800_auto

示例代码

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>

网友回复

我知道答案,我要回答