macrozheng 2025年01月03日 14:10 江苏
以下文章来源于Java技术指北 ,作者了不起
Java技术指北.
程序员是一个了不起的群体,Java程序员更是了不起,在这里分享程序员的一切,Java的一切,你值得拥有!
Boot+Cloud项目学习:macrozheng.com
Spring框架中可以使用SseEmitter实现服务端向客户端推送消息,今天盘一盘。
SseEmitter简介
SseEmitter是Spring Framework中用于服务器发送事件(Server-Sent Events, SSE)的类。SSE是一种允许服务器主动向客户端推送数据的技术,通常用于实现如实时通知、数据流等功能。其工作原理基于HTTP协议,客户端通过HTTP请求订阅服务器的事件流,服务器则通过SseEmitter对象持续向客户端发送事件。
SseEmitter的核心特性
单向通信:SSE是单向的,只允许服务器向客户端推送数据,客户端不能通过此通道向服务器发送数据。
基于HTTP:SSE使用标准的HTTP协议,因此不需要额外的协议支持,易于实现和使用。
自动重连:如果连接中断,客户端浏览器会自动尝试重新连接服务器。
事件流格式:SSE使用简单的文本格式传输数据,每条消息以data:开头,并以两个换行符\n\n结束
SseEmitter的使用场景
实时数据流:在需要实时数据更新的应用中,如股票交易平台,服务器可以使用SseEmitter向客户端推送最新的股票价格和交易信息。
实时通知:适用于需要向用户发送实时通知的场景,例如在线教育平台的新课程发布或作业提交通知。
聊天应用:在聊天应用中,SseEmitter可以用来实现实时消息推送,提高消息传递的效率。
监控系统:在监控系统中,SseEmitter可以用于实时推送监控数据,如物联网项目中传感器采集的数据,以实时监控设备状态。
SseEmitter的基本用法
创建SseEmitter实例:在控制器中创建一个SseEmitter实例,并将其返回给客户端。
发送事件:通过SseEmitter实例的send方法向客户端发送事件。
处理连接关闭:通过SseEmitter的onCompletion和onTimeout方法处理连接关闭或超时的情况。
通过SseEmitter,开发者可以构建出高效、可靠的实时应用,提升用户体验和系统性能。
下面我们通过一个简单示例演示下
这或许是一个对你有用的开源项目,mall项目是一套基于 SpringBoot3 + Vue 的电商系统(Github标星60K),后端支持多模块和 2024最新微服务架构 ,采用Docker和K8S部署。包括前台商城项目和后台管理系统,能支持完整的订单流程!涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能!
Boot项目:https://github.com/macrozheng/mall
Cloud项目:https://github.com/macrozheng/mall-swarm
视频教程:https://www.macrozheng.com/video/
项目演示:
前端服务
使用Vue CLI创建一个Vue 3项目
安装Vue CLI
npm install -g @vue/cli
创建Vue 3项目
vue create my-vue3-app
启动服务
cd my-vue3-app
npm run serve
创建一个vue文件EventList.vue
获取消息,然后进行等待服务端的消息。
Server-Sent Events
- {{ message.content }}
import { ref, onMounted, onUnmounted } from 'vue';
import { SseClient } from './SseClient';
const messages = ref([]);
const sseClient = new SseClient((event) => {
const data = JSON.parse(event.data);
messages.value.push(data);
});
onMounted(() => {
sseClient.connect();
});
onUnmounted(() => {
sseClient.disconnect();
});
/* Add your styles here */
创建JS文件SseClient
export class SseClient {
constructor(onMessage) {
this.onMessage = onMessage;
this.eventSource = null;
}
connect() {
this.eventSource = new EventSource('http://localhost:8089/events/54321');
this.eventSource.onmessage = (event) => {
this.onMessage(event);
};
this.eventSource.onerror = (error) => {
this.disconnect();
};
}
disconnect() {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
}
}
}
然后再Vue项目入口 APP.vue中引入刚才的Vue文件。
后端服务
创建SpringBoot服务
直接写一个简易的Controller,将SseEmitter 缓存起来,可以直接进行消息发送。
@Controller
public class SseEmitterController {
private static Map
@CrossOrigin(origins = "*")
@GetMapping("/events/{userId}")
public SseEmitter stream(@PathVariable String userId) throws IOException {
sseCache.put(userId,new SseEmitter(10 * 60 * 1000L));
SseEmitter emitter = sseCache.get(userId);
Map
map.put("id", userId);
map.put("content", "连接成功");
emitter.send(map);
return emitter;
}
@GetMapping("/sendMessage/{userId}")
public String sendMessage(@PathVariable String userId,
@RequestParam(name = "message", required = false) String message) throws IOException {
SseEmitter emitter = sseCache.get(userId);
Map
map.put("id", userId);
map.put("content", message);
emitter.send(map);
return "成功";
}
@GetMapping("/close/{userId}")
public String close(@PathVariable String userId
) throws IOException {
SseEmitter emitter = sseCache.get(userId);
emitter.complete();
return "成功";
}
}
前后端启动后联调:
初始化连接成功。
再手动发送消息。
客户端接收消息:
以上是一个简易的服务端主动推送消息给客户端的例子。
Github上标星11K的微服务实战项目mall-swarm,全套 视频教程(2024最新版) 来了!全套教程约26小时,共59期,如果你想学习目前最新的微服务技术栈,同时提高自己微服务项目的开发能力的话,不妨了解下,下面是项目的整体架构图,感兴趣的小伙伴可以点击链接 mall-swarm视频教程 加入学习。
整套 视频教程 的内容还是非常完善的,涵盖Spring Cloud核心组件、微服务项目实战、Kubernetes容器化部署等内容,你也可以点击链接 mall-swarm视频教程 了解更多内容。