我正在尝试为我的应用程序实现SSE。我的客户端是角度4应用程序,我使用EventSourcePolyfill(以使其适用于IE)。我的服务器端是spring,我使用spring SseEmitter。
我根据客户端的特定用户事件打开一个新的SSE连接。我可以看到请求到达服务器,记录了SSE事件,我也可以看到响应也被创建了。我想以json的身份发送回复。我基本上是尝试发送数据更新,并使用更新的数据创建一个json。但SSE永远不会到达浏览器。它仅转到Eventsource.onerror方法。所以浏览器会继续重试。 *
在Chrome中 - >开发工具 - >网络选项卡,我可以看到SSE请求在挂起状态显示几秒钟,然后更改为取消。
我在这里放了代码片段和错误信息。
Angular Code:
let eventSource = new EventSourcePolyfill('v1/sse/getInfiniteMessages', {
// headers: {
// 'Accept': 'text/event-stream'
// },
heartbeatTimeout:180
});
eventSource.onmessage = (eventResponse => {
console.log("Message from event source is :: " + eventResponse);
console.log("JSON from event source is :: " + eventResponse.data);
});
eventSource.onopen = (a) => {
// Do stuff here
console.log("Eventsource.onopen.. " + JSON.stringify(a));
};
eventSource.onerror = (e) => {
// Do stuff here
console.log("Eventsource.onerror.. Exception is:: " + JSON.stringify(e));
if (e.readyState == eventSource.CLOSED) {
console.log('event source is closed');
eventSource.close();
}
else {
console.log("Not a event source closed error");
}
}
Spring(服务器端)
控制器:
@RequestMapping(method = RequestMethod.GET, value = "/getInfiniteMessages")
public SseEmitter getInfiniteMessages() {
return iSSEService.getInfiniteMessages();
}
服务:
public SseEmitter getInfiniteMessages(String chatRefId) {
logger.info("In SSEService.. getInfiniteMessages method.." );
boolean stopSSE = false;
while (!stopSSE) {
try {
ResponseVo responseVO = new ResponseVo();
responseVO = getData();
// Gson gson = new Gson();
// String sseMessage = gson.toJson(responseVO);
// logger.info("sseMessage to send: " + sseMessage);
// emitter.send(sseMessage , MediaType.APPLICATION_JSON);
emitter.send(responseVO);
Thread.sleep(30000);
//stopSSE = true;
} catch (Exception e) {
e.printStackTrace();
emitter.completeWithError(e);
//return;
}
}
/*for (int i = 0; i < 100; i++) {
try {
emitter.send(i + " - Message", MediaType.TEXT_PLAIN);
Thread.sleep(10);
} catch (Exception e) {
e.printStackTrace();
emitter.completeWithError(e);
//return;
}
}*/
return emitter;
}
注释的代码行是我尝试但没有用的几件事。
注意:在服务代码中,如果我取消注释for循环(运行100次),则sse文本会到达浏览器。但我想发送一个带有数据更新的json。我尝试将对象创建为json,并以文本形式发送,但它没有帮助。
错误:
来自onError方法的console.log:
Not a event source closed error
Eventsource.onerror.. Exception is:: {"type":"error","target":{"listeners":{"data":{}},"url":"/v1/sse/getInfiniteMessages","readyState":0,"withCredentials":false}}
浏览器错误:
core.es5.js:1020 ERROR Error: No activity within 45000 milliseconds. Reconnecting.
at eventsource.js:363
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499)
at ZoneTask.invoke (zone.js:488)
at timer (zone.js:2040)
在这里寻求朋友的帮助,解决我的问题。
答案 0 :(得分:1)
您在回复之前正在使用SseEmitter
,它不会那样工作。由于您不会将发射器引用返回给客户端直到结束,因此客户端不会收到任何内容。
正确的步骤:你必须创建一个SseEmitter
,将其存储在内存中,让控制器方法返回它,然后开始发出项目。
以下快速且可能不完整的示例:
@Controller
public SseController {
private final List<SseEmitter> emitters = new ArrayList<>();
@GetMapping("/listen")
public getEvents() {
SseEmitter emitter = new SseEmitter();
emitters.add(emitter);
emitter.onCompletion(() -> emitters.remove(emitter));
return emitter();
}
@PostMapping("/notify")
public postMessage(String message) {
for (SseEmitter emitter : emitters) {
emitter.send(message);
}
}
}
在此示例中,我们执行GET /listen
订阅事件流,然后我们可以使用POST /notify
发布消息以将消息推送到所有侦听客户端,但您可以从其他客户端发送消息来源,例如你的例子中的循环线程。
关键概念是顺序:创建发射器,存储发射器,返回发射器,然后发送到发射器。