SSE 数据传输过程详解-JavaScript中文网-JavaScript教程资源分享门户

前言

现代 Web 应用程序需要与服务器进行持续的、实时的数据通信。Server-Sent Events (SSE) 就是一种用于从服务器向客户端发送实时事件的技术。SSE 可以在不需要手动轮询的情况下，持续地从服务器向客户端发送数据，从而极大地降低了网络负载和服务器负载。本文将深入探讨 SSE 的内部工作原理，以及如何使用 SSE 在 Web 应用程序中进行实时数据传输。

SSE 的工作原理

SSE 的基本概念

SSE 是基于 HTTP 协议的一种实时数据传输技术。通过 SSE，服务器可以向客户端发送多个事件流（Event Stream），每个事件流都是包含多个事件的序列。客户端在接收到事件流后，可以对事件进行处理，以实现实时数据的更新。

SSE 的数据格式

SSE 传输的数据格式是纯文本，每个事件都是一个以“data:”开头的文本行，以“\n\n”（两个换行符）结尾。例如，下面是一个数据格式的示例：

data: hello world

\n\n

SSE 的客户端 API

客户端可以使用浏览器提供的 JavaScript API 来接收 SSE 事件流。这些 API 主要有以下几个方法：

EventSource()：创建一个新的事件源对象，并与服务器建立连接。
onopen：在连接建立后触发该事件。
onmessage：在接收到事件流中的消息时触发该事件。消息内容存储在事件对象的 data 属性中。
onerror：在连接或数据接收发生错误时触发该事件。

SSE 的服务器实现

服务器需要提供一个 HTTP 接口，用于客户端与 SSE 事件源建立连接。服务器向客户端发送的每个事件都必须按照 SSE 格式进行格式化，以便客户端能够正确地解析和处理。

SSE 的事件流

SSE 事件流可以包含多个事件，每个事件都是一个以“data:”开始的文本行。SSE 事件流的格式如下：

event: <event_name>
id: <event_id>
data: <event_data>
retry: <retry_time>

\n\n

其中，<event_name> 表示事件名称，<event_id> 表示事件 id，<event_data> 表示事件数据，<retry_time> 表示重新连接之前的等待时间（单位为毫秒）。这些属性都是可选的，可以根据需要省略其中的某些属性。

SSE 的客户端连接

客户端使用 EventSource() 方法与服务器建立 SSE 连接。连接的 URL 必须是一个普通的 HTTP 或 HTTPS URL，不能使用 WebSocket 或其它协议。例如：

let eventSource = new EventSource("http://example.com/sse");

在连接建立之后，可以通过 onmessage 和 onerror 事件处理程序来接收和处理 SSE 事件。例如：

eventSource.onmessage = function(event) {
  console.log("Received message: " + event.data);
};

eventSource.onerror = function(event) {
  console.error("Error: " + event);
};

SSE 的应用范例

一个简单的 SSE 服务器示例

下面是一个使用 Node.js 实现 SSE 服务器的简单示例代码：

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

const port = 3000;

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    let data = new Date().toLocaleTimeString();
  
    res.write(`data: ${data}\n\n`);
  }, 1000);
});

server.listen(port, () => {
  console.log(`SSE server is running on port ${port}`);
});

该服务器每隔一秒发送一次当前的时间字符串，用于模拟实时数据的传输。

一个基于 SSE 的实时聊天室

下面是一个基于 SSE 技术实现的简单的实时聊天室应用程序的 JavaScript 代码：

// javascriptcn.com 代码示例
const chatBox = document.getElementById('chat-box');
const inputBox = document.getElementById('input-box');
const sendButton = document.getElementById('send-button');

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

eventSource.onopen = function(event) {
  console.log('Connection opened');
};

eventSource.onmessage = function(event) {
  let message = JSON.parse(event.data);

  let li = document.createElement('li');
  li.innerText = `${message.username}: ${message.text}`;
  
  chatBox.appendChild(li);
};

sendButton.addEventListener('click', function() {
  let message = {
    username: 'user',
    text: inputBox.value.trim()
  };

  inputBox.value = '';

  fetch('/message', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(message)
  });
});

这段代码实现了一个实时聊天室应用程序，当用户输入聊天信息并点击发送按钮时，应用程序将该信息发送到服务器，并将该信息添加到聊天记录中。

服务器具体实现略。如果有需要，可以将接收到的聊天信息广播给所有连接的客户端，实现实时聊天的功能。

总结

本文介绍了 SSE 技术的工作原理以及实现方法，以及如何使用 SSE 实现实时数据传输。SSE 简单易用，且不需要手动轮询，可以大大降低服务器的负载，提高应用程序的性能。SSE 在实现 Web 应用程序中的实时数据传输时具有广泛的应用前景。

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