介绍
HTML5 Server-sent Events（SSE）是一种在 Web 客户端和服务器之间实现实时通信的技术。与 WebSocket 相比，它更加轻量和易于实现。Vue.js 是一款流行的 JavaScript 框架，它提供了响应式的数据绑定、组件化等特性，可以帮助我们构建更加复杂的 Web 应用程序。
本文介绍如何在 Vue.js 应用程序中使用 SSE 技术，实现实时更新数据的效果。
实现 SSE 服务端
在服务器端，我们需要实现一个 SSE 服务，它会不断地向客户端发送数据。下面是一个简单的 Node.js 示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- ------------ --- -- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -- -------------- -------------- -- - ----- ---- - - --------- ------ -------- ------- -- ---------------- ------------------------------ -- ------ ----------------展开代码
上面的代码中，我们使用 Node.js 原生的 http 模块创建了一个 HTTP 服务器。在响应头中，我们设置了 Content-Type 为 text/event-stream，表明返回的是 SSE 数据。然后，我们每隔一秒钟向客户端发送一条数据，格式为 data: {"username": "foo", "message": "hello"}\n\n。
需要注意的是，每条 SSE 数据都以两个换行符结尾。
在 Vue.js 中处理 SSE
现在我们已经有一个 SSE 服务了，下面我们来看看如何在 Vue.js 中处理 SSE 数据。
首先，我们需要在 Vue.js 组件中创建一个 EventSource 实例，它可以订阅 SSE 服务的数据。在组件的 created 钩子函数中创建 EventSource 实例：
-- -------------------- ---- ------- ------ ------- - ----- ---------- --------- - ---------------- - --- ------------------------------------- -- ------ - ------ - -------- -- -- -- -------- - -------------------- - ------------ - ------------------------------- - - --展开代码
上面的代码中，我们在 created 钩子函数中创建了一个 EventSource 实例，它订阅了 http://localhost:8888 这个 SSE 服务的数据。然后，在组件的 data 中定义了一个 message 数据项，它会用来展示 SSE 服务发送过来的数据。最后，我们还定义了一个 handleMessage 方法，它会在每次接收到 SSE 数据时被调用，将数据中的消息解析出来，并更新到 message 数据项中。
最后，我们还需要在组件的 mounted 钩子函数中监听 message 数据项的变化，以便及时更新视图：
-- -------------------- ---- ------- ------ ------- - ----- ---------- --------- - ---------------- - --- ------------------------------------- -------------------------------------------- -------------------- -- --------- - ---------------------- ----- -- - ------------------- --- -- --------------- - ----------------------------------------------- -------------------- -- ------ - ------ - -------- -- -- -- -------- - -------------------- - ------------ - ------------------------------- - - --展开代码
上面的代码中，我们在 created 钩子函数中监听了 SSE 数据的 message 事件，并指定了处理函数为 handleMessage。然后，在 mounted 钩子函数中，我们通过 $watch 方法监听了 message 数据项的变化，并打印出了变化后的值。最后，在组件销毁前，我们需要通过 removeEventListener 方法移除对 SSE 数据的监听。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3ff6b33e578e3b567c858
