这篇文章主要介绍“JS前端中的WebSocket如何使用”，在日常操作中，相信很多人在JS前端中的WebSocket如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JS前端中的WebSocket如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
先来一个常用例子
// 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("连接失败了"); };
更全面的官网的文档可以去这里看：点击查看
下面是我总结的内容
WebSocketWebSocket 对象提供了用于创建和管理 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;
}
当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);
};
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 = 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 将加上必要字节数的值。
close() 方法关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。
使用方法
// WebSocket.close(code, reason) ws.close();
参数：
code（可选）：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。reason（可选）：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。
到此，关于“JS前端中的WebSocket如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程之家网站，小编会继续努力为大家带来更多实用的文章！
小编说
以上是编程之家为你收集整理的JS前端中的WebSocket如何使用全部内容。
