Web消息推送之SSE

Web消息推送之SSE
文章目录
一、消息推送简介

 1、消息推送介绍

消息推送(push)通常是指网站的运营工作等人员，通过某种工具对用户当前网页或移动设备APP进行的主动消息推送。推送的场景比较多，比如有人关注我的公众号，这时我就会收到一条推送消息，以此来吸引我点击打开应用，消息推送一般又分为web端消息推送和移动端消息推送。

另外注意主流浏览器只支持6个连接

2、几种方式介绍

详情可以参考：我有 7种实现web实时消息推送的方案，7种
- 短轮询
 
 客户端定期向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它也会向客户端发送一个响应并关闭连接。
- 长轮询
 
 客户端向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它会保持连接直到更新可用。当更新可用时，服务器向客户端发送响应并关闭连接。如果更新在某个超时时间内不可用，服务器会向客户端发送响应并关闭连接。
- iframe流
 
 iframe流就是在页面中插入一个隐藏的</code>标签，通过在<code>src</code>中请求消息数量API接口，由此在服务端和客户端之间创建一条长连接，服务端持续向<code>iframe</code>传输数据 </li><li> SSE (推荐的方式) SSE 是一种在基于浏览器的 Web 应用程序中仅从服务器向客户端发送文本消息的技术。SSE基于 HTTP 协议中的持久连接，具有由 W3C 标准化的网络协议和 EventSource 客户端接口，作为 HTML5 标准套件的一部分 </li><li> MQTT 该协议将消息的发布者（<code>publisher</code>）与订阅者（<code>subscriber</code>）进行分离，因此可以在不可靠的网络环境中，为远程连接的设备提供可靠的消息服务，使用方式与传统的MQ有点类似，可以做智能家居通讯 </li><li> websocket WebSocket 是一种在 Web 应用程序中实现同时、双向、实时通信的技术。WebSocket 基于 HTTP 以外的协议（TCP），因此可能需要额外设置网络基础设施（代理服务器、NAT、防火墙等） </li><li> 三方平台 (例如极光推送) </li></ul> <h1><a name="t4"></a><a id="SSE_39"></a>二、SSE原理介绍</h1> <h2><a name="t5"></a><a id="1SSE_41"></a>1、SSE基础概念</h2> SSE(<code>Server Sent Event</code>)，直译为服务器发送事件，顾名思义，也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求，服务端响应，然后一次请求完毕；但是在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式 <h2><a name="t6"></a><a id="2SSE_45"></a>2、SSE特点</h2> <ul><li> 长连接 </li><li> 服务端可以向客户端推送信息 </li></ul> 从 sse 的特点出发，我们可以大致的判断出它的应用场景，需要轮询获取服务端最新数据的 case 下，多半是可以用它的。比如显示当前网站在线的实时人数，法币汇率显示当前实时汇率，电商大促的实时成交额等等 <h2><a name="t7"></a><a id="3SSEWebSocket_53"></a>3、SSE与WebSocket异同</h2> <blockquote> WebSocket可以参考：<a href="https://blog.csdn.net/lemon_TT/article/details/124172948" title="SpringBoot项目整合WebSocket几种方式">SpringBoot项目整合WebSocket几种方式</a> </blockquote> sse 是单通道，只能服务端向客户端发消息；而 webscoket 是双通道 <div class="table-box"><table><thead><tr><th>sse</th><th>websocket</th></tr></thead><tbody><tr><td>http 协议</td><td>独立的 websocket 协议</td></tr><tr><td>轻量，使用简单</td><td>相对复杂</td></tr><tr><td>默认支持断线重连</td><td>需要自己实现断线重连</td></tr><tr><td>文本传输</td><td>二进制传输</td></tr><tr><td>支持自定义发送的消息类型</td><td>-</td></tr></tbody></table></div> <h1><a name="t8"></a><a id="SSE_67"></a>三、SSE推送实现</h1> <h2><a name="t9"></a><a id="1_69"></a>1、概述</h2> <h3><a name="t10"></a><a id="11_Spring_MVC_71"></a>1.1 使用Spring MVC来发送事件</h3> <ol><li> 使用 <code>@RestController</code> 注解创建一个控制器类（Controller） </li><li> 创建一个方法来创建一个客户端连接，它返回一个 SseEmitter，处理 GET 请求并产生（produces）文本/事件流 (<code>text/event-stream</code>) </li><li> 创建一个新的 SseEmitter, 保存它并从方法中返回 </li><li> 在另一个线程中异步发送事件, 先拿到保存的 SseEmitter 并根据需要多次调用调用<code>SseEmitter.send() </code>方法 </li><li> 完成事件发送, 调用 <code>SseEmitter.complete()</code> 方法 </li><li> 要异常完成发送事件，请调用 <code>SseEmitter.completeWithError()</code> 方法 </li></ol> <h3><a name="t11"></a><a id="12_Spring_Web_Flux_85"></a>1.2 使用Spring Web Flux发送</h3> <blockquote> 可以参考：<a href="https://blog.csdn.net/lemon_TT/article/details/124675141" title="WebFlux入门详解">WebFlux入门详解</a> </blockquote> <ol><li> 使用 <code>@RestController</code> 注解创建一个控制器类（Controller） </li><li> 创建一个方法来创建一个客户端连接，它返回一个 Flux，处理 GET 请求并产生（produces）文本/事件流 (<code>text/event-stream</code>) </li><li> 创建一个新的 Flux对象且在方法中返回它 </li></ol> <h2><a name="t12"></a><a id="2SSE_95"></a>2、SSE使用场景</h2> 在<code>web</code>端消息推送功能中，由于传统的<code>HTTP</code>协议是由客户端主动发起请求，服务端才会响应。基本的<code>ajax</code>轮询技术便是如此。而在<code>SSE</code>中，浏览发送一个请求给服务端，通过响应头中的<code>Content-Type:text/event-stream</code>等向客户端声名这是一个长连接，发送的是流数据，这样客户端就不会关闭连接，一直等待服务端发送数据。 如果服务器返回的数据中包含了事件标识符，浏览器会记录最后一次接收的事件的标识符。如果与服务器的连接中断，当浏览器再次进行连接时，会通过头来声明最后一次接收的事件的标识符。服务器端可以通过浏览器发送的事件标识符来确定从哪个事件来继续连接 <h2><a name="t13"></a><a id="3SSE_101"></a>3、SSE注意事项</h2> <ul><li> 保证数据的完整性 ：客户端在每次接收到消息时，会把消息的<code>id</code> 字段作为内部属性 <code>Last-Event-ID</code>储存起来。<code>SSE</code>默认支持断线重连机制，在连接断开时会触发<code>EventSource</code>的<code>error</code>事件，同时自动重连。再次连接成功时 <code>EventSource</code>会把<code>Last-Event-ID</code>属性作为请求头发送给服务器，这样服务器就可以根据这个<code>Last-Event-ID</code>作出相应的处理。这里需要注意⚠️的是，<code>id</code>字段不是必须的，服务器有可能不会在消息中带上<code>id</code>字段，这样子客户端就不会存在<code>Last-Event-ID</code>这个属性。所以为了保证数据可靠，我们需要在每条消息上带上<code>id</code>字段。 </li><li> <code>SSE</code>不支持<code>IE</code>浏览器 </li></ul> <h2><a name="t14"></a><a id="4_107"></a>4、实战</h2> 后端代码 <pre data-index="0" class="set-code-hide prettyprint"><code class="prism language-java has-numbering" onclick="mdcp.signin(event)" style="position: unset;">@RestController @CrossOrigin @RequestMapping("/sse") public class SseEmitterServer { private static final Logger logger = LoggerFactory.getLogger(SseEmitterServer.class); /** * 当前连接数,不准确，如果用户多次刷新会导致偏少 */ private static AtomicInteger count = new AtomicInteger(0); /** * 使用map对象，便于根据userId来获取对应的SseEmitter，或者放redis里面 */ private static Map<String, SseEmitter> sseEmitterMap = new ConcurrentHashMap<>(); /** * 创建用户连接并返回 SseEmitter * * @param userId 用户ID * @return SseEmitter */ @GetMapping(path = "/subscribe/{userId}", produces = {MediaType.TEXT_EVENT_STREAM_VALUE}) public SseEmitter subscribe(@PathVariable("userId") String userId) throws IOException { // 设置超时时间，0表示不过期。默认30秒，超过时间未完成会抛出异常：AsyncRequestTimeoutException SseEmitter sseEmitter = new SseEmitter(30_000L); // 设置前端的重试时间为15s，如果不加这个发送一下，前端就不会显示连接成功 sseEmitter.send("连接成功"); // 注册回调 sseEmitter.onCompletion(completionCallBack(userId)); sseEmitter.onError(errorCallBack(userId)); sseEmitter.onTimeout(timeoutCallBack(userId)); sseEmitterMap.put(userId, sseEmitter); // 数量+1 count.getAndIncrement(); logger.info("创建新的sse连接，当前用户：{}", userId); return sseEmitter; } /** * 给指定用户发送信息 -- 单播 */ @GetMapping(path = "sendMessage") public void sendMessage(String userId, String message) { if (sseEmitterMap.containsKey(userId)) { try { // sseEmitterMap.get(userId).send(message, MediaType.APPLICATION_JSON); System.out.println(userId + "==" + message); sseEmitterMap.get(userId).send(message); } catch (IOException e) { logger.error("用户[{}]推送异常:{}", userId, e.getMessage()); removeUser(userId); } } } /** * 向多人发布消息 -- 组播 * @param groupId 开头标识 * @param message 消息内容 */ public void groupSendMessage(String groupId, String message) { if (MapUtils.isNotEmpty(sseEmitterMap)) { /*Set<String> ids = sseEmitterMap.keySet().stream().filter(m -> m.startsWith(groupId)).collect(Collectors.toSet()); batchSendMessage(message, ids);*/ sseEmitterMap.forEach((k, v) -> { try { if (k.startsWith(groupId)) { v.send(message, MediaType.APPLICATION_JSON); } } catch (IOException e) { logger.error("用户[{}]推送异常:{}", k, e.getMessage()); removeUser(k); } }); } } /** * 群发所有人 -- 广播 */ public void batchSendMessage(String message) { sseEmitterMap.forEach((k, v) -> { try { v.send(message, MediaType.APPLICATION_JSON); } catch (IOException e) { logger.error("用户[{}]推送异常:{}", k, e.getMessage()); removeUser(k); } }); } /** * 群发消息 */ public void batchSendMessage(String message, Set<String> ids) { ids.forEach(userId -> sendMessage(userId, message)); } /** * 移除用户连接 */ @GetMapping("/close/{userId}") public void removeUser(@PathVariable("userId") String userId) { sseEmitterMap.remove(userId); // 数量-1 count.getAndDecrement(); logger.info("移除用户：{}", userId); } /** * 获取当前连接信息 */ public List<String> getIds() { return new ArrayList<>(sseEmitterMap.keySet()); } /** * 获取当前连接数量 */ @GetMapping("/getUserCount") public int getUserCount() { return count.intValue(); } private Runnable completionCallBack(String userId) { return () -> { logger.info("结束连接：{}", userId); // removeUser(userId); }; } private Runnable timeoutCallBack(String userId) { return () -> { logger.info("连接超时：{}", userId); removeUser(userId); }; } private Consumer<Throwable> errorCallBack(String userId) { return throwable -> { logger.info("连接异常：{}", userId); removeUser(userId); }; } } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li><li style="color: rgb(153, 153, 153);">114</li><li style="color: rgb(153, 153, 153);">115</li><li style="color: rgb(153, 153, 153);">116</li><li style="color: rgb(153, 153, 153);">117</li><li style="color: rgb(153, 153, 153);">118</li><li style="color: rgb(153, 153, 153);">119</li><li style="color: rgb(153, 153, 153);">120</li><li style="color: rgb(153, 153, 153);">121</li><li style="color: rgb(153, 153, 153);">122</li><li style="color: rgb(153, 153, 153);">123</li><li style="color: rgb(153, 153, 153);">124</li><li style="color: rgb(153, 153, 153);">125</li><li style="color: rgb(153, 153, 153);">126</li><li style="color: rgb(153, 153, 153);">127</li><li style="color: rgb(153, 153, 153);">128</li><li style="color: rgb(153, 153, 153);">129</li><li style="color: rgb(153, 153, 153);">130</li><li style="color: rgb(153, 153, 153);">131</li><li style="color: rgb(153, 153, 153);">132</li><li style="color: rgb(153, 153, 153);">133</li><li style="color: rgb(153, 153, 153);">134</li><li style="color: rgb(153, 153, 153);">135</li><li style="color: rgb(153, 153, 153);">136</li><li style="color: rgb(153, 153, 153);">137</li><li style="color: rgb(153, 153, 153);">138</li><li style="color: rgb(153, 153, 153);">139</li><li style="color: rgb(153, 153, 153);">140</li><li style="color: rgb(153, 153, 153);">141</li><li style="color: rgb(153, 153, 153);">142</li><li style="color: rgb(153, 153, 153);">143</li><li style="color: rgb(153, 153, 153);">144</li><li style="color: rgb(153, 153, 153);">145</li><li style="color: rgb(153, 153, 153);">146</li><li style="color: rgb(153, 153, 153);">147</li><li style="color: rgb(153, 153, 153);">148</li></ul></pre> 前端代码 <pre data-index="1" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SseEmitter</title> </head> <body> <button onclick="closeSse()">关闭连接</button> <div id="message"></div> </body> <script> let source = null; // 用时间戳模拟登录用户 const userId = new Date().getTime(); if (window.EventSource) { // 建立连接 source = new EventSource('http://localhost:8080/sse/subscribe/' + userId); setMessageInnerHTML("连接用户=" + userId); /** * 连接一旦建立，就会触发open事件 * 另一种写法：source.onopen = function (event) {} */ source.addEventListener('open', function(e) { setMessageInnerHTML("建立连接。。。"); }, false); /** * 客户端收到服务器发来的数据 * 另一种写法：source.onmessage = function (event) {} */ source.addEventListener('message', function(e) { setMessageInnerHTML(e.data); }); /** * 如果发生通信错误（比如连接中断），就会触发error事件 * 或者： * 另一种写法：source.onerror = function (event) {} */ source.addEventListener('error', function(e) { if (e.readyState === EventSource.CLOSED) { setMessageInnerHTML("连接关闭"); } else if (e.target.readyState === EventSource.CONNECTING) { console.log('Connecting...'); }else { console.log(e); } }, false); } else { setMessageInnerHTML("你的浏览器不支持SSE"); } // 监听窗口关闭事件，主动去关闭sse连接，如果服务端设置永不过期，浏览器关闭后手动清理服务端数据 window.onbeforeunload = function() { closeSse(); }; // 关闭Sse连接 function closeSse() { source.close(); const httpRequest = new XMLHttpRequest(); httpRequest.open('GET', 'http://localhost:8080/sse/close/' + userId, true); httpRequest.send(); console.log("close"); } // 将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + ' '; } </script> </html> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li></ul></pre> <hr> <a href="https://zhuanlan.zhihu.com/p/444011262" title="https://zhuanlan.zhihu.com/p/444011262">https://zhuanlan.zhihu.com/p/444011262</a> <a href="https://blog.csdn.net/m0_50596083/article/details/124600126" title="Server side event (SSE)实现消息推送功能">Server side event (SSE)实现消息推送功能</a> <a href="https://www.cnblogs.com/yihuihui/p/12622729.html" title="[SpringBoot WEB 系列]SSE 服务器发送事件详解">[SpringBoot WEB 系列]SSE 服务器发送事件详解</a> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1195905">DataBinding原理----双向绑定（4）</a> <a href="/Article/Index/614092">【故障公告】1个存储过程拖垮整个数据库</a> <a href="/Article/Index/1511335">大模型交互-超拟人合成</a> <a href="/Article/Index/651029">Kotlin 伴生对象（companion object） VS 包函数</a> <a href="/Article/Index/1673533">淘宝扭蛋机源码解析：功能实现与技术细节</a> <a href="/Article/Index/1092306">【android】当数据库需要更新时我们该怎么办？</a> <a href="/Article/Index/1766343">vue3 学习笔记10 -- 父子传参</a> <a href="/Article/Index/1004278">跟李沐学AI-动手学深度学习1</a> <a href="/Article/Index/1067523">【Chrome 浏览器自带谷歌翻译用不了】</a> <a href="/Article/Index/655351">抓包工具大全整理</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/lemon_TT/article/details/126063422 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

文章目录

一、消息推送简介

1、消息推送介绍

2、几种方式介绍