引言 在ChatGpt火了這麼久，他的那種單字單字返回的格式可能讓很多朋友感到好奇，在之前我用c#寫了一個版本的，同時支持IAsyncEnumerable以及SSE，今天把之前寫的Java版本的也發出來，和大家一起學習，有不對的地方，歡迎各位大佬指正。 Code 我這邊用的是JDK21版本，可以看到 ...
引言
在ChatGpt火了這麼久，他的那種單字單字返回的格式可能讓很多朋友感到好奇，在之前我用c#寫了一個版本的，同時支持IAsyncEnumerable以及SSE，今天把之前寫的Java版本的也發出來，和大家一起學習，有不對的地方，歡迎各位大佬指正。
Code
我這邊用的是JDK21版本，可以看到下麵，我們實現了兩種方式一種是WebFlux實現響應式返回，另外一種就是SSE的標準寫法，有關SSE，大家可以百度去看看他的一些規則，需要設置一些Header，以及返回的數據格式都有特別的講究。第一種，我們需要在Pom.xml裡面引入WebFlux的包，然後才能在代碼使用，
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <dependency>
@RestController @RequestMapping("Hello") public class HelloController { @Autowired private RestTemplate template; public HelloController() { } private String Appid="408035"; private String Appsecret="PgZgD80aWLrQUxlhVD452aJl"; @GetMapping(value = "/GetHello", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<String> GetHello() { return Flux.interval(Duration.ofSeconds(1)) .map(sequence -> "Event " + sequence); } @PreAuthorize() @GetMapping(value = "/GetHellos", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public void GetHellos(HttpServletResponse response) throws Exception { if (response.containsHeader("Content-Type")) { response.setHeader("Content-Type","text/event-stream"); } else { response.setHeader("Content-Type","text/event-stream"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Connection", "keep-alive"); } String data ="id:"+new Random().nextInt() +" \n" + "retry: "+new Random().nextInt(0,100)*30+"\n" + "event: message\n" + "data: "+new Random().nextInt()+"\n\n"; response.setCharacterEncoding("UTF-8"); response.getWriter().write(data); } }
下麵是我們使用WebFlux實現流式傳輸的一種方式。
下麵是使用SSE實現流式傳輸的一種，同時前端代碼如下。
<!DOCTYPE html> <html> <head> <title>SSE Example</title> <script> var eventSource = new EventSource("http://localhost:5203/WeatherForecast/Posta"); eventSource.addEventListener("message", function(event) { var a=document.getElementById("aaa"); a.innerHTML+="<a>"+event.data+"</a><br>" console.log("Received message: " + event.data); }); eventSource.addEventListener("error", function(event) { console.log("Error occurred"); }); </script> </head> <body> <div id='aaa'></div> </body> </html>
結束
以上便是今天的所有內容，使用WebFlux以及原始SSE實現流式傳輸的效果。
