阅读 471

WebSocket 对象简介

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

WebSocket 对象简介

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 对象的常量

ConstantValue
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3

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!');
});
复制代码

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

文章分类
前端
文章标签