使用 SSE 实现实时绘图-JavaScript中文网-JavaScript教程资源分享门户

前言

实时绘图是一个在前端开发中非常重要的应用场景，它可以帮助我们实时监控、分析和展示一些数据。通常情况下，在实时绘图中，我们需要通过 WebSocket 或者长轮询等技术获取服务器端的数据，然后在前端实现实时更新。但是，这些技术都需要建立一个长时间的连接，会增加服务器的压力。而 SSE（Server-Sent Events）则是一种更加轻量级的实现方式，它可以帮助我们在不建立长连接的情况下实现实时绘图。

SSE 简介

SSE 是 HTML5 中的一个新特性，它可以帮助我们实现服务器端推送消息到客户端，而且相比于 WebSocket，SSE 使用起来更加简单。在 SSE 中，服务器会使用一个 HTTP 连接，将数据推送到客户端。客户端可以通过 JavaScript 的 EventSource 对象来监听服务器推送过来的消息。SSE 的优势在于，它使用的是基于 HTTP 的协议，因此可以绕过一些网络环境中的限制，比如防火墙等。同时，SSE 也比 WebSocket 更加轻量级，因为它不需要进行握手等复杂的操作。

实现 SSE 实时绘图

下面，我们将通过一个实例来演示如何使用 SSE 实现实时绘图。

后端实现

在后端，我们需要设置一个路由，用来接收客户端的请求，并将数据实时推送给客户端。下面是一个使用 Node.js 和 Express 框架实现 SSE 的例子：

// javascriptcn.com 代码示例
const express = require('express')
const { PassThrough } = require('stream')

const app = express()

const ssePassThrough = new PassThrough()

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

  ssePassThrough.pipe(res)

  setInterval(() => {
    const data = Math.random() * 10 + 1
    const message = `data: ${data}\n\n`

    ssePassThrough.write(message)
  }, 1000)
})

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
})

在上述代码中，我们创建了一个 Express 应用，并设置一个路由 /sse，用来接收客户端的请求。在路由回调函数中，我们设置了一些响应头，将响应内容的类型设置为 text/event-stream，并且设置 Cache-Control 为 no-cache，Connection 为 keep-alive，用来告诉浏览器不要缓存响应。接着，我们将一个 Node.js 的可读流 ssePassThrough 通过管道的方式传递给响应流 res，这样就可以实现将数据实时推送给客户端。

在这个例子中，我们设置了一个定时器，每 1 秒钟会向客户端推送一个随机数，消息的格式为 data: ${data}\n\n，其中 ${data} 是一个随机数，\n\n 是分隔符。

前端实现

在前端，我们需要使用 JavaScript 的 EventSource 对象来监听服务器推送的消息，并实时更新绘图。下面是前端 HTML 和 JavaScript 的代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>SSE 实时绘图</title>
  <style type="text/css">
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="600" height="400"></canvas>

  <script type="text/javascript">
    const canvas = document.getElementById('canvas')
    const context = canvas.getContext('2d')

    const source = new EventSource('/sse')

    source.onmessage = (event) => {
      const data = parseFloat(event.data)

      context.beginPath()
      context.moveTo(source.lastX || 0, context.canvas.height - (source.lastY || 0))

      const space = context.canvas.width / 100
      const x = (source.lastX || 0) + space
      const y = data / 10 * context.canvas.height

      source.lastX = x
      source.lastY = y

      context.lineTo(x, context.canvas.height - y)
      context.stroke()
    }
  </script>
</body>
</html>

在前端代码中，我们通过 document.getElementById('canvas') 获取到一个 canvas 对象，并通过 canvas.getContext('2d') 获取到一个 2D 的上下文对象。接着，我们使用 new EventSource('/sse') 创建一个 SSE 对象，用来监听服务器推送的消息。

在 source.onmessage 的回调函数中，我们解析服务器向客户端推送的消息，并使用 source.lastX 和 source.lastY 两个变量来记录上一次绘图的坐标位置。接着，我们计算出当前需要绘制的坐标位置，并根据这些坐标绘制一条直线。在绘制过程中，我们需要使用 context.beginPath() 来开始一段新的路径，使用 context.moveTo() 来设定路径起点的坐标，使用 context.lineTo() 来连线，并且使用 context.stroke() 来实际绘图。

总结

本文介绍了如何使用 SSE 实现实时绘图，我们时，首先在后端创建一个 SSE 的路由，实时推送数据给客户端。然后，在前端中使用 EventSource 对象来监听服务器推送的消息，并更新绘图。SSE 的使用相比于 WebSocket 更加轻量级，并且可以绕过一些网络环境中的限制。

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