随着现代 Web 应用程序的普及，越来越多的应用程序需要实现实时的数据更新和通讯。传统的轮询技术和长轮询技术在一定程度上可以实现这一点，但是它们都存在一些问题，比如性能不佳、推送延迟大等。在这篇文章中，我们将介绍一种更为高效、低延迟的实时通讯方式：Server-Sent-Events（SSE）。并且我们将使用 Vue.js 作为前端框架，实现一个实时 Web 应用程序。
什么是 Server-Sent-Events
Server-Sent-Events（SSE）是一种基于 HTTP 的实时通讯协议。与 WebSocket 不同，SSE 只使用 HTTP 协议，因此它不需要建立一个全双工通讯通道，而是将通讯视为一个单向的从服务器到客户端的数据流。
使用 SSE，服务器可以向客户端推送实时数据，并且客户端可以在不刷新页面的情况下接收这些数据。客户端和服务器之间的通讯使用 HTTP 协议，因此它的可靠性和兼容性都非常好。SSE 还支持服务端发送事件 ID 和事件重试机制等高级特性。
SSE 使用 EventSource 对象来与服务器进行通讯。在 Vue.js 中，我们可以使用 VueResource 插件提供的 this.$http 对象来创建一个 EventSource 对象，如下所示：
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(e) {
console.log(e.data);
};当服务器向 /sse 发送新事件时，onmessage 方法会被调用。消息的内容存储在 data 属性中。
使用 Vue.js 来管理实时数据
在 Web 应用程序中，通常有一个中心化的数据源，负责存储和管理数据。在我们的示例应用程序中，我们将使用 Vue.js 来管理实时数据，并在数据变化时自动更新视图。
首先，我们在 Vue.js 组件中创建一个空数组，用于存储从服务器端收到的实时数据：
-- -------------------- ---- -------
--- -----
--- -------
----- -
------- --
--
--------- -
----- ----------- - --- --------------------
--------------------- - - -- -
-------------------------------------
--
-
---在每次收到新数据时，我们将其存储到 events 数组中。由于 Vue.js 声明式渲染的特性，当 events 数组发生变化时，视图会自动更新。
在 Vue.js 的单文件组件中，我们可以将不同功能的代码划分到不同的组件中，以使代码更加易于维护。
组件化的实时 Web 应用程序
在我们的示例应用程序中，我们将创建两个组件：一个负责显示实时数据，另一个负责发送实时数据。
第一个组件是一个简单的列表，显示实时数据。我们通过 v-for 指令将 events 数组中的元素渲染到页面上，如下所示：
-- -------------------- ---- -------
----------
-----
--------------
----
--- ------------ -- ------- ----------------
---------- ----------- ---------------
-- ------------- --
-----
-----
------
-----------
--------
------ ------- -
------ ----------
--
---------第二个组件是一个表单，用于发送实时数据。当用户提交表单时，我们通过 this.$http.post 方法将数据发送到服务器端，如下所示：
-- -------------------- ---- -------
----------
-----
----------------
----- -----------------------------
-----
------ -----------------------
------ ------------------------ ----------- ------------ -----------
------
-----
------ -------------------------
--------- -------------------------- -------------- ------------------------
------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- -
------ ---
-------- --
-
--
--
-------- -
------------ -
-------------------------- ---------------
------------------- - ---
--------------------- - ---
-
-
--
---------通过以上两个组件的组合，我们就可以构建一个完整的实时 Web 应用程序了。当用户提交新数据时，数据会被推到客户端，并且在页面上实时显示出来。
总结
本文介绍了一种基于 Server-Sent-Events 的实时通讯方式，并且使用 Vue.js 框架实现了一个实时 Web 应用程序。相比传统的轮询和长轮询技术，SSE 可以实现更为高效、低延迟的实时数据推送，并且具有更好的兼容性和可靠性。
Vue.js 的声明式渲染特性和组件化机制使得我们能够非常方便地构建复杂的 Web 应用程序。使用 Vue.js 和 SSE 结合可以使我们的 Web 应用程序更加高效、可靠、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f831695b1f8cacd710e7c