前端handle WebSocket

浏览器兼容性

Chrome Firefox IE >= 10 Sarafi >= 6 Android >= 4.4 iOS >= 8

WebSocket 协议

关于同源策略

WebSocket协议本身不要求同源策略（Same-origin Policy），也就是某个地址为http://a.com的网页可以通过WebSocket连接到ws://b.com。但是，浏览器会发送Origin的HTTP头给服务器，服务器可以根据Origin拒绝这个WebSocket请求。所以，是否要求同源要看服务器端如何检查。

请求头部

客户端发起请求时，需具满足以下要求：

必选HTTP/1.1 或以上的GET请求，包含一个“请求资源标示符 Request-URI"
HOST字段，向服务器致命需要访问的服务名称
Upgrade头字段，值为大小不敏感的websocket字符串
Connection 头字段值为大小不敏感的字符串'upgrade'
一个 |Sec-WebSocket-Key| 头字段，它的值是一段使用 base64 编码Section 4 of [RFC4648] 后的字符串，解码之后是 16 个字节的长度。
一个 |Sec-WebSocket-Version| 头字段，它的值是 13
可选的，一个 |Origin| 头字段。这个是所有浏览器客户度必须发送的。如果服务端限定只能由浏览器作为其客户端的话，在缺少这个字段的情况下，可以认定这个握手请求不是由浏览器发起的，反之则不行。
可选的，一个 |Sec-WebSocket-Protocol| 头字段。由一些值组成的列表，这些值是客户端希望使用的子协议，按照优先级从左往右排序。
可选的，一个 |Sec-WebSocket-Extensions| 头字段。有一些值组成的列表，这些值是客户端希望使用的扩展。具体的表示在第 9 节。
可选的，其他头字段，比如那些用于向服务端发送 cookie 或则认证信息。未知的头字段将被忽略 RFC2616

示例

请求头

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
// 请求头Upgrade: websocket和Connection: Upgrade表示这个连接将要被转换为WebSocket连接；
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

响应头

HTTP/1.1 101 Switching Protocols
// 该响应代码101表示本次连接的HTTP协议即将被更改，更改后的协议就是Upgrade: websocket指定的WebSocket协议
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

WebSocket API

上面是万能的MDN的链接，下面都是个人翻译的，欢迎斧正。

attribute

属性	类型	描述
binaryType	DOMString	用于表示传送的二进制数据类型，根据使用场景选择'blob'或者是‘ArrayBuffer’
bufferedAmount	unsigned long	只读属性，用于表示已处于队列中但尚未处理的send请求数量，当队列中的send都被响应后，该值恢复为0。该值不会因此websocket请求关闭而重置为0.
extensions	DOMString	该值由服务端设置，前端展示为空字符串或者是该链接商榷后的一系列的值.
onclose	eventListener	当WebSocket链接状态变为关闭时触发，该事件监听器接收一个命名为close的closeEvent 。
onerror	eventListener	当发生错误时触发监听器，同时传入一个名为error 的 event。
onmessage	eventListener	当接收到服务器端相应的数据监听器触发，接收一个名为message 的 MEssageEvent
onopen	EventListener	事件在请求状态变为open时触发,这表明链接已经准备好接收数据了，这个事件名为open
protocol	DOMString	一个用于表明服务器端选择的子协议，该值在客户端创建链接时protocol参数中选择
readyState	unsigned short	只读属性，链接状态码是一种 ready state constants
url	DOMString	只读属性，构造函数生成时接收的参数，通常是绝对路径

method

close(code, reason)
@param {unsigned short code} code 用于表示关闭请求的原因，默认值1000
@param {DOMString} reason 有好的文字用于解释链接关闭的原因，utf-8编码下不可以超过123位
send(data)
@param {字符串 buffer Bolb实例} data 发送的内容

请求示例

浏览器发送请求

// 打开一个WebSocket:
var ws = new WebSocket('ws://localhost:3000/test');
// 响应onmessage事件:
ws.onmessage = function(msg) { console.log(msg); };
// 给服务器发送一个字符串:
ws.send('Hello!');

再来一个复杂一点的示例,节选自对 h264-live-player 对象方法封装

a{
cmd(){
if (this.ws != undefined) {
    this.ws.close();
    delete this.ws;
}
this.ws = new WebSocket(url);
this.ws.binaryType = "arraybuffer";
this.ws.onopen = function () {
  var msg = new Object();
  msg.messageType = "info";
  msg.deviceId = this.deviceId;
  var msgStr = JSON.stringify(msg);
  this.ws.send(msgStr);
}.bind(this);
        
this.ws.onmessage = function (evt) {
    if (typeof evt.data == "string"){
        handle(evt.data)
    }else{
        var data = new Uint8Array(evt.data);
    }
      var date = new Date();
      this.rcvtime = date.getTime();
      this.decode(data);
      this.prevframe = data;
  
  }.bind(this);

this.ws.onclose = function () {
     // websocket is closed.
     console.log("WSAvcPlayer: Connection closed")
};
}}

浏览器内调试

Chrome 中 network 中的 WS tab 用于调试 WebSocket类型的请求。
Frame中展示数据请求，请求类型分为两种字符串或者是二进制。当接收的是字符串的时候，背景色是白色的，当接收的是二进制时背景色为黄色的。发出的内容是绿色背景。

14835148163356.jpg