传统的数据视图呈现页面，需要页面实时刷新或者主动去请求数据以保证数据的实时性。这种模式会让网页变得笨重且缺乏交互性，而使用 Vue.js 和 Server-Sent Events 技术，可以构建出实时更新数据的数据视图，并进行互动。
简介
Vue.js 是一个极具前途的前端框架，提供了完整的 MVVM 模式、自定义组件和指令等等。Server-Sent Events 则是一种用于浏览器和 Web 服务器之间的高效即时通信通道，它允许服务器向客户端推送消息，而客户端不需要发出明显的请求。
通过 Vue.js 的双向数据绑定和 Server-Sent Event 的实时更新机制，我们可以实现一个实时更新的数据视图，为用户呈现最新状态的数据。
如何实现
在实现过程中，我们需要先在前端页面中使用 Vue.js 创建一个数据视图，然后通过 Server-Sent Events 模块与服务端建立连接，实时接收服务端推送的数据并更新到数据视图中。
准备工作
- 一个支持 SSE 的 Web 服务器（如 Apache、Nginx 或 Node.js）
- Vue.js 框架
- 一个可供 SSE 连接的后端应用
实现过程
- 在 Vue.js 中创建一个数据视图
使用 Vue.js，我们可以创建出一个基于组件的数据视图。组件化架构能帮助我们进行数据和页面结构的分离，代码的可维护性和可读性更高。
例如，我们可以用一个简单的组件来展示数据：
----------
-----
-------- ----------
----
--- ----------- -- --------- --------- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
-
--
---------这个组件主要负责展示用户列表，将数据与页面进行解耦，后续通过 Server-Sent Events 更新数据时会用到。
- 通过 SSE 建立连接
在前端中，我们可以通过 HTML5 新增的 EventSource 对象来建立 SSE 连接。它是一个 JavaScript API，可以很方便地从 Web 服务器接收服务器发送的更新数据。
----- ----------- - --- ------------------------ --------------------- - --------------- - ----- ---- - ----------------------- ---------- - ----------- -------------
这个示例中的 /updates 就是 SSE 服务端点的 URL，数据会通过此 URL 推送至前端页面。在收到消息时，解析 JSON 数据，然后将其更新到我们之前创建好的 Vue 组件中的数据中。
可见，在上面的代码中，我们使用了 bind(this) 来将 this 绑定到我们的组件实例上。由于 this 作用域的问题，this 在回调函数中的指向不是我们的组件实例本身，而是 EventSource 对象。使用 bind() 可以方便我们在 EventSource 对象内使用绑定过的 this。
- 后端 SSE 配置
在服务端中，我们需要支持 SSE 路由，并提供一些 SSE 支持的 HTTP 头：
---------------------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- - - ----------------
------ - - ----- ------- -- - ----- ----- -- - ----- --------- - -
-- - --------
-- ------
---这个示例中，我们用 Express 框架实现了一个 SSE 路由。每秒钟，我们向客户端发送一个消息（数据），数据为包含名字的用户列表。
在 HTTP 头中，我们添加了 SSE 需要的一些特殊字段，例如 Content-Type、Cache-Control 等，它们能够告诉客户端 SSE 的数据流格式和其他关键信息。
示例代码
这里提供了一个完整的示例代码，可以直接复制使用，但是需要提前准备好一个支持 SSE 的后端服务：
--------- -----
------
------
----- ----------------
---------------- ------- ---- ------ --- -----------
-------
------
---- ---------
-----------------------
------
------- ------------------------------------------------------------
--------
-------------------------- -
--------- -
-----
-------- ----------
----
--- ----------- -- --------- --------- -------
-----
------
--
------ -
------ -
------ --
--
--
--------- -
----- ----------- - --- ------------------------
--------------------- - --------------- -
----- ---- - -----------------------
---------- - -----------
-------------
-
---
--- -----
--- ------
---
---------
-------
-------这个示例中，我们使用 Vue.js 创建了一个名为 UserList 的组件，将其用作数据视图。在 created 钩子函数中，我们建立了 SSE 连接，接收服务端推送的数据并更新到组件实例的 users 数据中，最终渲染到页面中。
结论
通过 Vue.js 和 Server-Sent Events 技术的结合，我们可以构建出实时更新数据的数据视图，大大提高了用户体验和交互性。当然，在实际开发中，还需要解决一些数据更新的冲突问题，但是这超出了本文的讨论范畴。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729fe3dddd3a70eb6cee16b