WebSocket的使用方法（JS前端）

先来一个常用例子

// WebSocket构造函数，创建WebSocket对象let ws =newWebSocket('ws://localhost:8888')// 连接成功后的回调函数
ws.onopen=function(params){
  console.log('客户端连接成功')// 向服务器发送消息
  ws.send('hello')};// 从服务器接受到信息时的回调函数
ws.onmessage=function(e){
  console.log('收到服务器响应', e.data)};// 连接关闭后的回调函数
ws.onclose=function(evt){
  console.log("关闭客户端连接");};// 连接失败后的回调函数
ws.onerror=function(evt){
  console.log("连接失败了");};

下面详细说明常用的属性和方法

更全面的官网的文档可以去这里看：点击查看

下面是我总结的内容

WebSocket

WebSocket

对象提供了用于创建和管理

WebSocket

连接，以及可以通过该连接发送和接收数据的 API。

var ws=newWebSocket(url, protocols);

参数

url

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

protocols（可选）

：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（可以通过一台服务器根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。

属性

**1.

readyState

属性返回实例对象的当前状态**

CONNECTING

：值为0，表示正在连接。

OPEN

：值为1，表示连接成功，可以通信。

CLOSING

：值为2，表示连接正在关闭。

CLOSED

：值为3，表示连接已经关闭，或者打开连接失败。

示例

switch(ws.readyState){case WebSocket.CONNECTING:// 也可以用0// do somethingbreak;case WebSocket.OPEN:// 也可以用1// do somethingbreak;case WebSocket.CLOSING:// 也可以用2// do somethingbreak;case WebSocket.CLOSED:// 也可以用3// do somethingbreak;default:// this never happensbreak;}

**2.

onopen

连接成功后的回调函数**
当

WebSocket

的连接状态

readyState

变为

1

时调用，这意味着当前连接已经准备好发送和接受数据。

使用方法

ws.onopen=function(){
  ws.send('Hello Server!');}

或者

ws.addEventListener('open',function(event){
  ws.send('Hello Server!');});

**3.

onmessage

从服务器接受到信息时的回调函数**

message

事件会在

WebSocket

接收到新消息时被触发

使用方法

ws.onmessage=function(event){// 接收到的数据var data = event.data;// 其他代码};

或者

ws.addEventListener("message",function(event){// 接收到的数据var data = event.data;// 其他代码});

**注意：服务器推送的数据可能有多种格式，需要我们动态判断，也可以通过

binaryType

属性设置**

判断 / 设置 数据格式

// 判断
ws.onmessage=function(event){if(typeof event.data === String){
    console.log("返回数据是字符串");}}// binaryType 属性设置
ws.binaryType ="arraybuffer";
ws.onmessage=function(e){// 收到的是 ArrayBuffer 数据
  console.log(e.data.byteLength);};

**4.

onclose

连接关闭后的回调函数**

onclose

在

WebSocket

连接的

readyState

变为

CLOSED

或

3

时被调用，它接收一个名字为

close

的

CloseEvent

事件

使用方法

ws.onclose=function(event){var code = event.code;// 表示服务端发送的关闭码var reason = event.reason;// 表示服务器关闭连接的原因var wasClean = event.wasClean;// 表示连接是否完全关闭// 其他代码};

或者

ws.addEventListener("close",function(event){var code = event.code;// 表示服务端发送的关闭码var reason = event.reason;// 表示服务器关闭连接的原因var wasClean = event.wasClean;// 表示连接是否完全关闭// 其他代码});

关闭码对照表：点击查看

**5.

onerror

连接失败后的回调函数**
当

websocket

的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个

error

事件将被引发。

使用方法

ws.onerror=function(event){
  console.log('连接错误: ', event);};

或者

ws.addEventListener('error',function(event){
  console.log('连接错误: ', event);});

**6.

bufferedAmount

未发送至服务器的字节数**

bufferedAmount

是一个只读属性，用于返回已经被

send()

方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为

0

。但是，若在发送过程中连接被关闭，则属性值不会重置为

0

。如果你不断地调用

send()

，则该属性值会持续增长。

使用方法

// 创建数据var data =newArrayBuffer(10000000);// 发送数据
ws.send(data);// 判断数据是否if(socket.bufferedAmount ===0){// 数据发送完成}else{// 还有数据未发送完成}

方法

**1.

send()

对要传输的数据进行排队**

send()

方法将需要通过

WebSocket

链接传输至服务器的数据排入队列，并根据所需要传输的

data bytes

的大小来增加

bufferedAmount

的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

使用方法

ws.send('your message');

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

USVString

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

ArrayBuffer

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

Blob

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

ArrayBufferView

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

**2.

close()

关闭当前链接**

close()

方法关闭

WebSocket

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

使用方法

// WebSocket.close(code, reason)
ws.close();

参数：

code（可选）

：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。

reason（可选）

：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

数字状态码对照表：点击查看

到这里就结束了，根据需求使用就可以了。