Server-Sent Events（SSE）是一种 HTML5 中新增的技术，该技术通过基于 HTTP 的持久连接实现了从服务器向浏览器发送事件的功能，通俗来说就是服务器向客户端推送数据。在移动端场景下，采用 SSE 技术可以优化应用体验，提高消息推送速度，是开发者值得了解和使用的技术之一。本文将介绍 SSE 在移动端场景下的应用方式及注意事项，希望对开发者们有所帮助。
SSE 基本使用方法
开启 SSE 连接
开启 SSE 连接需要创建一个 EventSource 实例，代码如下：
const eventSource = new EventSource('https://example.com/sse')监听服务器发送的事件
我们可以通过监听 eventSource 实例的 message 事件来获取服务器发送的事件数据，代码如下：
eventSource.addEventListener('message', event => {
console.log(event.data)
})关闭 SSE 连接
使用完 SSE 连接后，需要关闭连接以释放系统资源，代码如下：
eventSource.close()
示例代码
下面是一个基本的 SSE 使用示例，该示例通过模拟服务端生成数据，然后将数据推送给客户端。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ----------------
-------
------
--------
----- ----------- - --- ----------------------------------------
--------------------------------------- ----- -- -
-----------------------
--
------------------------------------- ----- -- -
-------------------- ------
--
-- - -- ------
------------- -- -
-------------------
-- ------
---------
-------
-------服务端代码
-- -------------------- ---- -------
----- ---- - ---------------
----------------------- ---- -- -
-- -------- --- ------ -- ------------------ -- ------------------ --- -------------------- -
----------------- --- -----------
------------------ -
--------------- --------------------
---------------- ----------
--
-------------- -- -
----------------- ------------- -------------------
-- -----
--------------- -- -- -
----------------- --- --------
--
------
-
------------------
---------
--------------- -- -- -
------------------- -------- -----------------------
--注意事项
SSE 与 WebSocket 的对比
在使用 SSE 之前，我们需要先对 SSE 和 WebSocket 进行对比分析，找出适合自己的方案。
WebSocket 相比 SSE，不仅可以实现从服务器推送数据给客户端，同时还可以实现双向通信，让客户端和服务器之间实现实时交互功能。但是，在一些情况下，WebSocket 的双向通信功能可能不是必须的，而且 WebSocket 的实现需要在服务器端和客户端都进行一定程度的开发，相比之下 SSE 的实现更加简单，且支持的浏览器更为广泛。
SSE 的兼容性
SSE 与 WebSocket 一样，都是 HTML5 标准中新增的技术。在现代浏览器中，SSE 的支持程度已经非常好。Andriod 和 iOS 的 WebView 也支持 SSE，但需要注意的是，使用 SSE 时，需要设置 Response Headers 中的 "Content-Type" 为 "text/event-stream"，否则一些浏览器和 WebView 将无法正确解析数据。在低版本的浏览器中，通过 polyfill 的方式支持 SSE。
SSE 中的事件处理
在 SSE 中，服务器与客户端通过事件（Event）的方式进行通信，因此，在客户端使用 SSE 时，需要熟悉事件的相关操作。EventSource 实例支持 addEventListener 和 removeEventListener 方法，用于监听和移除事件，代码如下：
eventSource.addEventListener('ping', event => {
console.log('ping event', event.data)
})
// 移除所有名为 ping 的事件监听器
eventSource.removeEventListener('ping')SSE 中的消息发送
在 SSE 中，服务器发送的消息需要结合 Event 字段进行发送，以便客户端正确解析事件类型和事件数据。在实际应用中，通常会对事件类型和事件数据进行格式化处理，以便客户端能够正确处理事件。代码如下：
res.write(`event: ping\r\ndata: ${Date.now()}\n\n`)总结
SSE 技术作为 HTML5 中的重要技术之一，其在移动端场景下的使用也越来越广泛。本文介绍了 SSE 的基本使用方法及注意事项，希望能够对开发者们有所帮助。在使用 SSE 技术时，需要注意服务器和客户端的兼容性，以及正确发送和解析事件数据，做到更好的利用 SSE 技术来优化移动端应用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c20e4968c7c53b074c7a5