背景
在现代前端开发中，使用 npm 包管理器是非常常见的操作。而其中一个优秀的 npm 包是 choo-sse，这是一个基于 choo 框架开发的轻量级的服务器端事件源实现。该包可以通过服务器端的 Server-Sent Events 技术向客户端实时推送服务器端数据，从而构建实时数据层。
安装
choo-sse 是一个 npm 包，可以通过 npm 安装：
npm install choo-sse
使用
安装完成后，我们需要新建一个 choo 实例，并在其中引入 choo-sse。具体可参考如下示例代码：
-- -------------------- ---- ------- ----- ---- - --------------- ----- --- - ------------------- ----- --- - ------ -------------- -------------- ------- ----- -- - ------ ------ ------ -- ----------------
在这个示例中，我们创建了一个 choo 实例，然后引入了 choo-sse，最后初始化了一个路由，其中返回了一个简单的字符串。
在这个实例中，我们需要使用 app.use(sse()) 方法对 choo-sse 进行初始化。这个方法在初始化时会新建一个 sse 中间件，每次访问路由时，sse 中间件都会拦截请求并处理一些必要的逻辑，并返回一个相应的响应。
事件源
在使用 choo-sse 的 sse 中间件后，我们需要编写 SSE 事件源来实现收发 SSE 事件。我们可以使用 ctx.sse.send(event, data) 方法来发送事件和数据。
下面是一个简单的 SSE 事件源的示例代码：
-- -------------------- ---- -------
-------------- - ------- -------- ---- -- -
--------------- ----- ----- ---- -- -
----- - ---- - - ---------
----- ---------- - -------------- -- -
------------ - ----- --- ----------------- --
-- -----
----- ------- - -- -- -------------------------
-------------------- --------
------ -------
--
-在这个示例中，我们新建了一个路由 /sse，用来获取 SSE 事件源。在路由中，我们使用 res.sse() 方法获取详情有关 SSE 事件源的信息。其中包括 SSE ID 和 SSE 事件推送函数 send。
在这个事件源中，我们使用了一个定时器，每秒钟向客户端发送一个名为 “ping” 的事件，并在数据中附带时间戳。
为了在客户端连接断开时取消定时器回调和清除相关资源，我们在事件源中订阅了 req.conn.on('close', dispose)，其中 dispose 方法在请求结束后会被自动调用并返回给服务器。在这个方法中，我们调用了 clearInterval(intervalId) 方法，以清除定时器回调。这样，当客户端断开连接时，我们也能够优雅的取消请求，避免资源的浪费。
客户端
在服务器端实现 SSE 事件源后，我们需要对客户端进行处理，以便接收并正确渲染来自服务器端的数据。在客户端实现 SSE 的代码通常可以这样写：
const eventSource = new EventSource('/sse')
eventSource.addEventListener('ping', (event) => {
const data = JSON.parse(event.data)
console.log(`time: ${data.time}`)
})在这个示例中，我们新建了一个 EventSource 对象，并将其指向服务器端返回 SSE 事件源的路由 /sse。然后，我们在事件源上使用了 addEventListener 方法，以监听名为 “ping” 的服务器端事件，并在事件被触发时，从 event 中解析数据并进行相应的处理。在这个例子中，我们仅仅是打印了事件携带的时间戳。
总结
choo-sse 是一个非常优秀的 npm 包，它基于 choo 框架开发，为服务器端实现 SSE 事件源提供了方便而又可靠的解决方案。通过简单的代码调用，我们可以很容易地实现 SSE 的发送和接收。对于一些需要实时推送数据的应用场景，choo-sse 也提供了非常完善的解决方案。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672481e8991b448e39d4