使用 SSE 从服务端推送事件至 Web 客户端-JavaScript中文网-JavaScript教程资源分享门户

介绍

SSE（Server-Sent Events，服务端推送事件）是一种基于 HTTP 的协议，它允许服务端向客户端推送实时的数据流。SSE 优于轮询的方法，因为它消耗更少的带宽和服务器资源，并且能够实现更快的响应时间。

在前端开发中，使用 SSE 可以实现实时更新的功能，例如实时的消息通知、实时的数据变化展示等。本文将介绍如何使用 SSE 实现服务端向 Web 客户端推送实时数据，以及实现一个简单的聊天室应用。

基本原理

使用 SSE 实现服务端推送数据到 Web 客户端的基本原理是，客户端通过向服务端发起 HTTP 连接请求，服务端开启一个长连接，并将数据流通过此连接推送到客户端。

SSE 使用 text/event-stream MIME 类型传输数据，所以服务端需要设置该 MIME 类型。同时，客户端通过监听 message 事件，实现接收到数据流后的一些处理操作。

开发实例

下面是一个简单的服务端推送数据到 Web 客户端的示例代码。这个示例基于 Node.js 平台和 Express 框架实现。

客户端实现

客户端通过监听 message 事件，来接收服务端推送过来的数据。具体实现如下：

const source = new EventSource('/messages');

source.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log(data);
};

服务端实现

服务端代码如下，简要解释一下，首先在客户端发起一个请求，服务端创建一个 SSE 连接，将该连接发送给客户端。然后，服务端向客户端不断地推送数据。

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

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

  res.flushHeaders();

  let id = 0;

  setInterval(() => {
    res.write(`id: ${id}\n`);
    res.write(`data: ${JSON.stringify({ message: 'Hello World!' })}\n\n`);
    id++;
  }, 1000);
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

实现一个聊天室应用

SSE 可以用来实现实时的聊天室应用，下面是一个简单的聊天室应用的示例代码：

客户端实现

客户端与之前相同，监听 message 事件的同时，将服务端推送过来的数据展示到页面上。

const source = new EventSource('/chat');

source.onmessage = function(event) {
  const data = JSON.parse(event.data);
  const messageEl = document.createElement('div');
  messageEl.innerText = `${data.username}: ${data.message}`;
  document.getElementById('messages').appendChild(messageEl);
};

服务端实现

服务端代码包含了两个路由，分别用于接收用户发送的消息和服务端向客户端推送消息。

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

app.post('/message', (req, res) => {
  const data = req.body;

  if (!data.username || !data.message) {
    return res.status(400).json({ error: 'Invalid request' });
  }

  const message = {
    username: data.username,
    message: data.message
  };

  res.status(201).json({ message });
});

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

  res.flushHeaders();

  let id = 0;

  setInterval(() => {
    const message = {
      username: 'Server Bot',
      message: `Hello ${id}!`
    };

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

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

总结

本文介绍了 SSE 的基本原理以及如何使用 SSE 实现服务端向 Web 客户端推送实时数据。同时，通过一个简单的聊天室应用实例，展示了 SSE 应用的实际场景。在实际开发中，可以使用 SSE 实现更多实时数据的展示和交互功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540b4567d4982a6eba3d5ce