【ServerSentEvents】服务端单向消息推送
依赖库：
Springboot 不需要而外支持，WebMVC组件自带的类库
浏览器要检查内核是否支持EventSource库
Springboot搭建SSE服务:
这里封装一个服务Bean, 用于管理SSE的会话，推送消息
package cn.hyite.amerp.common.sse;
import cn.hyite.amerp.common.log.HyiteLogger;
import cn.hyite.amerp.common.log.LogFactory;
import org.springframework.stereotype.Service;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;
/**
* 服务单向消息传递，SeverSentEvents web端自动重连
*
* @author Cloud9
* @version 1.0
* @project amerp-server
* @date 2022年11月10日 10:04
*/
@Service
public class SeverSentEventService {
private static final HyiteLogger logger = LogFactory.getLogger(SeverSentEventService.class);
/**
* SSE客户端管理容器
*/
private static final Map<String, SseEmitter> SESSION_MAP = new ConcurrentHashMap<>();
/**
* 连接超时时限1小时 （客户端不活跃的时长上限？）
*/
private static final Long TIME_OUT = 1000L * 60L * 60L;
/**
* 根据客户端标识创建SSE连接
*
* @param clientId
* @return SseEmitter
* @author Cloud9
* @date 2022/11/10 10:17
*/
public SseEmitter createConnection(String clientId) {
SseEmitter emitter = new SseEmitter(TIME_OUT);
emitter.onTimeout(() -> {
logger.info(" - - - - SSE连接超时 " + clientId + " - - - - ");
SESSION_MAP.remove(clientId);
});
emitter.onCompletion(() -> {
logger.info(" - - - - - SSE会话结束 " + clientId + " - - - - ");
SESSION_MAP.remove(clientId);
});
emitter.onError(exception -> {
logger.error("- - - - - SSE连接异常 " + clientId + " - - - - -", exception);
SESSION_MAP.remove(clientId);
});
SESSION_MAP.put(clientId, emitter);
return emitter;
}
/**
* 根据客户端令牌标识，向目标客户端发送消息
*
* @param clientId
* @param message
* @author Cloud9
* @date 2022/11/10 10:17
*/
public void sendMessageToClient(String clientId, String message) {
SseEmitter sseEmitter = SESSION_MAP.get(clientId);
/* 如果客户端不存在，不执行发送 */
if (Objects.isNull(sseEmitter)) return;
try {
SseEmitter.SseEventBuilder builder = SseEmitter
.event()
.data(message);
sseEmitter.send(builder);
} catch (Exception e) {
logger.error("- - - - Web连接会话中断, ClientId:" + clientId + "已经退出 - - - - ", e);
/* 结束服务端这里的会话, 释放会话资源 */
sseEmitter.complete();
SESSION_MAP.remove(clientId);
}
}
/**
* 给所有客户端发送消息
*
* @param message
* @author Cloud9
* @date 2022/11/10 10:18
*/
public void sendMessageToClient(String message) {
SseEmitter.SseEventBuilder builder = SseEmitter
.event()
.data(message);
for (String clientId : SESSION_MAP.keySet()) {
SseEmitter emitter = SESSION_MAP.get(clientId);
if (Objects.isNull(emitter)) continue;
try {
emitter.send(builder);
} catch (Exception e) {
logger.error("- - - - Web连接会话中断, ClientId:" + emitter + "已经退出 - - - - ", e);
emitter.complete();
SESSION_MAP.remove(clientId);
}
}
}
}
接口和写普通接口有小小区别：
package cn.hyite.amerp.approve.controller;
import cn.hyite.amerp.approve.dto.ApproveDTO;
import cn.hyite.amerp.common.Constant;
import cn.hyite.amerp.common.activiti.ActivitiUtils;
import cn.hyite.amerp.common.activiti.ProcessInstanceQueryDTO;
import cn.hyite.amerp.common.activiti.TaskQueryDTO;
import cn.hyite.amerp.common.annotation.IgnoreLoginCheck;
import cn.hyite.amerp.common.config.mybatis.page.PageResult;
import cn.hyite.amerp.common.dingtalk.DingDingUtils;
import cn.hyite.amerp.common.security.LoginUserContext;
import cn.hyite.amerp.common.security.UserContext;
import cn.hyite.amerp.common.sse.SeverSentEventService;
import cn.hyite.amerp.common.util.PageUtil;
import cn.hyite.amerp.system.dingtalk.todotask.dto.SysDiTodotaskDTO;
import cn.hyite.amerp.system.dingtalk.todotask.service.ISysDiTodotaskService;
import org.activiti.engine.runtime.ProcessInstance;
import org.activiti.engine.task.Task;
import org.activiti.engine.task.TaskQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.CollectionUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
*
* @author cloud9
* @version 1.0
* @project
* @date 2022-09-27
*/
@RestController
@RequestMapping("${api.path}/approve")
public class ApproveController {
@Resource
private SeverSentEventService severSentEventService;
/**
* web连接的SSE目标地址, 保管凭证并返回这个会话资源给web，注意produces属性必须是文本事件流形式
* 凭证可以使用@PathVariable或者Url参数获取
* /approve/sse/message
* @param token
* @return SseEmitter
* @author cloud9
* @date 2022/11/10 09:57
*
*/
@IgnoreLoginCheck
@GetMapping(value = "/sse/message", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter message(@RequestParam("clientToken") String token) {
return severSentEventService.createConnection(token);
}
/**
* 提供给POSTMAN测试调用，方便给web发送消息调试
* /approve/sse/message/send
* @param map
* @author cloud9
* @date 2022/11/10 10:25
*
*/
@IgnoreLoginCheck
@PostMapping("/sse/message/send")
public void send(@RequestBody Map<String, String> map) {
String client = map.get("client");
String txt = map.get("txt");
severSentEventService.sendMessageToClient(client, txt);
}
}
检测SSE服务是否正常，可以直接浏览器访问目标接口:
发送消息，查看是否能够接收：
编写SSE客户端EventSource
使用JS原生EventSource编写：
三个钩子函数：open, error, message
message 数据在event对象的data属性
initialSseConnection() {
const isSupportSse = 'EventSource' in window
if (!isSupportSse) {
console.log('不支持SSE')
return
}
const clientId = 1001 // 假设这是客户端标识令牌，根据实际情况动态设置
const url = `${window._config.default_service}approve/sse/message/?clientToken=${clientId}`
const eventSource = new EventSource(url, { withCredentials: true })
console.log(`url ${eventSource.url}`)
this.sseConnection = eventSource
eventSource.onopen = function(event) {
console.log(`SSE连接建立 ${eventSource.readyState}`)
}
const that = this
eventSource.onmessage = function(event) {
console.log('id: ' + event.lastEventId + ', data: ' + event.data)
++that.unreadDeliverTotal
}
eventSource.onerror = function(error) {
console.log('connection state: ' + eventSource.readyState + ', error: ' + error)
}
},
在创建实例周期函数时调用：
created() {
this.initialSseConnection()
},
在实例销毁时，释放连接资源：
beforeDestroy() {
if (this.sseConnection) this.sseConnection.close()
}
NPM仓库提供了一个封装库：
https://www.npmjs.com/package/vue-sse
默认npm我这下不动，改用cnpm就可以了，按文档CV就可以直接用
这里不赘述了
实践效果：
初始化时，open方法触发：
HTTP接口状态可以查看服务发送的信息：
PostMan调用开放的接口：
Post请求
http://localhost:8091/amerp-server/api/approve/sse/message/send
JsonBody:
{
"client": "1001",
"txt": "{ 'id': 1001, 'msg': 'success qsadasdasd' }"
}
注意客户端不要混用令牌标识，这将导致前一个客户端的连接资源被新的客户端覆盖
SseEmitterBuilder发射器对象API
SseEmitter.SseEventBuilder builder = SseEmitter.event();
/* 目前不知道干嘛用的 */
builder.comment("注释数据...");
/* 设置一个消息ID，要有唯一性意义，客户端可以通过event.lastEventId 获取这个ID */
builder.id(UUID.randomUUID(true).toString());
/* 设置这个发射器的名称，也就是事件的名称，如果设置了，客户端则调用这个名字的处理方法，不会执行onmessage */
builder.name("自定义处理器名");
/* 设置消息数据 */
builder.data(message);
/* 发射器可以不设置上述内容发送消息 */
emitter.send(builder);
参考来源：
https://oomake.com/question/9520150
自定义事件处理案例：
这里我设置的是customHandler
public void sendMessageToClient(String message) {
for (String clientId : SESSION_MAP.keySet()) {
final SseEmitter emitter = SESSION_MAP.get(clientId);
if (Objects.isNull(emitter)) continue;
SseEmitter.SseEventBuilder builder = SseEmitter.event();
builder.comment("注释数据...");
builder.name("customHandler");
builder.id(UUID.randomUUID(true).toString());
builder.data(message);
try {
emitter.send(builder);
} catch (Exception e) {
log.error("- - - - - 发送给客户端：{} 消息失败，异常原因：{}", clientId, e.getMessage());
log.error("- - - - - 客户端已经下线，开始删除会话连接 - - - - - ");
emitter.completeWithError(e);
SESSION_MAP.remove(clientId);
}
}
}
客户端的编写是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE客户端连接测试</title>
</head>
<body>
<script>
const clientId = 'admin-' + new Date().getTime()
const url = `http://127.0.0.1:8080/test/sse/release?clientId=${clientId}`
const connection = new EventSource(url, { withCredentials: true })
connection.onopen = () => {
console.log(`连接已建立，状态: ${connection.readyState}`)
console.log(`连接地址: ${connection.url}`)
}
connection.onerror = event => {
console.log(JSON.stringify(event))
}
connection.onmessage = event => {
console.log(`- - - - 收到服务器消息 - - - - - -`)
console.log(`event.lastEventId -> ${event.lastEventId}`)
console.log(`event.data -> ${event.data}`)
}
customHandler = event => {
debugger
console.log(`- - - - 收到服务器消息(自定义处理器) - - - - - -`)
console.log(`event.lastEventId -> ${event.lastEventId}`)
console.log(`event.data -> ${JSON.stringify(event)}`)
}
connection.addEventListener('customHandler', customHandler, true);
</script>
</body>
</html>
可以检查event对象，类型变为我们对发射器对象设置的name值了
思路场景：
可以通过url参数传入后台设置动态的接收器对象？
一般来说好像用不上
最后测试一个JSON解析：
connection.onmessage = event => {
console.log(`- - - - 收到服务器消息 - - - - - -`)
console.log(`event.lastEventId -> ${event.lastEventId}`)
console.log(`event.data -> ${event.data}`)
// "{ \"a\": 100, \"b\": \"javascript\", \"c\": true }"
const obj = JSON.parse( JSON.parse(event.data))
console.log(typeof obj)
console.log(obj.a)
}
浙公网安备 33010602011771号