WebSocket 低版本浏览器兼容方案

在不支持 WebSocket 的旧浏览器中实现实时通信的替代方案

问题

如何在不支持 WebSocket 的低版本浏览器中实现实时通信功能？

解答

针对不支持 WebSocket 的旧浏览器，可以采用以下降级方案：

1. Adobe Flash Socket

利用 Flash 的 Socket 功能实现实时通信。需要用户安装 Flash 插件。

// 检测 Flash 支持
function hasFlash() {
  try {
    return Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
  } catch(e) {
    return navigator.mimeTypes['application/x-shockwave-flash'] !== undefined;
  }
}

2. ActiveX HTMLFile (IE)

IE 浏览器专用方案，通过 ActiveX 控件创建隐藏的 iframe 实现长连接。

// IE 专用
if (window.ActiveXObject) {
  var htmlfile = new ActiveXObject('htmlfile');
  htmlfile.open();
  htmlfile.write('<html><body></body></html>');
  htmlfile.close();
}

3. 基于 multipart 编码的 XHR

服务器持续发送 multipart 响应，浏览器逐步接收数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/stream', true);
xhr.onprogress = function() {
  // 处理接收到的数据片段
  console.log(xhr.responseText);
};
xhr.send();

4. 基于长轮询的 XHR

客户端发起请求后，服务器保持连接直到有新数据才返回，客户端收到响应后立即发起下一次请求。

function longPolling() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/poll', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 处理数据
      console.log(xhr.responseText);
      // 立即发起下一次请求
      longPolling();
    }
  };
  xhr.send();
}

关键点

Flash Socket 需要插件支持，已逐渐被淘汰
ActiveX HTMLFile 仅适用于 IE 浏览器
multipart XHR 和长轮询是较通用的降级方案
建议使用成熟的库（如 Socket.IO）自动处理兼容性
现代开发中应优先使用原生 WebSocket，仅在必要时降级