Golang 开发SSE流接口，实现ChatGpt逐字打印效果

一直来没时间优化一下我这个gpt，因为最开始弄这个设计成所有数据请求完之后一次性返给前端，这样就需要等gpt处理完所有数据，消耗的时间比较多。所以造成的结果就是请求一次对话需要等待5-15秒不等。实在是影响体验性。

这两天稍微有点时间，就琢磨把gpt接口改成一个字一个字或者一段话一段话输出，在网上查找了一些资料，发现有很多处理方式，比如Websocket，SSE之类的，最常见的还是SSE，因为它没有消耗太多资源，对于这样低配置服务器来说是最好的处理方式了。

好，接下里我直接上代码，查找资料过程略过。

后端：我这里拉Gin服务，其他也行。

SSE流接口处理：（流接口主要是三个地方调整）

Content-Type"："text/event-stream"

Cache-Control"："no-cache"

Connection"："keep-alive"

package main

import (
	"time"

	"github.com/gin-gonic/gin"
)

func main() {
	// 创建路由
	router := gin.Default()

	router.Any("/stream", func(c *gin.Context) {
		c.Header("Content-Type", "text/event-stream")
		c.Header("Cache-Control", "no-cache")
		c.Header("Connection", "keep-alive")

		c.SSEvent("start", "start")
		for i := 0; i < 10; i++ {
			c.Writer.WriteString("data: SSE data\n\n")
			if i == 9 {
				c.SSEvent("end", "end")
			}
			c.Writer.Flush()
			time.Sleep(10 * time.Millisecond)
		}
	})

	// 启动服务
	router.Run(":8080")
}

前端：（我是在nuxt3框架中处理的，你也可以直接在html页面处理一样的方法，直接copy）

<div>
    <ul>
      <li>
        {{ messageStr }}
      </li>
    </ul>
    <div @click="clickHandle">点我</div>
  </div>
</template>

<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
let messageStr = ref("");

let getData = ()=>{
    const sseSource = new window.EventSource('/ccc/stream');
    sseSource.addEventListener('message', (event) => {
      console.log(event.data);
      messageStr.value = messageStr.value+event.data;
    });
    sseSource.addEventListener('end', (event) => {
      sseSource.close();
    });
}
let clickHandle = ()=>{
  getData();
}

好了，前后端已完成，是不是很简单。现在我们来看下测试效果。