浅析CORS、SSE 和 WebSockets

2016-02-26 本文已影响773人 youngBrain1893

近期在重新看《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 同样可以实现双向通信)

浅析CORS、SSE 和 WebSockets

CORS

SSE

Web Sockets

SSE 和 Web Sockets 的选择

猜你喜欢

热点阅读