WebSocket学习

WebSocket对象提供了一组用于创建和管理WebSocket连接，以及可以通过该连接发送和接收数据的API。

那么我们已经有了HTTP, 那么为什么又构造一个WebSocket呢？ 它到底有什么好处呢?

原因非常简单，HTTP有一个缺陷: 通信只能由客户端发起。

举例来说，我们需要获取今日的天气情况，我们只能请求天气服务，然后获得这个服务的响应。HTTP协议做不到服务器主动推送天气信息给客户端。

HTTP协议问题介绍

HTTP协议是Web协议的基础，但是它存在下面的问题:

• 单向的
• 请求/响应模式
• 无状态的
• 半双工协议

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用”轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket就是这样发明的。

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket的建立

WebSocket构造器方法接受一个必须的参数和一个可选的参数：

WebSocket WebSocket(in DOMString url, in optional DOMString protocols);
WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols);

参数介绍

1) url: 表示要连接的URL。这个URL应该为响应WebSocket的地址。

2) protocols: (可选)

可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组。这些字符串用来表示子协议，这样做可以让一个服务器实现多种WebSocket子协议（例如你可能希望通过制定不同的协议来处理不同类型的交互）。如果没有制定这个参数，它会默认设为一个空字符串。

构造器方法可能抛出以下异常：

SECURITY_ERR

试图连接的端口被屏蔽。

方法介绍

close()

void close(in optional unsigned long code, in optional DOMString reason);

关闭WebSocket连接或停止正在进行的连接请求。如果连接的状态已经是closed，这个方法不会有任何效果

参数

1) code 可选

一个数字值表示关闭连接的状态号，表示连接被关闭的原因。如果这个参数没有被指定，默认的取值是1000 （表示正常连接关闭）。

2) reason 可选

一个可读的字符串，表示连接被关闭的原因。这个字符串必须是不长于123字节的UTF-8文本（不是字符）。

可能抛出的异常

• INVALID_ACCESS_ERR: 选定了无效的code。
• SYNTAX_ERR: reason字符串太长或者含有unpaired surrogates。

void send(in DOMString data);
void send(in ArrayBuffer data);
void send(in Blob data);

参数

data: 要发送到服务器的数据。

可能抛出的异常

• INVALID_STATE_ERR: 当前连接的状态不是OPEN。
• SYNTAX_ERR: 数据是一个包含unpaired surrogates(不成对的代替品)的字符串。

注意: Gecko 6.0实现的send()方法与规范的要求有一些不同。Gecko会返回一个 boolean表示连接是否依然处于开启状态 （并且这个数据被成功放入的发送队列或者被发送）。在 Gecko 8.0中这个问题被修正了。

到了 Gecko 11.0，实现了接受 ArrayBuffer的参数的方法，但接受 Blob数据类型的方法没有被实现。

属性介绍

binaryType: DOMString

一个字符串表示被传输二进制的内容的类型。取值应当是”blob”或者”arraybuffer”。

“blob”表示使用DOMBlob 对象，而”arraybuffer”表示使用 ArrayBuffer 对象。

bufferedAmount: unsigned long

调用send()方法将多字节数据加入到队列中等待传输，但是还未发出。该值会在所有队列数据被发送后重置为0。而当连接关闭时不会设为0。如果持续调用send()，这个值会持续增长。只读。

extensions: DOMString

服务器选定的扩展。目前这个属性只是一个空字符串，或者是一个包含所有扩展的列表。

onclose: EventListener

用于监听连接关闭事件监听器。当WebSocket对象的readyState状态变为CLOSED时会触发该事件。这个监听器会接收一个叫close的CloseEvent对象。

onerror: EventListener

当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。

onmessage: EventListener

一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为”message”的MessageEvent对象。

onopen: EventListener

一个用于连接打开事件的事件监听器。当readyState的值变为OPEN的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为”open”的事件对象。

protocol: DOMString

一个表明服务器选定的子协议名字的字符串。这个属性的取值会被取值为构造器传入的protocols参数。

readyState: unsigned short

连接的当前状态。取值是Ready state constants之一。 只读。

url: DOMString

传入构造器的URL。它必须是一个绝对地址的URL。只读。

常量

Ready state常量

这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。

• CONNECTING: 0, 表示连接还没开启。
• OPEN: 1, 表示连接已开启并准备好进行通信。
• CLOSING: 2, 表示连接正在关闭的过程中。
• CLOSED: 3, 表示连接已经关闭，或者连接无法建立。

代码示例

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});