SSE 教程：用事件流实现实时影院排片系统-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE（Server-Sent Events）是一种服务端向客户端推送事件的技术，它允许服务端实时向客户端发送数据，客户端通过监听事件流的方式获取数据。SSE 是一种轻量级的通信协议，与 WebSocket 不同，它只需要使用 HTTP 协议就可以实现实时通信。

为什么要使用 SSE？

SSE 适用于需要实现实时通信的场景，比如实时聊天、实时数据展示等。相比于轮询和长轮询，SSE 更加高效和实时。在使用 SSE 的过程中，客户端只需要向服务端发送一次请求，服务端就可以一直向客户端推送事件流，不需要客户端不断发送请求，减少了网络负担。

如何实现实时影院排片系统？

实时影院排片系统需要实时向客户端推送当前的排片信息。下面我们通过一个简单的示例来演示如何使用 SSE 实现实时影院排片系统。

服务端

首先，我们需要在服务端创建一个 SSE 事件流。在 Node.js 中，可以使用 EventSource 模块来实现：

// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');
const path = require('path');
const EventSource = require('eventsource');

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'index.html');

  if (req.url === '/') {
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Error loading index.html');
        return;
      }

      res.writeHead(200, {
        'Content-Type': 'text/html',
        'Cache-Control': 'no-cache'
      });
      res.end(data);
    });
  } else if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    const eventSource = new EventSource('/stream');

    eventSource.on('message', (event) => {
      res.write(`data: ${event}\n\n`);
    });

    req.on('close', () => {
      eventSource.close();
    });
  }
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们创建了一个 HTTP 服务器，并监听了两个路由：/ 和 /events。当客户端访问 / 路由时，返回一个 HTML 页面，用于显示当前的排片信息。当客户端访问 /events 路由时，创建一个 SSE 事件流，并将事件流发送给客户端。

客户端

接下来，我们需要在客户端监听 SSE 事件流，获取服务端发送的排片信息。在 HTML 页面中，可以使用 EventSource 对象来监听事件流：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>实时影院排片系统</title>
  </head>
  <body>
    <h1>影院排片信息</h1>
    <ul id="movies"></ul>
    <script>
      const moviesList = document.getElementById('movies');

      const eventSource = new EventSource('/events');

      eventSource.onmessage = (event) => {
        const movie = JSON.parse(event.data);

        const movieItem = document.createElement('li');
        movieItem.textContent = `${movie.name} - ${movie.time}`;

        moviesList.appendChild(movieItem);
      };
    </script>
  </body>
</html>

在上面的代码中，我们创建了一个 ul 元素，用于显示当前的排片信息。当服务端发送一个事件时，客户端会通过 eventSource.onmessage 回调函数来接收事件，并将事件的数据添加到 ul 元素中。

数据库

最后，我们需要在数据库中存储排片信息，并在服务端定时向客户端发送最新的排片信息。在本示例中，我们使用 MongoDB 数据库来存储排片信息：

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

const movieSchema = new mongoose.Schema({
  name: String,
  time: String
});

const Movie = mongoose.model('Movie', movieSchema);

mongoose.connect('mongodb://localhost/movies', { useNewUrlParser: true })
  .then(() => {
    console.log('MongoDB connected');
  })
  .catch((error) => {
    console.error(error);
  });

setInterval(() => {
  Movie.find({})
    .then((movies) => {
      movies.forEach((movie) => {
        const event = JSON.stringify(movie);
        eventSource.emit('message', event);
      });
    })
    .catch((error) => {
      console.error(error);
    });
}, 1000);

在上面的代码中，我们定义了一个 Movie 模型，并连接到 MongoDB 数据库。然后，我们使用 setInterval 定时查询数据库中的排片信息，并通过 eventSource.emit 方法向客户端发送最新的排片信息。

总结

SSE 是一种实现实时通信的轻量级技术，可以用于实现实时聊天、实时数据展示等场景。在本教程中，我们通过一个简单的示例演示了如何使用 SSE 实现实时影院排片系统。通过本教程，你可以学习到如何使用 SSE，以及如何将 SSE 应用于实际项目中。

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