C#基于SSE传递消息给Vue前端实现即时单向通讯

一、简述

通常前端调用后端的API，调用到了，等待执行完，拿到返回的数据，进行渲染，流程就完事了。如果想要即时怎么办？如果你想问什么场景非要即时通讯，那可就很多了，比如在线聊天、实时数据推送、视频会议等等。

本人这里是要实现的流程是，Vue调用C#的API，然后API内新线程调用python执行任务，然后API就给前端返回执行开始的消息，Vue和API就结束了。但是python执行的是十分耗时的任务，需要不断的把中间节点的消息输出到前端，是这样子一个场景。

python把消息不能直接输出到前端，而是要返回给c#，这个通c#的Process接收消息，就可以获得到，然后就是c#如果把消息传递给前端的事情了，所以做了一下调研。

二、技术路线

一共有三种技术路线。

1、websocket

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/progress").withSockJS();}
}@Controller
public class ProgressController {@MessageMapping("/progress")@SendTo("/topic/progress")public ProgressMessage updateProgress(ProgressMessage progressMessage) {// 这里可以是更新进度的逻辑return progressMessage;}
}public class ProgressMessage {private int progress;// 省略构造函数、getter和setter
}

vue参考代码

<template><div><progress :value="progressValue" max="100"></progress></div>
</template><script>
export default {data() {return {progressValue: 0,socket: null};},created() {this.socket = new SockJS('/progress');let stompClient = Stomp.over(this.socket);stompClient.connect({}, frame => {stompClient.subscribe('/topic/progress', progressData => {let progress = JSON.parse(progressData.body).progress;this.progressValue = progress;});});},beforeDestroy() {this.socket.close();}
};
</script>

2、长轮询

长轮询就特别简单，前端搞个定时器，不断的调用接口，这种方法适合不那么即时的，否则量大了，就是麻烦事。

@RestController
public class TaskController {@GetMapping("/task/progress/{taskId}")public int getProgress(@PathVariable String taskId) {// 查询任务进度int progress = taskService.getProgress(taskId);return progress;}
}

vue参考代码

export default {data() {return {progress: 0,taskId: '123' // 替换为实际任务ID};},mounted() {this.getProgress();},methods: {getProgress() {this.$http.get(`/task/progress/${this.taskId}`).then(response => {this.progress = response.data;// 继续轮询setTimeout(this.getProgress, 1000); });}}
}

3、Server-Sent Events(SSE)

SSE 维护一个开放的 HTTP/1.1 连接，SSE请求将保持打开状态，直到客户端或服务器决定结束它，并且只是将新信息简单地写入缓冲区。

C#API参考代码。

[HttpGet("{id}")]
public async Task PushMessage(int id)
{Response.Headers["Content-Type"] = "text/event-stream";Response.Headers["Cache-Control"] = "no-cache";Response.Headers["Connection"] = "keep-alive";Response.Headers["Access-Control-Allow-Origin"] = "*"; // 允许跨域try{await Response.WriteAsync($"data: 服务器已经连接\r\r");await Response.Body.FlushAsync();await Task.Delay(1000);}catch (Exception ex){System.Console.WriteLine("异常："+ex.ToString());}finally{System.Console.WriteLine("客户端断开");}
}

vue参考代码

mounted() {//后面跟的this.data.fid，是我需要的，如果不需要可以去掉，并修改c#的接口this.source = new EventSource('http://你的接口地址/PushMessage/' + this.data.fid);this.source.onmessage = (event) => {if (event.data === '服务器已经连接'){this.connection = false}else{this.pythonLog += '<br/>'this.pythonLog += event.data}// const data = JSON.parse(event.data);// console.log(event.data)// this.events.push({ id: Date.now(), data: data });}this.source.onerror = (error) => {console.error('SSE error:', error)}},