乐趣区

关于前端:WebSocket-对象简介

jiezi

WebSockets 是一种先进的技术。它能够在用户的浏览器和服务器之间关上交互式通信会话。应用此 API，您能够向服务器发送音讯并接管事件驱动的响应，而无需通过轮询服务器的形式以取得响应。

何为 WebSocket 对象？

WebSocket 对象是 WebSockets 的接口之一，用于连贯 WebSocket 服务器的次要接口，之后能够在这个连贯上发送 和承受数据。

WebSocket 对象提供了用于创立和治理 WebSocket 连贯，以及能够通过该连贯发送和接收数据的 API。

应用 WebSocket() 构造函数来结构一个 WebSocket：

let aWebSocket = new WebSocket(url [, protocols]);

参数解析：

  • url: 要连贯的 URL；这应该是 WebSocket 服务器将响应的 URL。
  • protocols(可选)：一个协定字符串或者一个蕴含协定字符串的数组。这些字符串用于指定子协定，这样单个服务器能够实现多个 WebSocket 子协定（例如，您可能心愿一台服务器可能依据指定的协定（protocol）解决不同类型的交互）。如果不指定协定字符串，则假设为空字符串。

WebSocket 对象的常量

Constant Value
WebSocket.CONNECTING 0
WebSocket.OPEN 1
WebSocket.CLOSING 2
WebSocket.CLOSED 3

WebSocket 对象的属性

WebSocket.binaryType

返回 WebSocket 连贯所传输二进制数据的类型。

语法：

const binaryType = aWebSocket.binaryType;

返回值：DOMString（一个 UTF-16 字符串）

  • "blob"：如果传输的是 Blob 类型的数据。
  • "arraybuffer"：如果传输的是 ArrayBuffer 类型的数据。

WebSocket.bufferedAmount（只读）

用于返回曾经被 send() 办法放入队列中但还没有被发送到网络中的数据的字节数。

一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。

然而，若在发送过程中连贯被敞开，则属性值不会重置为 0。如果你一直地调用send()，则该属性值会持续增长。

语法：

const bufferedAmount = aWebSocket.bufferedAmount;

返回值：整数。

WebSocket.extensions（只读）

返回服务器已抉择的扩大值。目前，链接能够协定的扩大值只有空字符串或者一个扩大列表。

const extensions = aWebSocket.extensions;

返回值：DOMString。

WebSocket.onclose

返回一个事件监听器，这个事件监听器将在 WebSocket 连贯的 readyState 变为 CLOSED时被调用，它接管一个名字为“close”的 CloseEvent 事件。

语法：

WebSocket.onclose = function(event) {console.log("WebSocket is closed now.");
};

返回值：EventListener。

WebSocket.onerror

该属性中，你能够定义一个产生谬误时执行的回调函数，此事件的事件名为 ”error”

语法：

WebSocket.onerror = function(event) {console.error("WebSocket error observed:", event);
};

返回值：EventListener。

WebSocket.onmessage

该属性是一个当收到来自服务器的音讯时被调用的 event handler。它由一个 MessageEvent 调用。

语法

aWebSocket.onmessage = function(event) {console.debug("WebSocket message received:", event);
};

返回值：EventListener。

WebSocket.onopen

该属性定义一个事件处理程序，当 WebSocket 的连贯状态readyState 变为 1 时调用; 这意味着以后连贯曾经筹备好发送和承受数据。这个事件处理程序通过 事件（建设连贯时）触发。

语法：

aWebSocket.onopen = function(event) {console.log("WebSocket is open now.");
};

返回值：EventListener。

WebSocket.protocol（只读）

用于返回服务器端选中的子协定的名字；这是一个在创立 WebSocket 对象时，在参数 protocols 中指定的字符串，当没有已建设的链接时为空串。

语法：

var protocol = aWebSocket.protocol;

返回值：DOMString。

WebSocket.readyState（只读）

返回以后 WebSocket 的链接状态，只读。

语法：

var readyState = WebSocket.readyState;

值：

  • 0 (WebSocket.CONNECTING) 正在链接中
  • 1 (WebSocket.OPEN) 曾经链接并且能够通信
  • 2 (WebSocket.CLOSING) 连贯正在敞开
  • 3 (WebSocket.CLOSED) 连贯已敞开或者没有链接胜利

WebSocket.url（只读）

返回值为当构造函数创立 WebSocket 实例对象时 URL 的绝对路径。

语法：

var url = aWebSocket.url;

返回值：DOMString。

WebSocket 对象的办法

WebSocket.close()

办法敞开 WebSocket连贯或连贯尝试（如果有的话）。如果连贯曾经敞开, 则此办法不执行任何操作。

语法：

WebSocket.close();

参数：

  • code（可选）一个数字状态码，它解释了连贯敞开的起因。如果没有传这个参数，默认应用 1005。
  • reason（可选）一个人类可读的字符串，它解释了连贯敞开的起因。这个 UTF- 8 编码的字符串不能超过 123 个字节。

WebSocket.send()

办法将须要通过 WebSocket 链接传输至服务器的数据排入队列，并依据所须要传输的 data bytes 的大小来减少 bufferedAmount的值。若数据无奈传输（例如数据须要缓存而缓冲区已满）时，套接字会自行敞开。

语法：

WebSocket.send("Hello server!");

参数:

data用于传输至服务器的数据。它必须是以下类型之一：

  • USVString 文本字符串。字符串将以 UTF-8 格局增加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格局编码时的字节数的值
  • ArrayBuffer 您能够应用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount 将加上所需字节数的值。
  • Blob Blob 类型将队列 blob 中的原始数据以二进制中传输。bufferedAmount 将加上原始数据的字节数的值。
  • ArrayBufferView 您能够以二进制帧的模式发送任何 JavaScript 类数组对象；其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。

WebSocket 对象的事件

WebSocket 对象应用 addEventListener() 或将一个事件监听器赋值给本接口的 on*eventname* 属性，来监听上面的事件。

close event

当与 WebSocket 的连贯敞开时，会触发 close 事件。

您可能想晓得连贯何时敞开，以便您能够更新 UI，或者保留与已敞开连贯无关的数据。例子：

exampleSocket.addEventListener('close', (event) => {console.log('The connection has been closed successfully.');
});

error event

当 websocket 的连贯因为一些谬误事件的产生 (例如无奈发送一些数据)而被敞开时，一个 error 事件将被引发。例子：

// Create WebSocket connection
// 创立一个 WebSocket 连贯
const socket = new WebSocket('ws://localhost:8080');

// Listen for possible errors
// 监听可能产生的谬误
socket.addEventListener('error', function (event) {console.log('WebSocket error:', event);
});

message event

message 事件会在 WebSocket 接管到新音讯时被触发。例子：

// 创立一个 WebSocket 连贯
const socket = new WebSocket('ws://localhost:8080');

// 监听音讯
socket.addEventListener('message', function (event) {console.log('Message from server', event.data);
});

open event

当一个 WebSocket 连贯胜利时触发。也能够通过 onopen属性来设置。例子：

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

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

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

退出移动版