使用 Server-Sent Events 构建实时在线教育应用-JavaScript中文网-JavaScript教程资源分享门户

前言

在互联网时代，教育向着线上化的方向发展，越来越多的学习者选择了网络课堂作为自己学习的途径。在这样的背景下，实时在线教育应用就成为了必不可少的一部分。

但是，在实时在线教育应用中，如何让学习者与讲师之间实现流畅的并发通信，又如何实现实时数据的推送和更新呢？这就需要使用到 Server-Sent Events 技术。

本文将从 Server-Sent Events 的定义、工作原理和实现方式、使用场景等方面介绍如何使用 Server-Sent Events 构建实时在线教育应用。通过阅读本文，你将学习到：

Server-Sent Events 的定义和工作原理；
使用 Server-Sent Events 如何实现实时数据推送和更新；
实时在线教育应用场景下的 Server-Sent Events 编程实战。

什么是 Server-Sent Events

Server-Sent Events，即服务器发送事件，是一种基于 HTTP 的服务器推送技术。它可以让服务器向客户端推送消息，从而实现实时数据更新效果。

与传统的 HTTP 请求响应模式不同，Server-Sent Events 采用长轮询的方式，让客户端向服务器发起一个 HTTP 请求，然后服务器保持连接一段时间，如果有新的数据需要推送，就通过这个连接将数据传输到客户端。

当客户端收到数据时，可以通过 JavaScript 中的 EventSource 对象监听服务器推送的数据，从而实现实时数据的获取和更新。

实现 Server-Sent Events 的方式

要实现 Server-Sent Events，需要遵循一定的协议和格式。下面是一个典型的 Server-Sent Events 消息格式：

:注释
事件名称:事件数据

其中，注释以冒号开头，可选；事件名称以 event: 开头，必须；事件数据以 data: 开头，必须；事件名称和事件数据之间可以插入注释，用冒号开头。

例如，下面是一个通知客户端当前时间的 Server-Sent Events 消息：

:这是一条注释
event: time
data: 2021-09-01 10:00:00

如果需要发送多个事件，在每个事件之间需要发送一个空行：

// javascriptcn.com 代码示例
:这是一条注释

event: time
data: 2021-09-01 10:00:00

:这是另一条注释

event: message
data: Hello, world!

在客户端中，可以通过 JavaScript 中的 EventSource 对象来监听 Server-Sent Events 消息：

const es = new EventSource('/event');
es.onmessage = function(event) {
  console.log(`Received message: ${event.data}`);
};

其中，/event 是服务端的事件源地址；onmessage 事件处理函数可以指定在收到消息时的监听行为。

实现实时数据推送和更新

有了 Server-Sent Events 技术，实现实时数据推送和更新就变得非常简单了。下面以聊天室为例，介绍如何使用 Server-Sent Events 实现实时数据的推送和更新。

客户端部分代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>聊天室</title>
</head>
<body>
  <div id="message-box"></div>
  <form id="message-form">
    <input type="text" id="message-input" placeholder="请输入消息">
    <button type="submit">发送</button>
  </form>
  <script>
    const messageBox = document.getElementById('message-box');
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-input');
    
    // 建立 EventSource 对象
    const es = new EventSource('/chat');

    // 监听服务器传来的消息
    es.onmessage = function(event) {
      const data = JSON.parse(event.data);
      const message = `${data.username}: ${data.message}`;
      messageBox.innerHTML += `<p>${message}</p>`;
    };

    // 监听消息发送事件
    messageForm.addEventListener('submit', function(event) {
      event.preventDefault();
      const message = messageInput.value;
      const username = 'Guest';
      fetch('/chat', {
        method: 'POST',
        body: JSON.stringify({ message, username }),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      messageInput.value = '';
    });
  </script>
</body>
</html>

服务端部分代码：

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

const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/chat') {
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    fs.createReadStream('./chat.html').pipe(res);
  } else if (req.method === 'POST' && req.url === '/chat') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      // 将消息发送给所有客户端
      clients.forEach(client => {
        client.write(`data: ${body}\n\n`);
      });
      res.end('消息已发送');
    });
  }
});

server.listen(3000);

const clients = [];

// 建立长连接
server.on('upgrade', (req, socket) => {
  if (req.headers['upgrade'] === 'websocket') {
    const client = new WebSocket(socket);
    clients.push(client);

    // 监听消息收发事件
    client.on('message', message => {
      message = JSON.parse(message);
      const username = message.username;
      const messageBody = message.message;
      // 将消息发送给所有客户端
      clients.forEach(client => {
        client.send(JSON.stringify({ username, message: messageBody }));
      });
    });
    client.on('close', () => {
      clients.splice(clients.indexOf(client), 1);
    });
  }
});

console.log('Server running at http://localhost:3000/chat');

上面的代码实现了一个简单的聊天室应用，用户在发送消息时，服务端会将该消息推送给所有在线的客户端。

使用场景

Server-Sent Events 可以应用于需要实时数据推送和更新的应用场景中，比如实时在线教育应用、股票报价应用、聊天室应用等。

在实时在线教育应用中，可以通过 Server-Sent Events 技术实现讲师和学生之间的实时交流和数据传输。例如，讲师可以在直播中分享文档和屏幕，学生可以实时提问和回答问题，课件可以实时更新和同步，从而提高学习者的学习效率和互动性。

总结

Server-Sent Events 技术是一种基于 HTTP 的服务器推送技术，可以实现实时数据推送和更新的功能。在本文中，我们介绍了 Server-Sent Events 的定义、工作原理和协议格式，并以聊天室为例，演示了如何使用 Server-Sent Events 实现实时数据的推送和更新。

希望通过本文的介绍，你对 Server-Sent Events 技术有了更深入的了解。在实际开发中，可以根据不同的应用场景，灵活地运用 Server-Sent Events 技术，实现更丰富、更具互动性的在线应用。

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