JavaScript学习笔记（四十八）网络请求与远程资源（四）

Web Socket

• Web Socket (套接字)的目标是通过一个长时连接实现与服务器全双工、双向的通信。

1、API

• 要创建一个新的WebSocket，就要实例化一个WebSocket对象并传人提供连接的URL。
• 必须给WebSocket构造函数传人一个绝对URL。

let socket = new WebSocket("ws://www.example.com/server.php");

• 同源策略不适用于Web Socket，因此可以打开到任意站点的连接。
• 至于是否与来自特定源的页面通信，则完全取决于服务器。(在握手阶段就可以确定请求来自哪里。)
• 浏览器会在初始化WebSocket对象之后立即创建连接。
• 与XHR类似，WebSocket也有一个readyState属性表示当前状态。不过，这个值与XHR中相应的值不一样。

• WebSocket对象没有readystatechange 事件，而是有与上述不同状态对应的其他事件。readyState值从0开始。
• 任何时候都可以调用close()方法关闭Web Socket连接，调用close()之后，readyState立即变为2 (连接正在关闭),并会在关闭后变为3 (连接已经关闭)。

2、发送和接收数据

• 打开Web Socket之后，可以通过连接发送和接收数据。
• 要向服务器发送数据，使用send()方法并传入一个字符串、ArrayBuffer或Blob。

let socket = new WebSocket("ws://www.example.com/server.php"); 
let stringData = "Hello world!"; 
let arrayBufferData = Uint8Array.from(['f', 'o', 'o']); 
let blobData = new Blob(['f', 'o', 'o']); 
socket.send(stringData); 
socket.send(arrayBufferData.buffer); 
socket.send(blobData);

• 服务器向客户端发送消息时，WebSocket 对象上会触发message事件。这个message事件与其他消息协议类似，可以通过event.data属性访问到有效载荷。

socket.onmessage = function(event) { 
    let data = event.data; 
    // 对数据执行某些操作
}; 

• 与通过send()方法发送的数据类似，event.data返回的数据也可能是ArrayBuffer或Blob。这由WebSocket对象的binaryType属性决定，该属性可能是”blob”或” arraybuffer”。

3、其他事件

• open：在连接成功建立时触发。
• error：在发生错误时触发。连接无法存续。
• close：在连接关闭时触发。

let socket = new WebSocket("ws://www.example.com/server.php"); 
socket.onopen = function() { 
 alert("Connection established."); 
}; 
socket.onerror = function() { 
 alert("Connection error."); 
}; 
socket.onclose = function() { 
 alert("Connection closed."); 
};