本文介绍: 这些字符串用于指定协议,这样单个服务器可以实现多个 WebSocket协议可以通过一台服务器根据指定协议protocol处理不同类型交互)。字符串将以 UTF-8 格式添加缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。其二进制数据内存将被缓存缓冲区bufferedAmount 将加上所需字节数的值。:一个人类可读的字符串,它解释连接关闭原因。的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个

先来一个常用例子

// WebSocket构造函数创建WebSocket对象
let ws = new WebSocket('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连接,防止连接还没断开就关闭窗口,这样服务端会抛异常
window.onbeforeunload = function() {
    ws.close();
}  

封装代码
上面的代码就够用,也可以查看封装好的 WebSocket 代码(包括心跳机制):点击查看

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

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

下面是我总结内容

WebSocket
WebSocket 对象提供了用于创建管理 WebSocket 连接,以及可以通过该连接发送接收数据的 API。

var ws= new WebSocket(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 something
    break;
  case WebSocket.OPEN:			// 也可以用1
    // do something
    break;
  case WebSocket.CLOSING:		// 也可以用2
    // do something
    break;
  case WebSocket.CLOSED:		// 也可以用3
    // do something
    break;
  default:
    // this never happens
    break;
}

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 连接关闭后的回调函数
oncloseWebSocket 连接的readyState 变为 CLOSED3时被调用,它接收一个名字closeCloseEvent 事件

使用方法

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 = new ArrayBuffer(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 个字节。

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

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

WebSocket心跳机制/保持连接内容,请看我的其他文章里面封装好的 WebSocket 方法,可以直接使用):点击查看

原文地址:https://blog.csdn.net/qq_17627195/article/details/128559926

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44856.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注