WebSocket基础-KeepStudy

WebSocket基础

> WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
>
> WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
>
> 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

### WebSocket 构造函数

- **返回值：**返回一个 `WebSocket` 对象

- **语法：**var WebSocket = new WebSocket(url [, protocols]);

- ##### 参数

`url` ： 要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。

`protocols` ：可选，一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议。

### WebSocket 属性

##### binaryType

- > 返回值：返回 websocket 连接所传输二进制数据的类型blob或arraybuffer。
  >
  > 语法：var binaryType = WebSocket.binaryType;

##### bufferedAmount

- > 返回值：一个只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。但是，若在发送过程中连接被关闭，则属性值不会重置为 0。如果你不断地调用send()，则该属性值会持续增长。
  >
  > 语法：var bufferedAmount = WebSocket.bufferedAmount;

##### extensions

- > 返回值：返回 websocket 连接所传输二进制数据的类型：blob或arraybuffer。
  >
  > 语法：var binaryType = WebSocket.binaryType;

##### protocol

- > 返回值：只读属性，用于返回服务器端选中的子协议的名字。这是一个在创建 `WebSocket` 对象时，在参数 `protocols` 中指定的字符串，当没有已建立的链接时为空串。
  >
  > 语法：var protocol = WebSocket.protocol;

##### readyState

- > 返回值：返回当前 `WebSocket` 的链接状态，只读。有以下几个值：
  >
  > > 0 (WebSocket.CONNECTING)  正在链接中
  > > 1 (WebSocket.OPEN)                 已经链接并且可以通讯
  > > 2 (WebSocket.CLOSING)           连接正在关闭
  > > 3 (WebSocket.CLOSED)             连接已关闭或者没有链接成功
  >
  > 语法：var readyState = WebSocket.readyState;

##### url

- > 返回值：一个只读属性，返回值为当构造函数创建`WebSocket`实例对象时 URL 的绝对路径。
  >
  > 语法：var url = WebSocket.url;

### WebSocket 方法

##### WebSocket.close()

- > 关闭 `WebSocket` 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。
  >
  > 语法：WebSocket.close();
  >
  > 参数：
  >
  > code可选：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。CloseEvent的允许的状态码见状态码列表 。
  > reason可选：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

##### WebSocket.send()

- > - 将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加bufferedAmount的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。
  >
  > - 语法：WebSocket.send(data);
  > - 参数data：用于传输至服务器的数据。它必须是以下类型之一：
  >   - USVString：文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
  >   - ArrayBuffer：你可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，
  >   - bufferedAmount 将加上所需字节数的值。
  >   - Blob：Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
  >     ArrayBufferView：你可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
  >
  > ```javascript
  > const socket = new WebSocket("ws://echo.websocket.org");
  > socket.onopen = function() {
  >   // 发送UTF-8编码的文本信息
  >   socket.send("Hello Echo Server!");
  >   // 发送UTF-8编码的JSON数据
  >   socket.send(JSON.stringify({ msg: "我是阿宝哥"}));
  >   // 发送二进制ArrayBuffer
  >   const buffer = newArrayBuffer(128);
  >   socket.send(buffer);
  >   // 发送二进制ArrayBufferView
  >   const intview = new Uint32Array(buffer);
  >   socket.send(intview);
  >   // 发送二进制Blob
  >   const blob = new Blob([buffer]);
  >   socket.send(blob);
  > };
  > ```

### WebSocket 事件

##### WebSocket.onclose

- > 返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用，它接收一个名字为“close”的 CloseEvent 事件。
  >
  > ```javascript
  > WebSocket.onclose = function(event) {
  > console.log("WebSocket is closed now.");
  > };
  > ```

##### WebSocket.onerror

- > 当`websocket`的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个`error`事件将被引发。
  >
  > ```javascript
  > websocket.addEventListener("error", function (event) {
  > 	console.log("WebSocket error: ", event);
  > });
  > 
  > websocket.onerror = function (evt, e) {
  > 	console.log('Error occured: ' + evt.data);
  > };
  > ```

##### WebSocket.open

- > 定义一个事件处理程序，当WebSocket 的连接状态readyState 变为1时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发。
  >
  > ```javascript
  > aWebSocket.onopen = function(event) {
  > console.log("WebSocket is open now.");
  > };
  > ```

##### WebSocket.message

- > `message` 事件会在 `WebSocket` 接收到新消息时被触发。
  >
  > ```javascript
  > socket.addEventListener("message", function (event) {
  > console.log("Message from server ", event.data);
  > });
  > ```

顶部

WebSocket

目录

相关推荐