Fade away

Appearance

WebSocket ​

1.什么是WebSocket ​

WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。

2.构造函数 ​

js
const ws = new WebSocket(url [, protocols]);
  • url：需要链接的WebSocket地址，必须以ws://开头
  • protocols：可选，一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（例如，你可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。

例子：

js
// 创建一个 WebSocket 连接
const socket = new WebSocket("ws://localhost:8080");

// 监听消息
socket.addEventListener("message", function (event) {
  console.log(event.data);
});

3.实例属性 ​

3.1 binaryType ​

作用：返回 websocket 连接所传输二进制数据的类型。

返回值：DOMString

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

3.2 protocol ​

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

返回值：DOMString

3.3 readyState ​

作用：返回当前 WebSocket 的链接状态，只读。

返回值：

  • 0：WebSocket.CONNECTING，正在链接中
  • 1：WebSocket.OPEN，已经链接并且可以通讯
  • 2：WebSocket.CLOSING，连接正在关闭
  • 3：WebSocket.CLOSED，连接已关闭或者没有链接成功

3.4 url ​

作用：只读属性，返回值为当构造函数创建WebSocket实例对象时 URL 的绝对路径。

4.实例方法 ​

4.1 close() ​

作用：关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。

语法：

js
const ws = new WebSocket(url [, protocols]);
ws.close()
  • code:可选，一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。CloseEvent的允许的状态码见状态码列表 。
  • reason：可选，一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

4.2 send() ​

作用：向服务端发送数据

语法：

js
const ws = new WebSocket(url [, protocols]);
ws.send(data)

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

    • USVString

      文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。

    • ArrayBuffer

      你可以使用类型化数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount 将加上所需字节数的值。

    • Blob

      Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。

    • ArrayBufferView

      你可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。

5.事件 ​

5.1 open ​

作用：当WebSocket 连接成功时触发事件，也就是webSocket状态readyState 变为1时调用；这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发。

语法：

js
const ws = new WebSocket(url [, protocols]);

ws.onopen = function(event) {
  console.log("WebSocket连接成功");
};

ws.addEventlistener('open',()=>{})

5.2 message ​

作用：在 WebSocket 接收到新消息时被触发。

语法：

js
const ws = new WebSocket(url [, protocols]);

ws.onmessage = function(e) {
    console.log(e.data);
};

ws.addEventlistener('message',(e)=>{
    console.log(e.data);
})

服务端发送过来的数据可以在e.data中获取

5.3 close ​

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

语法：

js
const ws = new WebSocket(url [, protocols]);

ws.onclose = function(event) {
  console.log("WebSocket连接已关闭");
};

ws.addEventlistener('close',()=>{})

MIT Licensed

Copyright © 2024-present xarzhi