wiki-files/wg-basic/业务功能/sse.md

title	description	published	date	tags	editor	dateCreated
SSE	服务端事件	true	2021-11-01T08:40:22.257Z	wg-basic	markdown	2021-11-01T08:40:00.487Z

对比WebSocket

WebSocet是双通道的，即可以向服务器发送数据，也可以接收服务器数据 ServerSendEvent是单通道的，只能接收服务器数据（服务器主动推送）

Controller

方式1： 利用前端页面的重连机制，sse页面会自动重连(类似ajax的定时连接，意义不大)

@RequestMapping(value = "sse", produces = "text/event-stream;charset=UTF-8")
@ResponseBody
public String push() {
	return "data:message\n\n";
}

方式2： 服务端主动推送，这里用循环模拟了业务处理

@RequestMapping(value = "sse")
@ResponseBody
public void push(HttpServletRequest request, HttpServletResponse response) {
    response.setContentType("text/event-stream");
    response.setCharacterEncoding(ISystemConstant.CHARSET_UTF8);
    try {
        PrintWriter writer = response.getWriter();
        for (int i = 0; i < 10; i++) {
            Thread.sleep(1000);
            writer.write("data:index:" + i + "\n\n");
            writer.flush();
        }
    } catch (InterruptedException | IOException e) {
        e.printStackTrace();
    }
}

页面

IE不支持EventSource，可以使用WebSocket代替 {.is-warning}

// 判断是否支持
if ('EventSource' in window) {
  var source = new EventSource(top.restAjax.path('route/teamtype/sse', []));
  source.addEventListener('message', function(e) {
    console.log(e.data);
  });
  source.addEventListener('open', function(e) {
    console.log('open');
  }, false);
  // 响应finish事件，主动关闭EventSource
  source.addEventListener('finish', function(e) {
    console.log('finish');
    source.close();
  }, false);
  // 异常
  source.addEventListener('error', function(e) {
    console.log('error', e);
    if (e.readyState == EventSource.CLOSED) {
      console.log("连接关闭");
    }
  }, false);
}