实现打字机的效果

阿拉斯加的头头儿

已于 2023-10-20 14:28:11 修改

阅读量280

点赞数

分类专栏： javascript 文章标签： javascript

于 2023-06-12 17:07:10 首次发布

本文链接：https://blog.csdn.net/weixin_44196534/article/details/131172854

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用text/event-stream协议可以实现 chatGpt 打字机的效果，即实时展示AI回复的文本。
text/event-stream是一种基于HTTP的服务器推送技术，用于实时传输数据。

您可以按照以下步骤来实现：

在前端代码中创建一个EventSource对象，并将URL设置为与AI模型通信的端点。
前端通过监听message事件来接收从服务器发送过来的数据。
后端在接收到用户输入后，将其发送给AI模型进行处理，并将模型生成的文本逐步发送给前端。
后端使用text/event-stream协议发送数据，每条消息以data:开头，并在每条消息之间添加换行符\n\n。

前端代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ChatGpt Typewriter</title>
</head>
<body>
  <div id="app"></div>

  <script>
    const app = document.getElementById('app');
    const eventSource = new EventSource('/chatgpt/stream');

    eventSource.onopen = function(event) {
      console.log('Connection established');
    };

    eventSource.onerror = function(event) {
      console.error('EventSource error:', event);
    };

    let textBuffer = '';
    eventSource.onmessage = function(event) {
      const message = event.data;
      if (message === '\n') {
        const node = document.createElement('p');
        node.textContent = textBuffer;
        app.appendChild(node);
        textBuffer = '';
      } else {
        textBuffer += message;
      }
    };
  </script>
</body>
</html>

后端代码

app.get('/chat', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  // 在此处监听用户输入的消息，然后将其发送给AI模型进行处理，并获取AI回复的文本
  const userInput = ... ; // 获取用户输入的消息
  const aiResponse = ... ; // 调用AI模型生成回复的文本

  // 将AI回复的文本逐步发送给前端
  aiResponse.split('').forEach((char, index) => {
    setTimeout(() => {
      res.write(`data: ${char}\n\n`); // 发送单个字母或单词
    }, index * 100); // 控制发送的速度，可以根据需要调整
  });
});

// 接收前端发送的用户输入
app.post('/send-message', (req, res) => {
  const message = req.body.message;
  // 处理用户输入并作出相应操作，例如将其存储到数据库中、发送给AI模型等
});

在上述代码中，我们首先在前端页面中，创建了一个空的

元素，并向后端发起 text/event-stream 请求，建立与服务器的连接。随后，我们在前端监听 onmessage 事件，将服务器推送过来的数据流解析成一段段的文本，并逐步添加到上述

元素中，模拟打字机的效果。

阿拉斯加的头头儿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现打字机的效果

元素，并向后端发起 text/event-stream 请求，建立与服务器的连接。随后，我们在前端监听 onmessage 事件，将服务器推送过来的数据流解析成一段段的文本，并逐步添加到上述。后端在接收到用户输入后，将其发送给AI模型进行处理，并将模型生成的文本逐步发送给前端。协议可以实现 chatGpt 打字机的效果，即实时展示AI回复的文本。在上述代码中，我们首先在前端页面中，创建了一个空的。对象，并将URL设置为与AI模型通信的端点。开头，并在每条消息之间添加换行符。元素中，模拟打字机的效果。
复制链接

扫一扫