在 Vue.js 中使用 Server-sent Events(SSE) 实现实时数据显示

介绍

随着互联网技术的不断发展，实时数据显示成为了越来越多项目的必备功能之一。而 Server-sent Events(SSE) 就是其中一种实现实时数据显示的方式。SSE 是一种基于 HTTP 协议的服务器推送技术，可以在客户端与服务器之间建立长连接，实现服务器向客户端持续推送数据的功能。本文将介绍如何在 Vue.js 中使用 SSE 实现实时数据显示的功能。

准备工作

在使用 SSE 之前，需要确保服务器端支持 SSE 技术。常见的服务器端语言，如 Node.js、PHP、Java 等都支持 SSE。本文以 Node.js 为例，使用 express 框架实现 SSE 服务端推送数据。首先，需要安装 express 和 cors 模块：

npm install express cors --save

然后，在服务器端代码中，实现 SSE 推送数据的逻辑：

// www.javascriptcn.com code example
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  setInterval(() => {
    const data = {
      time: new Date().toLocaleTimeString(),
    };

    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

app.listen(3000, () => {
  console.log('SSE server is running on port 3000');
});

以上代码中，通过设置响应头的 Content-Type 为 text/event-stream，告诉浏览器这是一个 SSE 服务端推送数据的响应。然后，使用 setInterval 定时向客户端推送数据。在推送数据时，需要按照 SSE 协议的格式，使用 data 字段包装数据。

在 Vue.js 中使用 SSE

在客户端使用 SSE 时，需要创建一个 EventSource 对象，指定 SSE 服务端的 URL。然后，通过监听 EventSource 对象的 message 事件，获取服务器端推送的数据。在 Vue.js 中，可以在组件的 mounted 钩子函数中创建 EventSource 对象，并在 destroyed 钩子函数中销毁 EventSource 对象。以下是一个简单的示例：

// www.javascriptcn.com code example
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.time">{{ item.time }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      eventSource: null,
    };
  },

  mounted() {
    this.eventSource = new EventSource('http://localhost:3000/sse');

    this.eventSource.addEventListener('message', (event) => {
      const data = JSON.parse(event.data);
      this.items.push(data);
    });
  },

  destroyed() {
    this.eventSource.close();
  },
};
</script>

以上代码中，创建了一个 items 数组用于存储服务器端推送的数据。在 mounted 钩子函数中，创建了 EventSource 对象，并监听了 message 事件。在 message 事件中，将服务器端推送的数据解析为 JSON 格式，并将其添加到 items 数组中。在 destroyed 钩子函数中，关闭了 EventSource 对象。

结语

本文介绍了如何在 Vue.js 中使用 SSE 实现实时数据显示的功能。通过使用 SSE 技术，可以实现服务器端向客户端持续推送数据的功能，从而实现实时数据显示的效果。在实际开发中，可以根据具体需求，灵活运用 SSE 技术，提高项目的实时性和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3c630a941bf7134720e78