nodejs 如何支持打字机效果？

Question

想用 nodeJs 做个 http 代理，

现在的问题是：响应还是在最后才返回到浏览器，而不是当收到数据时就返回

  const express = require('express')
  const compression  = require ('compression')
  const {
    createProxyMiddleware
  } = require('http-proxy-middleware')
  const app = express()
  app.use(compression())
  const port = 9000

  app.use('/', createProxyMiddleware({
    // secure: true,
    target: 'https://api.openai.com',
    changeOrigin: true,
    selfHandleResponse: true,
    onProxyRes: function (proxyRes, req, res) {
      try {
        res.setHeader('Access-Control-Allow-Origin', '*')
        res.setHeader('Content-type', 'text/event-stream')
        res.setHeader('Cache-Control', 'no-cache')
        res.setHeader('Connection', 'keep-alive')

        // 接收反向代理响应并将其转发给客户端
        proxyRes.on('data', (chunk) => {
          res.write(chunk)
          res.flush()
        })

        proxyRes.on('end', (chunk) => {
          res.end()
        })

      } catch (err) {
        console.log(err)
      }
    }
  }))

  app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
  })

Answer 1

构建SSE服务，转发一下数据流，可以参考一下 https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

Answer 2

• ChatGPT 的接口是 SSE
• 使用 nodejs 做代理需要每一段数据都进行转发，而不是所有的数据到齐以后再转发
• 或者可以通过前端的方式实现（CSS动画？JS动画？）

Answer 3

根据您提供的信息，我看不出具体是什么原因导致代理后不支持打字机效果。但是可以尝试以下方案：

禁用onProxyRes选项：您的代理代码中使用了onProxyRes选项，这可能会修改响应头，从而导致响应数据格式发生变化。如果没有必要修改响应头，建议尝试禁用onProxyRes选项，看看是否能够解决问题。

使用请求拦截器和响应拦截器：在Vue.js项目中，您可以使用axios库发送HTTP请求。您可以通过设置axios的请求拦截器和响应拦截器，对请求和响应进行处理。在拦截器中可以检查请求和响应数据格式，或者修改响应头等信息。

了解打字机效果的实现原理：如果您对打字机效果的实现原理不太熟悉，可以花一些时间了解一下。如果您知道打字机效果的实现原理，就可以更好地定位问题。

希望这些方案可以帮助您解决问题。