使用 JavaScript 调用 ChatGPT API (v1/chat/completions) 实现实时流式响应

以下是一个使用 JavaScript 调用 ChatGPT API (v1/chat/completions) 接口实现实时流式响应的代码示例，假设已经引入了 axios 库和 jQuery 库：

// 定义一个全局变量用于存储websocket连接
let ws;

// 定义一个函数用于初始化websocket连接
function initWebSocket() {
  // 创建websocket连接
  ws = new WebSocket('wss://api.openai.com/v1/chat/completions/stream');

  // 监听连接打开事件
  ws.onopen = function() {
    console.log('WebSocket连接已打开');
  };

  // 监听接收到消息事件
  ws.onmessage = function(event) {
    // 将接收到的数据转为文本
    let text = JSON.parse(event.data).choices[0].text;

    // 打印到文本框
    $('#output').append(text);
  };

  // 监听连接关闭事件
  ws.onclose = function() {
    console.log('WebSocket连接已关闭');
  };
}

// 定义一个函数用于发送请求
function sendRequest(prompt) {
  // 构造请求数据
  let requestData = {
    prompt: prompt,
    max_tokens: 10,
    temperature: 0.5,
    n: 1,
    stream: true
  };

  // 发送POST请求
  axios.post('https://api.openai.com/v1/chat/completions', requestData, {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    // 打开websocket连接
    if (!ws || ws.readyState !== WebSocket.OPEN) {
      initWebSocket();
    }
  })
  .catch(error => {
    console.log(error);
  });
}

// 监听提交按钮点击事件
$('#submit').click(function() {
  let prompt = $('#prompt').val();
  sendRequest(prompt);
});

上面的代码中，initWebSocket 函数用于初始化 WebSocket 连接，sendRequest 函数用于发送请求，当请求成功时打开 WebSocket 连接，并将接收到的数据转为文本逐字打印到文本框。监听提交按钮点击事件，获取输入框中的文本，调用 sendRequest 函数发送请求。在发送请求时，需要将 stream 参数设置为 true，表示开启流式传输模式。另外，需要在请求头中添加 Authorization 和 Content-Type 两个参数，分别用于传递 API 密钥和设置请求数据格式为 JSON。