打造专业级ChatGPT风格聊天界面：SpringBoot与Vue实现动态打字机效果，附完整前后端源码

大家好，今天用SpringBoot、vue写了一个仿ChatGPT官网聊天的打字机效果。
所有代码地址:gitee代码地址 ，包含前端和后端，可以直接运行

使用本技术实现的项目：aicnn.cn，欢迎大家体验

如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。

本文主要应用的技术有:SpringBoot、Vue、Reactive、WebFlux、EventSource等，学习和练手的好项目。实现效果如下：

准备好了吗，let’s get it!

采用本文技术实现的前后端项目，点击体验使用：aicnn.cn

前言

Web开发的世界永远充满惊喜，不是吗？每当我们认为自己掌握了所有的技巧和工具，总会有新的技术出现，挑战我们的知识库。今天，我们要探讨的这项技术可能对一些人来说并不陌生，但对于其他人来说，则像是新发现的宝藏。没错，我在说的是Server-Sent Events（SSE）。

你可能会问：“SSE是什么？”简单来说，SSE是一种让服务器实时向客户端发送更新的技术。但别误会，这不是另一个WebSockets。SSE和WebSockets之间的斗争，有点像是电影《星球大战》中的帝国和反抗军的斗争——两者都有其优势和用武之地，但战场完全不同。SSE是为了解决特定类型的实时通讯问题而生，而不是为了取代WebSockets。

在本文中，我们将一探究竟，看看SSE到底是什么魔法，以及如何在Spring Boot应用程序和VUE中轻松实现它。当然，我们也不会忘记前端的小伙伴们——我们将一起探索如何在Vue应用中接收和处理这些实时数据，并一起实现类似ChatGPT官网的聊天打字机效果。准备好了吗？让我们开始这趟探索之旅吧！

---

项目运行

所有代码地址:代码地址 ，包含前端和后端，可以直接运行。

springboot安装依赖，并设置对应的sd-key即可：

api key 的获取方式如下：

• 第一步：打开aicnn.cn
• 第二步：进入设置页面
• 第三步：点击创建新的秘钥
• 第四步：复制密钥值，替换上面代码中的sk-*******,替换后的代码如下所示： .header("Authorization", "Bearer sk-1234567890123456789")

前端项目采用vue3实现，

在项目中,使用如下命令运行项目，即可运行前端:

yarn install
yarn serve

SSE技术概览

什么是Server-Sent Events？

在深入探索Server-Sent Events（SSE）之前，让我们先搞清楚它到底是什么。简单地说，SSE是一种允许服务器主动向客户端发送信息的技术。与传统的请求-响应模式不同，SSE建立了一个单向通道，使得服务器可以实时发送更新。这听起来有点像WebSockets，但SSE的工作方式和用例却大有不同。

SSE与WebSockets的区别

SSE和WebSockets都是实现实时通信的技术，但它们各有千秋。WebSockets提供了一个全双工的通信渠道，允许数据在客户端和服务器之间双向流动。相比之下，SSE是单向的——仅从服务器到客户端。这意味着如果你需要从客户端向服务器发送数据，SSE可能就不是最佳选择了。SSE的优势在于它的简单性和轻量级，特别适用于那些仅需要服务器单向传送数据的场景，比如实时新闻更新、股票行情等。

为什么选择SSE？

现在你可能在想：“为什么我要使用SSE而不是其他技术？”好问题！首先，SSE在浏览器中有很好的支持，这使得它非常容易实现。其次，由于SSE是基于HTTP的，它可以利用现有的HTTP协议特性，如缓存、认证等。这些特性在WebSockets中可能需要额外的处理。最后，SSE的轻量级特性使其成为一种高效的实时数据传输方式，尤其是当你只需要服务器到客户端的单向数据流时。

SSE的应用场景

SSE最适合的是那些需要服务器定期或不定期推送信息到客户端的场景。例如，如果你正在开发一个需要显示实时消息、股票行情或任何形式实时数据的应用，SSE是一个不错的选择。它的轻量级和易用性使其成为这些类型应用的理想选择。

在Spring Boot中实现SSE

设置SSE

在Spring Boot中实现SSE并不复杂。其核心在于使用Spring框架的webflux。使用webflux类能够创建一个持久的连接，使服务器能够向客户端发送多个事件，而无需每次都建立新的连接。

先在pom中引入相关依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

然后需要在Controller中创建一个方法来返回Flux实例。这个方法将被映射到特定的URL，客户端将使用这个URL来接收事件。

package cn.aicnn.chatssespringboot.controller;

import cn.aicnn.chatssespringboot.dto.AIAnswerDTO;
import cn.aicnn.chatssespringboot.service.GptServiceImpl;
import org.springframework.http.MediaType;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;

import javax.annotation.Resource;


@RestController
public class ChatController {
   
   

    //用于流式请求第三方的实现类
    @Resource
    GptServiceImpl gptService;

    //通过stream返回流式数据
    @GetMapping(value = "/completions", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public