前言
随着 Web 应用场景的不断扩大，越来越多的需求需要实时性的数据交互，而传统的轮询/长轮询方式在效率和性能上已经无法满足需求，Server-sent Events(SSE) 给我们提供了另一种极其简单且高效的实时数据交互方式。
不过在某些情况下，我们会发现使用 SSE 在 IE 浏览器上推送数据会出现不稳定的问题，本文将详细介绍这个问题的原因以及如何解决。
问题描述
使用 SSE 异步地向客户端推送数据是一种实时数据传递的技术，在大多数现代浏览器中都表现出了很好的性能和稳定性。然而，在 IE11 中我们会发现，SSE 传输不稳定，会经常不可预测地停止传输，这会导致一系列错误和问题，严重影响应用程序的使用。
问题原因
这个问题的根源主要在于 IE 浏览器对 HTTP 长连接的处理上。HTTP 长连接指客户端和服务器之间保持的持久化的连接，即在同一个 HTTP 连接上执行多个请求和响应。基于此，我们可以通过在浏览器中打开一个长连接，使用 SSE 在服务器端推送数据到客户端。 IE11 默认使用 HTTP/1.1 协议，但是在默认状态下，它会关闭 HTTP 长连接以避免地址泄漏、攻击及内存泄漏等问题。在 SSE 的情况下，数据交互过程要求长久保持 HTTP 连接的打开状态，这就需要我们手动开启 IE 浏览器上的长连接。
解决方案
为了解决这个问题，我们需要实现更稳定的 SSE 数据传输，这里我们可以按照下面的步骤来解决这个问题：
- 手动开启 IE 浏览器上的长连接
在 IE 浏览器中使用
XMLHttpRequest构造一个长连接，通过向服务器发送空数据包来保持连接打开状态，代码如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'YOUR_SERVER_URL', true);
xhr.timeout = 0;
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send();- 判断服务器端是否兼容 SSE 协议
在服务器端返回的响应头中添加
Content-Type: text/event-stream，这个响应头是 SSE 传输的关键因素，用来表明服务器端已经兼容 SSE 协议，如下：
header('Content-Type: text/event-stream');- 处理 SSE 事件
在前端中，利用
EventSource对象来处理 SSE 事件。在 IE 浏览器中EventSource对象的工作方式与其他现代浏览器中的相同，代码如下：
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("YOUR_SERVER_URL");
source.onmessage = function(event) {
// 处理 SSE 数据
};
} else {
// 浏览器不支持 SSE
}示例代码
为了更好的说明上述解决方案，这里提供一个服务器端 PHP 示例代码，用于返回 SSE 事件，同时使用了 setInterval() 在每 10 秒钟左右生成一条随机 SSE 数据，如果你想自己测试，只需要将其中的 YOUR_SERVER_URL 部分修改为你自己的地址即可。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('Access-Control-Allow-Origin: *');
echo "retry: 1000\n\n";
$counter = rand(1, 10);
while (1) {
$cur_date = date(DATE_ISO8601);
echo "id: $counter\n";
echo "event: ping\n";
echo "data: Ping at {$cur_date} ($counter)\n\n";
$counter++;
ob_flush();
flush();
sleep(2);
}
?>在客户端使用如下代码来接收 SSE 事件：
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("YOUR_SERVER_URL");
source.onmessage = function(event) {
// 处理 SSE 数据
console.log(event.data);
};
} else {
// 浏览器不支持 SSE
}总结
通过上述方案，我们可以非常简单地解决在 IE 浏览器中使用 SSE 进行实时数据传输时出现的不稳定问题。使用 SSE 技术可以大幅度提高 Web 应用程序的实时数据交互的效率和性能，其简单易懂、易于实现的特点非常适合实时性要求较高的应用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e15a4add4f0e0ff72cce9