浅析CORS、SSE 和 WebSockets

近期在重新看《JavaScript高级程序设计》记录记录每天新看的东西，做个小总结。

CORS

通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下 XHR 对象只能访问与包含它的页面位于同一域中的资源。这种安全策略可以预防某些恶意行为。

CORS(Cross-Origin Resource Sharing，跨源资源共享)是 W3C 的一个工作草案，定义了必须访问跨域资源时，浏览器与服务器之前应该如何沟通（使用自定义的 HTTP 头部让浏览器和服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败）。

简单的使用 GET 或 POST 发送请求时，给请求添加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头来决定是否给予响应。

如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息(如果是公共资源，可以回发'*')。

请求和响应都不包含 cookie 信息。

CORS的实现：

• IE
  XDR(XDomainRequest)对象。
  与XHR类似但具有以下区别：

  • Cookie 不能随请求发送，也不能随响应返回

  • 不能访问响应头部信息

  • 只能设置请求头部信息中的 Content-Type 字段，用来表示发送数据的格式（POST数据的时候）

  • 只支持 GET 和 POST 请求

  • 只能通过 load 事件监听请求得到响应（XHR可以监听 readystatechange 事件和 readyState 确定）

  • 只能创建异步的CORS请求

  • 不能访问 status，statusText 属性

    var xdr = new XDomainRequest();
    xdr.onload = function() {
      alert(xdr.responseText);    // 响应信息保存在 responseText 属性中
    }
    // xdr 只能创建 异步的请求，也没有办法创建同步请求
    xdr.open('get', 'http://www.some-other.com/index.php');
    xdr.send(null);
    

• 其他现代浏览器
  FireFox 3.5+、Safari 4+、Chrome、IOS 版 Safari 和 Android 平台中的 WebKit 都是通过 XMLHttpRequest 对象实现了对 CORS 的原生支持。

  当尝试打开来自不同源的资源时，无需额外代码，只需将 open 方法中传入的 URL 设置为绝对 URL 即可。

  用于实现 CORS 的 XHR 对象和完成 Ajax 的 XHR 对象对比的一些限制:

  • 不能使用 setRequestHeader() 设置自定义头部
  • 不能发送和接受 cookie
  • 调用 getAllResponseHeaders() 方法总是返回空字符串

  由于无论是同源请求还是跨域请求都使用相同的接口，因此对于本地资源，最好使用相对 URL，在访问远程资源时再使用绝对 URL。这样就能消除歧义，避免出现限制访问头部或本地 cookie 信息等问题。

• 跨浏览器 CORS
  即使浏览器对 CORS 的支持程度并不都一样，但所有浏览器都支持简单的（非Preflight和不带凭据的）请求，因此有必要实现一个跨浏览器的方法。

  检测 XHR 是否支持 CORS 的最简单方式，就是检查是否存在 withCredentials 属性，在结合检测 XDomainRequest 对象是否存在，就可以兼顾所有浏览器了。

  function createCORSRequest(method, url) { 
    var xhr = new XMLHttpRequest(); 
    if('withCredentials' in xhr) { 
      // XHR 支持 CORS 
      xhr.open(method, url, true); 
    } 
    else if ( typeof XDomainRequest != 'undefined') { 
      // IE 通过 XDR 支持 CORS 
      xhr = new XDomainRequest(); 
      xhr.open(method, url); 
    } else { 
      // 不支持直接返回 null 
      xhr = null; 
    } 
    return xhr;
  }
  

---

SSE

SSE 是围绕只读 Comet 交互推出的 API。
SSE API 用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。
服务端响应的 MIME 类型必须是 text/event-stream。
SSE 支持短轮询、长轮询和 HTTP 流，而且能在断开连接时自动确定何时重新连接。

var source = new EventSource('myevents.php');
souce.onmessage = function(event) {
    var data = event.data;
    // process data;
}

SSE 实例对象具有 readyState 属性。

• 0：正在连接到服务器
• 1：打开了连接
• 2：表示关闭了连接

关闭一个 EventSource 对象通过调用 close() 方法，要求强制断开连接并且不再重新连接。

SSE 服务端发送的数据 MIME 头必须是 text/event-stream。响应的格式是纯文本，且带有 data:前缀。

Web Sockets

Web Sockets 用于建立一个单独的持久连接上提供全双工、双向通行。

使用 Web Sockets 必须使用对应的协议 http:// => ws://、https:// => wss://
使用自定义协议的好处是数据量小，不必担心 HTTP 那样字节级的开销。

HTTP => Web Sockets:
在 JavaScript 中创建了 Web Socket 后，会有一个 HTTP 请求发送到服务器以发起连接。客户端在收到服务器响应后，建立的连接会使用 HTTP升级 从 HTTP协议交换为 Web Socket 协议。标准的 HTTP 无法实现 Web Sockets，只有支持这种协议的专门服务器才能正常工作。

• 建立 Web Sockets 实例
  var socket = new WebSockt('ws://www.example.com/server.php')
• 发送请求
  socket.send('hello World') // 通过WebSocket只能发送纯文本内容
• 处理收到的响应
  // 不支持 DOM 2 级事件侦听器，必须使用 DOM 0 级语法分别定义每个事件处理程序。
  socket.onmessage = function(event) {
  var data = event.data;
  // process data
  }

---

SSE 和 Web Sockets 的选择

面对具体用例，考虑是使用 SSE 还是 Web Sockets 时，可从以下两个因素考虑：

• 是否有自由度建立和维护 Web Sockets 服务器。
• 到底需不需要双向通信(组合 XHR 和 SSE 同样可以实现双向通信)