前言
在 Web 开发过程中，实现实时统计功能是一项比较常见的需求。常规的做法是使用 Websocket 技术，但是由于 Websocket 不太好兼容老的浏览器，因此我们可以使用 Server-Sent Events（以下简称 SSE）技术来实现。本文将介绍基于 SSE 技术的投票实时统计系统实现方式。
什么是 SSE？
SSE 技术是一种浏览器和服务器之间单向推送事件的机制，也就是说服务器可以在任意时刻主动向客户端推送数据，而客户端不需要自己发起请求。SSE 通过浏览器内置对象 EventSource 来进行实现。
具体来说，实现 SSE 需要以下几个步骤：
- 服务器返回一个 HTTP 响应，Content-Type 设置为 text/event-stream，表示服务器以 SSE 协议发送数据。
- 服务器发送一个格式为 event: message 的消息，表示这是一个事件类型为 message 的消息。
- 服务器发送一个格式为 data: Hello World\n\n 的消息，表示这是一个包含字符串 "Hello World" 的数据消息。消息最后以两个换行符结束。
- 客户端通过 new EventSource(url) 创建一个 EventSource 对象，url 即为服务器发送 SSE 数据的 URL 。客户端通过 addEventListener 监听 message 事件接收服务器推送的数据。
实现投票实时统计系统
下面我们将通过一个实例来演示如何使用 SSE 实现一个实时统计投票系统。
服务端
我们通过 Node.js 来实现 SSE 服务端。首先我们需要安装 http 模块和 sse-express 模块。
npm install http sse-express
接下来我们编写服务端代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- --- - ---------------------- --- -------- - - -------- -- -------- - -- -- ------ -------- ---------------- ---- - ----- - ------ - - ----------- -- ------- --- ---- - ------------------- - ---- -- ------- --- ---- - ------------------- - -------------------- -- -- --- -- ---------------------------------- - ------------------------ ------------- -- --- -- --------------- ------ -------- ----- ---- - -- ----- --------------- -- - --- ----- --- --- -------------- --------- --- ------------------- -- -- - ------------------- --------- -- ------------------------ ---展开代码
上面的代码中，我们使用 sse-express 模块实现了 SSE 的服务器端部分。我们通过 app.get('/vote/:option', voteHandler) 接口处理投票请求，投票结果保存在 voteData 对象中。在投票处理函数中，首先根据 option 参数确定用户投票的选项，然后将对应的选项数加一。最后通过 req.app.get('sse').send(voteData) 发送 SSE 数据。
我们还需要一个 SSE 接口，用于建立 SSE 的连接。在 app.get('/sse', sse(), function (req, res) {}) 接口中，我们使用 sse-express 模块提供的 sse() 中间件来处理 SSE 请求。在请求处理函数中，我们通过 res.sseSetup() 设置响应头，告诉浏览器返回的是 SSE 数据。然后调用 app.set('sse', res.sse) 将 SSE 对象保存在 App 实例中，以便后面发送 SSE 数据时使用。
客户端
我们使用纯 JavaScript 来实现 SSE 的客户端部分。在前端页面中，我们创建一个 <div> 元素用于显示统计结果。然后通过 new EventSource('/sse') 创建一个 EventSource 对象，建立与服务器的 SSE 连接。在 message 事件处理函数中，我们通过 data 属性获取服务器推送的投票数据，并更新页面中的统计结果。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------- ------ ------ ---- ----------- ------ ------------- ------- ------ ------------ ------ ------ ---- ----------- ------ ---------- ---------- ---------- ------- -------------------------- ---------- ------- -------------------------- ---------- ---- ---------------------- -------- ----- ------------ - -------------------------------------- ----- ------ - --- -------------------- ---------------------------------- -------- ------- - ----- ---- - ----------------------- ---------------------- - - --------- -- ------------------- --------- -- ------------------- -- --- -------- ------------ - -------------- - ------- - ------- ------ --- - --------- ------- -------展开代码
在实现过程中，我们使用了 JSON 格式来传递投票结果。这样做的好处是可以在 SSE 消息中添加更多的字段，如时间戳、用户信息等。前端页面接收到消息后，可以通过 JSON.parse() 方法将字符串转换成对象进行操作。
总结
本文通过一个实例演示了如何使用 SSE 技术实现一个实时统计投票系统。SSE 技术非常适合实时数据推送场景，它比 Websocket 简单易用，也支持跨域请求。同时，SSE 还具有兼容性好、网络负载小等优点。在实际开发中，我们可以根据需求选择合适的技术来实现实时更新功能。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b7a1a7add4f0e0ff02f5a2
