WebSocket 之 SSE(Server-Sent Events) 实现-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种基于 TCP 协议的新型网络通信协议，能够在服务端和客户端之间建立实时、双向的通信，并且是一种较为成熟的取代传统短轮训技术的方案。而 SSE(Server-Sent Events) 则是 WebSocket 的一个轻量级替代物，实现了从服务器主动推送信息给客户端的功能，非常适合一些长轮训的场景。

本文将详细介绍 SSE 技术的实现原理、使用方法以及注意事项，旨在帮助前端开发者更好地掌握这一技术。

SSE 的实现原理

SSE 是一种基于 HTTP 协议的服务端推送技术，其工作方式与 Ajax 长轮训类似：客户端通过 HTTP 连接向服务器请求数据，服务器等待有数据时将其以 Event Stream 的形式返回给客户端，客户端在接收到数据后根据预设的逻辑进行处理。

SSE 的核心是服务器端的 EventSource 接口，它能够建立一个到服务器的 HTTP 连接，每当有新的消息到达时就会发送一个事件给客户端，客户端可以通过监听这些事件来接收数据并进行相应的处理。

SSE 的通信过程如下图所示：

客户端通过 HTTP 请求向服务器发出 /events 等 SSE 的 URL 地址；
服务器通过 HTTP 连接响应客户端的请求，返回一个 HTTP 响应头表示对 SSE 支持的信息以及响应正文；
客户端一接收到响应内容，就会开始从服务器端接收数据，并将数据解析为 DOM 事件并由 EventSource 接收；
服务器端检测到有新的数据时，将会封装成一个新的 SSE 策略，并通过 HTTP 将新数据发送到客户端；
客户端接收到 SSE 时，会将 SSE 解析为一个 DOM 事件，再由 EventSource 接到并通过相应的回调函数进行处理。

SSE 的使用方法

SSE 的使用方法非常简单，只需要在客户端使用 EventSource 方法创建一个到指定 URL 的连接即可，代码如下：

// javascriptcn.com 代码示例
var source = new EventSource('server.php');

source.addEventListener('open', function(e) {
  console.log('连接已建立');
}, false);

source.addEventListener('message', function(e) {
  console.log('收到消息: ' + e.data);
}, false);

source.addEventListener('error', function(e) {
  if (e.readyState == EventSource.CLOSED) {
    console.log('连接已关闭');
  } else {
    console.log('发生错误');
  }
}, false);

其中，第一个参数是 SSE 的 URL 地址，而在创建连接时，可以带上一些 HTTP 请求头和查询参数，以完成更加灵活的通信。

服务端的代码也很简单，只需要在设置响应头时，设置 Content-Type 为 text/event-stream，同时按照规范发送消息即可。下面是 PHP 版本的代码示例：

// javascriptcn.com 代码示例
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");

$message = 'Hello World';
echo "data: $message\n\n";
flush();
?>

其中，每一个 SSE 消息都必须以 “data: ” 开头，并以个空行分隔，如果需要添加 ID 和事件类型，可以在消息头部增加相应信息，具体细节可以参考下面的规范介绍。

SSE 的注意事项

虽然 SSE 技术的使用方法很简单，但是在实际使用中还是需要注意一些细节问题，以保证通信的稳定和可靠性。

SSE 不支持跨域访问，必须是同域的 HTTP 请求。如果需要跨域访问，可以使用 CORS 等解决方案。
由于 SSE 是一种长连接，因此需要谨慎控制自身的资源消耗，避免造成服务器端的性能瓶颈。
SSE 通信的数据格式必须遵循规范，每一条消息必须以 “data: ” 开头，并以个空行分隔，同时可以在消息头部添加 ID 和事件类型等信息。
在客户端监听 SSE 事件时，需要注意跨浏览器的兼容性问题，特别是在 IE 等老版本浏览器下的兼容性问题。

总结

SSE 技术是一种可靠、高效的服务端推送方案，相比于长轮训等技术，具有更加优秀的稳定性和效率，对于需要实时交互的 Web 应用和游戏场景，具有非常重要的意义。

本文详细介绍了 SSE 技术的实现原理、使用方法以及注意事项，希望能帮助前端开发者更好地掌握这种技术，并在实际开发中得到更加广泛的运用。

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