WebSocket API - HTML5(JavaScript)客户端API

WebSocket并不只是在浏览器和服务器中通信，两个任何框架编写，支持WebSocket的应用程序都可以创建WebSocket连接进行通信。

1). 创建WebSocket对象

var connection = new WebSocket('ws://www.example.net/stocks/stream'); // 第一参数为请求的url
var connection = new WebSocket('wss://secure.example.org/games/chess'); // SSL/TLS加密
var connection = new WebSocket('ws://www.example.net/chat', 'chat'); // 第二个可选参数为字符串或者字符串数组，一个或者多个开发自定义的协议
var connection = new WebSocket('ws://www.example.net/chat', {'chat.v1','chat.v2'});

2). 使用WebSocket对象

1. readyState 属性: 比如connection.readyState,表示WebSocket连接的状态，取值如下
   • WebSocket.CONNECTING: 值为0，表示正在建立连接
   • WebSocket.OPEN: 值为1，表示连接建立
   • WebSocket.CLOSE: 值为2，表示正在关闭连接
   • WebSocket.CLOSED: 值为3，表示连接已经关闭

WebSocket没有onreadystatechange事假(无论发生啥都会被调用)，这将迫使我们检查readState并决定接下来的操作

if (connection.readyState == WebSocket.OPEN) { 
    /* do something */ 
}

3). WebSocket中的四种事件

1. onopen事件

readState从CONNECTING变为OPEN，及连接建立时触发的事件；只读的url、extension（服务器提供的拓展）、protocol(服务器选择的协议)对象属性将会被固定下来；传入的事件为一个标准的js事件，没有特殊的地方。

connection.onopen = function(event) {
    alert('WebSocket连接已经建立')
}

2. onmessage事件【！】

包含一个 data 属性;
①: 如果是文本消息，该属性就是字符串;
②: 如果是二进制消息，该属性默认为Blob数据(WebSocket的binaryType默认为blob);
③: 如果WebSocket的binaryType被设置为arraybuffer,该属性值为 ArrayBuffer

通常在实例化WebSocket后应该立即设置binaryType属性,在需要修改的时候也可以修改该属性；

var connection = WebSocket('ws://www.example.net/chat');
connection.binaryType = 'arraybuffer';

... 

connection.onmessage = function(event) {
    alert(event.data)
}

3. onerror事件

只有出现客户端错误时触发，协议错误只会导致连接的关闭，包含一个data属性，错误对象，可以是任意类型的数据(通常是字符串信息)

connection.onerror = function(event) {
    alert(event.data)
}

4. onclose事件

readState从CLOSING变为CLOSED，及连接关闭时触发的事件；传入的事件有三个属性
wasClean、code、reason，可以根据这些信息报告一些非正常关闭的信息

connection.onclose = function(event) {
    if (!event.wasClean) {
        alert(event.code + ': ' + event.reason) // code 为1000表示正常
    }
}

4). WebSocket消息的发送

WebSocket发送消息send接收一个唯一的参数，这个参数类型如下

1. 字符串
2. Blob
3. ArrayBuffer
4. ArrayBufferView

WebSocket的bufferedAmount属性表示之前的send调用还有多少数据需要发送，也就是之前还没有发送完的数据有多少，用此属性可以避免消息堆积。

connection.onopen = function() {
    // 定时器
    var intervalId = window.setInterval(function() {
        if (connection.readyState != WebSocket.OPEN) {
            window.clearInterval(intervalId);
            return;
        }
        
        // 缓存数据全部发送之后
        if (connection.bufferedAmount == 0) {
            connection.send(updatedModelData);
        }
    }, 50)
}

5. WebSocket通信的关闭

connection.close()

// 第一个可选参数为关闭代码，默认1000；第二个可选参数为字符串表示关闭原因
connection.close(1000, 'reason')