经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Spring Boot » 查看文章
【流式传输】使用Spring Boot实现ChatGpt流式传输
来源:cnblogs  作者:四处观察  时间:2023/12/21 9:05:14  对本文有异议

引言

    在ChatGpt火了这么久,他的那种单字单字返回的格式可能让很多朋友感到好奇,在之前我用c#写了一个版本的,同时支持IAsyncEnumerable以及SSE,今天把之前写的Java版本的也发出来,和大家一起学习,有不对的地方,欢迎各位大佬指正。

Code

    我这边用的是JDK21版本,可以看到下面,我们实现了两种方式一种是WebFlux实现响应式返回,另外一种就是SSE的标准写法,有关SSE,大家可以百度去看看他的一些规则,需要设置一些Header,以及返回的数据格式都有特别的讲究。第一种,我们需要在Pom.xml里面引入WebFlux的包,然后才能在代码使用,

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-webflux</artifactId>
  4. </dependency>
  5. <dependency>
  1. @RestController
  2. @RequestMapping("Hello")
  3. public class HelloController {
  4. @Autowired
  5. private RestTemplate template;
  6. public HelloController() {
  7. }
  8. private String Appid="408035";
  9. private String Appsecret="PgZgD80aWLrQUxlhVD452aJl";
  10. @GetMapping(value = "/GetHello", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  11. public Flux<String> GetHello() {
  12. return Flux.interval(Duration.ofSeconds(1))
  13. .map(sequence -> "Event " + sequence);
  14. }
  15. @PreAuthorize()
  16. @GetMapping(value = "/GetHellos", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  17. public void GetHellos(HttpServletResponse response) throws Exception
  18. {
  19. if (response.containsHeader("Content-Type"))
  20. {
  21. response.setHeader("Content-Type","text/event-stream");
  22. }
  23. else
  24. {
  25. response.setHeader("Content-Type","text/event-stream");
  26. response.setHeader("Cache-Control", "no-cache");
  27. response.setHeader("Connection", "keep-alive");
  28. }
  29. String data ="id:"+new Random().nextInt() +" \n" +
  30. "retry: "+new Random().nextInt(0,100)*30+"\n" +
  31. "event: message\n" +
  32. "data: "+new Random().nextInt()+"\n\n";
  33. response.setCharacterEncoding("UTF-8");
  34. response.getWriter().write(data);
  35. }
  36. }

    下面是我们使用WebFlux实现流式传输的一种方式。

     下面是使用SSE实现流式传输的一种,同时前端代码如下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>SSE Example</title>
  5. <script>
  6. var eventSource = new EventSource("http://localhost:5203/WeatherForecast/Posta");
  7. eventSource.addEventListener("message", function(event) {
  8. var a=document.getElementById("aaa");
  9. a.innerHTML+="<a>"+event.data+"</a><br>"
  10. console.log("Received message: " + event.data);
  11. });
  12. eventSource.addEventListener("error", function(event) {
  13. console.log("Error occurred");
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <div id='aaa'></div>
  19. </body>
  20. </html>

 

 结束

    以上便是今天的所有内容,使用WebFlux以及原始SSE实现流式传输的效果。

原文链接:https://www.cnblogs.com/1996-Chinese-Chen/p/17913287.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号