实时通信：WebSocket

1. 简介

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
构造函数：WebSocket(url[, protocols])

2. 属性

• WebSocket.binaryType
  使用二进制的数据类型连接。

• WebSocket.bufferedAmount 只读
  未发送至服务器的字节数。

• WebSocket.extensions 只读
  服务器选择的扩展。

• WebSocket.onclose
  用于指定连接关闭后的回调函数。

• WebSocket.onerror
  用于指定连接失败后的回调函数。

• WebSocket.onmessage
  用于指定当从服务器接受到信息时的回调函数。

• WebSocket.onopen
  用于指定连接成功后的回调函数。

• WebSocket.protocol 只读
  服务器选择的下属协议。

• WebSocket.readyState 只读
  当前的链接状态。

• WebSocket.url 只读
  WebSocket 的绝对路径。

3. 方法

• WebSocket.close([code[, reason]])
  关闭当前链接。

• WebSocket.send(data)
  对要传输的数据进行排队。

4. 事件

使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性，来监听下面的事件。

• close
  当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置。
• error
  当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。 也可以通过 onerror 属性来设置。
• message
  当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置。
• open
  当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置。

5. 示例

// 创建 WebSocket 连接.
const socket = new WebSocket('ws://localhost:8080');

// 连接成功时触发
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 收到数据时触发
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
1
2
3
4
5
6
7
8
9
10
11
12

6. 与HTTP协议的异同

• 相同点：
  • 都是 TCP 协议；
  • 都使用 Request/Response 模型进行连接的建立；
  • websocket 是基于 http 的，他们的兼容性都很好；
  • 在连接的建立过程中对错误的处理方式相同；
  • 都可以在网络中传输数据。
• 不同点：
  • websocket 是持久连接，http 是短连接；
  • websocket 的协议是以 ws/wss 开头，http 对应的是 http/https；
  • websocket 是有状态的，http 是无状态的；
  • websocket 连接之后服务器和客户端可以双向发送数据，http 只能是客户端发起一次请求之后，服务器才能返回数据；
  • websocket 是可以跨域的；
  • websocket 连接建立之后，数据的传输使用帧来传递，不再需要Request消息。