让你的网站更智能！使用Autocode将ChatGPT的回应直播到你的网站上

目录

• 第一部分: 添加流式处理到您的项目中
  • 介绍
  • 解决方案
• 第二部分: 设置项目用于流式处理
  • 项目准备
  • 函数脚本
  • 设置数据流
• 第三部分: 前端设置以支持流式处理
  • 前端准备
  • 代码实现
• 第四部分: 使用流式处理完成数据交互
  • 创建空气泡
  • 数据流处理逻辑
• 第五部分: 等待数据处理完成并关闭连接
  • 处理数据完成事件
  • 关闭连接
• 第六部分: 总结和建议
  • 感谢
  • 更进一步

👉 第一部分: 添加流式处理到您的项目中

介绍

在上一期视频中，我向您展示了如何在您的网站上添加Chat GPT，并且效果非常好。但是，当您向机器人提出一个非常复杂的问题并期望获得一个非常长的答案时，机器人的回复时间会非常长，这对用户体验不是很好。幸运的是，我们有解决方案！在本视频中，我将向您展示如何为项目添加流式处理，这样机器人生成答案时就会实时将其输入，这很酷，不是吗？这样，您就不必等到答案生成结束才显示答案的开头部分，而且最好的是，Autocode原生支持流式处理，所以添加流式处理实际上非常简单。如果您之前已经观看了上一期的视频，那太好了，您已经获得了在本视频中需要的所有代码，太棒了！我们将直接进入编辑器，我将在那里等候您。

解决方案

我在我的send-message.js文件中，这是后端JavaScript。现在，如果我想流式处理一些数据，我需要告诉Autocode我希望此函数支持流式处理，并且可以通过使用称为"function script"的内容来实现，即使您没有意识到，但它其实非常容易理解。既然可能是我们第一次使用它，我们可以从这里复制粘贴我们的函数脚本规范。您可以在这里复制它，然后将其粘贴到导入lib库的位置下面，就像这样放在第五行。

这看起来只是一个大的注释，但实际上它以一种可以让function script理解和解释的方式进行格式化。首先，我们会在第六行中看到，此函数的作用仅是使用Chat GPT的API回复用户，并支持流式处理。接下来，在第七和第八行，我们创建了两个参数，它们都是字符串。session是用户的唯一标识符，您记得上一次视频中它是自动生成的，上一次的视频中我们称其为message，我们之后会看到为什么我们对其进行更改。最后，在第九行，我们创建了一个新的stream，名为message，它也是一个stream，我对其进行了重命名。最后，在第十行和第十一行，我们说此函数返回一个包含字符串content的对象。就是这样，这就是我们的“function script”的全部内容。我们基本上声明了这个函数需要做什么以使其能够并支持流式处理，它需要这些参数以使其正常工作，并输出这种类型的内容，然后我们使用module.exports使其正常工作。太棒了！还有一件事需要注意，我们将message更改为content。我们在上线这里将其更改为Context.params.content而不是context.params.message。你们看到了顶部的参数和这里的context.params之间的关联了吗？这里的context.params之所以起作用，是因为有function script，你可能之前不知道这一点，现在理解了吧？那就好，这就是关于function script的一切!我们只是声明这个函数需要完成的工作和支持流式处理，它需要这些参数并输出什么，然后我们使用module.exports使其正常工作。太棒了！还有一件事需要注意，我们将message更改为content。我们在第14行执行module.exports，我只是按下Tab键，Order Code将为我生成它，好，现在我们需要去执行这个功能，，所以在这里，我们要取出我们的session，content和context，然后我们所有现有的代码都需要放到这些大括号里面，所以让我们去除这里的花括号。然后，我们会一直来到文件的底部，我要把它放在这里，我们要返回data，然后我们将选择所有现有的代码，并进行缩进，以便按照最佳实践进行操作，太棒了！这就是用于function script的设置，我们基本上只是声明了这是函数所要做的工作，以支持流式处理。现在，我们需要包装整个代码块，并导出一个模块，以使其正常工作。所以在第14行我们要做module.exports，然后我只是按下Tab键，Order Code将为我生成它，好，现在我们需要去执行这个功能，所以在这里，我们要取出我们的session，content和context，然后我们所有现有的代码都需要放到这些大括号里面，所以让我们去除这里的花括号。然后，我们会一直来到文件的底部，我要把它放在这里，我们要返回data，然后我们将选择所有现有的代码，并进行缩进，以便按照最佳实践进行操作，太棒了！这就是用于function script的设置，我们基本上只是声明了这是函数所要做的工作，以支持流式处理，它需要这些参数并输出什么，然后我们使用module.exports使其正常工作。太棒了！还有一件事需要注意，我们将message更改为content。我们在第14行执行module.exports，我只是按下Tab键，Order Code会为我生成它，好，现在我们需要去执行这个功能，所以在这里，我们要取出我们的session，content和context，然后我们所有现有的代码都需要放到这些大括号里面，所以让我们去除这里的花括号。然后，我们会一直来到文件的底部，我要把它放在这里，我们要返回data，然后我们将选择所有现有的代码，并进行缩进，以便按照最佳实践进行操作，太棒了！这就是用于function script的设置，我们基本上只是声明了这是函数所要做的工作，以支持流式处理，它需要这些参数并输出什么，然后我们使用module.exports使其正常工作，太棒了！还有一件事需要注意，我们将message更改为content。我们在第14行执行module.exports，我只是按下Tab键，Order Code会为我生成它，太棒了！

👉 第二部分: 设置项目用于流式处理

项目准备

我们打算将流式处理添加到后端JavaScript文件中的项目中。确保您已经观看了上一期的视频，因为我们将基于上一期的内容修改代码。如果您没有观看上一期视频，这没有问题，您可以从这里获取本视频的代码。但是，我建议您首先观看上一期视频，以了解整个流程。

函数脚本

让我们编辑我们的send-message.js文件。在顶部导入模块之后，我们需要插入我们的函数脚本规范。我们将在第5行插入它，只需将其粘贴在这里即可，像这样：

// Function script specification
const functionscript = `
# API Endpoint: /send-message
#
# This function responds to the user with the ChatGPT API and supports streaming.
#
# Request:
#   session: string (the unique user identifier)
#   content: string (the user's input)
#
# Response:
#   message: string (the content of the bot's response)
#
post endpoint '/send-message'
  response = @chatgpt.api.createCompletion(
    engine: 'text-davinci-002',
    prompt: content,
    maxTokens: 100,
    n: 1,
    stopSequences: ['\n', '.'],
    temperature: 0.6,
    topP: 1.0,
    frequencyPenalty: 0.0,
    presencePenalty: 0.0,
    exampleArgs: { session: session, content: content }
  )

  # Enable streaming
  stream message = new Stream('message')

  return {
    content: message
  }
`;

// The rest of your code...

这只是一个带有注释的字符串，但是这是function script的规范。现在它看起来可能很复杂，但是实际上很简单。现在让我解释一下上面的代码。在第6行，我们看到这个函数的作用就是“使用ChatGPT的API回复用户并支持流式处理”。在第7和第8行，我们创建了两个参数，分别称为session和content，这两个参数都是字符串类型。session是用户的唯一标识符，content是用户在信息框中输入的内容。在第9行，我们创建了一个名为message的新stream，它是一个stream类型。最后，在第10和第11行，我们返回一个包含content字符串的对象。这就是我们的function script。

设置数据流

在添加完function script之后，我们现在需要对我们的代码进行更改，以支持流式处理。我们需要在函数代码的顶部告诉Autocode，我们希望这个函数支持流式处理。幸运的是，这非常简单。我们只需要在我们的代码中添加一行，告诉Autocode，我们将使用流进行数据传输。在第14行的module.exports之前的代码块中添加以下代码：

// Enable streaming
context.stream(message, Delta, {
  description: 'Respond to a user with the ChatGPT API, supporting streaming',
  session: session,
  content: content
})

很简单吧！我们只是对上一期视频中的代码进行了一点小小的更改，以及我们添加了一行代码来支持流式处理。这是我们告诉Autocode我们要启用流的方法。好了，这就是我们所需的一切。我们已经成功地设置了项目，以支持流式处理的后端。

👉 第三部分: 前端设置以支持流式处理

前端准备

现在，我们需要添加一些前端的代码，以使应用程序能够接收来自后端的流式数据。我们将继续在我们的scripts.js文件中进行操作。

代码实现

在scripts.js文件中，我们需要添加一些代码来获取来自流的数据，并将其显示在我们的气泡中。我们需要为此创建一个连接，并使用JavaScript内置的Event Source API来监听新数据。

// Create a new Event Source connection
const eventSource = new EventSource('/send-message', {
  session: encodeURIComponent(session),
  content: encodeURIComponent(input),
  _stream: true
})

// Listen for new data from the event stream
eventSource.addEventListener('message', (event) => {
  const data = JSON.parse(event.data)
  let bubble = document.getElementById(`message-${botMessageCount}`)
  bubble.innerText += data;
})

// TODO: Handle data completion and close the connection

这段代码的第一部分是创建一个新的Event Source连接。我们传递了一些参数，包括session和content。我们还告诉Autocode我们希望使用流的方式传输数据。第二部分是监听来自事件流的新数据。每次接收到新数据时，我们将把数据添加到适当的气泡中。好了，前端的准备工作已经完成。

👉 第四部分: 使用流式处理完成数据交互

创建空气泡

首先，我们将修改我们的HTML代码，以便我们可以创建一个初始的空气泡来模拟类似于机器人正在打字的效果，并在接收到新数据时进行更新。在我们的index.html文件中，只需将以下代码添加到合适的位置即可：

<div id="messages">
  <!-- The user's input bubble -->
  <div class="input-bubble">
    <span id="user-message">{input}</span>
  </div>

  <!-- The initial empty bubble -->
  <div class="bubble">
    <span id="message-0"></span>
  </div>
</div>

我们只需添加一个具有唯一id的空气泡，并将其放在合适的位置。我们将使用JavaScript来更新此气泡，以显示从流中接收到的新数据。

数据流处理逻辑

现在，我们需要更新我们的JavaScript代码，以处理来自流的新数据。我们将完善之前创建的代码并添加适当的逻辑，从而实现在生成答案的同时显示部分答案，而不必等待所有数据生成完成。让我们回到我们的scripts.js文件并添加一些代码：

// Listen for new data from the event stream
eventSource.addEventListener('message', (event) => {
  const data = JSON.parse(event.data)
  let bubble = document.getElementById(`message-${botMessageCount}`)
  bubble.innerText += data;

  // Scroll to the bottom of the messages container
  let messages = document.getElementById('messages');
  messages.scrollTop = messages.scrollHeight;
})

// TODO: Handle data completion and close the connection

这段代码添加了一些新的逻辑，以处理来自流的新数据。首先，我们将data转换为JSON对象，并找到对应的气泡。然后，我们将更新气泡的内容，以显示新的数据块。

👉 第五部分: 等待数据处理完成并关闭连接

处理数据完成事件

我们需要等待数据生成完成，然后执行一些逻辑。在我们的scripts.js文件中的Event Source监听部分，将下面的代码添加到尾部：

// Listen for the completion of data generation
eventSource.addEventListener('response', (event) => {
  // Re-enable the form
  formInput.disabled = false;
  formButton.disabled = false;

  // Increment the bot message count
  botMessageCount++;

  // Close the connection
  eventSource.close();
})

这段代码监听来自事件流的完成事件。当我们收到完成事件时，我们将执行一些操作，包括重新启用表单，并递增机器人消息计数。然后，我们关闭与事件流的连接，因为我们不再需要它。

关闭连接

我们需要在前端脚本的最后，关闭与事件流的连接。在scripts.js文件的末尾添加以下代码：

// Close the event source connection when the user closes the page
window.addEventListener('beforeunload', () => {
  eventSource.close();
})

这是一个确保我们在用户关闭页面时关闭连接的好习惯。通过添加这段代码，我们可以确保我们在不再需要与事件流建立连接时正确地关闭连接。

👉 第六部分: 总结和建议

感谢

恭喜您！您已成功将流式处理添加到您的项目中。现在，当用户向机器人发送一条消息时，我们可以实时显示机器人正在打字的效果，并在数据生成的同时显示部分答案。这将极大地改善用户体验，并提高应用程序的交互性。

更进一步

通过学习如何使用流式处理，您可以为您的应用程序添加更多交互功能。您可以尝试更改或扩展代码，以适应不同的需求。您还可以尝试在项目中使用不同的API或服务，以实现更多功能。记住，在开发过程中，探索和实践是最好的老师。

如果您有任何问题或需要进一步的帮助，请随时在评论区提问。我们的社区将非常乐意为您提供支持和指导。

📌 高亮

• 在您的网站中添加流式处理以提高用户体验
• 介绍如何在后端设置项目以支持流式处理
• 使用Autocode的function script进行流式处理设置
• 在前端设置中使用JavaScript的Event Source API进行数据接收
• 在气泡中显示来自流的新数据
• 处理数据生成的完成事件
• 关闭与事件流的连接

FAQ

1. 什么是流式处理？ 流式处理是一种将数据以流的方式传输的方法，即数据一部分接一部分地传输。与传统的请求-响应模式不同，流式处理允许数据在生成过程中被逐步接收和处理，从而提供了更高的实时性和交互性。

2. 如何使用Autocode进行流式处理设置？ 要使用Autocode进行流式处理设置，您需要编辑函数脚本规范，以声明您的函数需要支持流式处理。然后，您需要在项目代码中添加一些逻辑，以处理从流中接收到的数据。最后，您需要关闭与事件流的连接，以清理资源。

3. 流式处理如何提高用户体验？ 通过使用流式处理，您可以实时显示正在生成的数据，并同时向用户显示部分结果。这消除了用户等待完成生成的需求，提供了更好的用户体验和交互性。

4. 我能在其他项目中使用这个流式处理的方式吗？ 是的，您可以在各种项目中使用流式处理。您只需要根据您的具体需求和技术栈，在代码中实施相应的逻辑。然后，通过适当的流式处理方法和工具，您可以实现动态展示正在生成的数据。

5. 我需要具备哪些技术知识才能使用流式处理？ 使用流式处理需要您具备一定的后端和前端开发知识。您需要了解后端技术（如JavaScript、API和数据处理），并熟悉前端技术（如HTML、CSS和JavaScript）。此外，了解流式处理的概念和工作原理也是很重要的。

资源

• Autocode官方网站: https://autocode.com/
• Event Source API文档: https://developer.mozilla.org/en-US/docs/Web/API/EventSource