From e573209c2c22d7380daf6236765c04c850a78189 Mon Sep 17 00:00:00 2001
From: Administrator <450292408@qq.com>
Date: Mon, 1 Nov 2021 08:40:02 +0000
Subject: [PATCH] =?UTF-8?q?docs:=20create=20wg-basic/=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD/sse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wg-basic/业务功能/sse.md | 76 ++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 wg-basic/业务功能/sse.md

diff --git a/wg-basic/业务功能/sse.md b/wg-basic/业务功能/sse.md
new file mode 100644
index 0000000..4740bf1
--- /dev/null
+++ b/wg-basic/业务功能/sse.md
@@ -0,0 +1,76 @@
+---
+title: SSE
+description: 服务端事件
+published: true
+date: 2021-11-01T08:40:00.487Z
+tags: wg-basic
+editor: markdown
+dateCreated: 2021-11-01T08:40:00.487Z
+---
+
+# 对比WebSocket
+
+WebSocet是双通道的，即可以向服务器发送数据，也可以接收服务器数据
+ServerSendEvent是单通道的，只能接收服务器数据（服务器主动推送）
+
+# Controller
+
+方式1：
+利用前端页面的重连机制，sse页面会自动重连(类似ajax的定时连接，意义不大)
+```java
+@RequestMapping(value = "sse", produces = "text/event-stream;charset=UTF-8")
+@ResponseBody
+public String push() {
+	return "data:message\n\n";
+}
+```
+
+方式2：
+服务端主动推送，这里用循环模拟了业务处理
+```java
+@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();
+    }
+}
+```
+
+# 页面
+```javascript
+// 判断是否支持
+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);
+}
+```
+
+> IE不支持EventSource，可以使用WebSocket代替
+{.is-warning}